vue.js 的基本使用s

<meta charset="utf-8">

条件与循环

v-if

v-for

v-bind 指令将待办项传到循环输出的每个组件中

v-bind

定义点击事件·

v-on

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display

if 判断 是否显示

<div id ="app-3">

<p v-if="seen">现在你看到我了</p>

</div>

<script>

var app3 =new Vue({

el:'#app-3',

data:{

seen:true

}

})

<colgroup><col style="width: 600px;"></colgroup>
|

<div id="app-4">

<ol>

<li v-for="todo in todos">

{{ todo.text }}

</li>

</ol>

</div>

|

<colgroup><col style="width: 600px;"></colgroup>
|

var app4 = new Vue({

el: '#app-4',

data: {

todos: [

{ text: '学习 JavaScript' },

{ text: '学习 Vue' },

{ text: '整个牛项目' }

]

}

})

|

Vue 中的变异方法

push(),pop(),shift(),unshift(),splice(),sort(),reverse()

<colgroup><col style="width: 600px;"></colgroup>
|

<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.stop.prevent="doThat"></a>

<form v-on:submit.prevent></form>

<div v-on:click.capture="doThis">...</div>

<div v-on:click.self="doThat">...</div>

|

用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

• .ctrl
• .alt
• .shift
• .meta

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：