vue指令

v-if

v-if指令可以完全根据表达式的值在DOM中生成或者移除一个元素。
v-if是惰性的，如果初始渲染条件为假，则什么也不做，在条件第一次变为真时才开始局部编译，编译会被缓存起来。

v-show

v-show指令是根据表达式的值来显示或者隐藏HTML元素
v-show和v-if比较起来，v-if有更高的切换消耗，v-show有更高的初始渲染消耗。因此如果有频繁的切换，使用v-show更好，如果在运行时条件不大可能改变，用v-if比较好。

v-else

v-else就是javascript里的else的意思。搭配v-show使用

v-model

    v-model是用来在input，select，radio，checkbox，text等表单控件上创建双向数据绑定。
    除了比较常见的绑定数据形式，v-model后还可以添加参数。
1.number
    如果想把输入的数据转换为Number类型，（原值转换为NaN，则返回原值）可以添加一个number特性
2.lazy

<input v-model="msg" lazy>

此参数可以改变输入框的值和数据的同步，同步操作将会在change事件触发。
3.debounce(vue 2.0废除)
延时同步输入的值和数据，例如在输入的时候发送ajax请求，比较有用

<input v-model="msg" debounce="1000">

输入框中输入数据1s之后，data中的msg才会改变

v-for

v-for需要特殊的别名,形式为”item in items”,vue.js 1.0.17以后版本支持of分隔符,”item in/of items”,vue2.0规定最好加上”:key=””,这样有利于数组的遍历,每个item都有唯一的key。
v-for也支持整数。例如v-for=”n in 10”，会将模板重复整数次.
还可以遍历对象 (value,key) in obj ; index表示item在数组的索引。

v-text

v-text指令可以更新元素的textContent，在内部，{{msg}}插值被编译为textNode的一个v-text指令。

<span v-text="msg"></span>
// 等价于
<span>{{msg}}</span>

v-html

v-html可以更新元素的innerHtml。

<div v-html="html"></div>
// 等价于
<div>{{{html}}}</div>

不建议在网站上直接动态渲染任意html片段，这样很容易导致XSS攻击。

v-bind

v-bind指令用于绑定属性，class，style等，语法糖是”:src=””。
在绑定class和style时，支持绑定数组和对象

// 绑定到数组
<div id="example" :class="[classA,classB,classC,classD]"></div>
var example = new Vue({
    el:'#example',
    data:{
        classA:'A',
        classB:'other',
        classC:false,
        classD:true
    }
})
// 会被编译为
<div class="A other classD"></div>

// 当没有参数时，可以绑定到对象，但是对象的key会被转换为小写
<div id="example" v-bind="{id:some,'OTHERATTR':other}"></div>
var example = new Vue({
    el:'#example',
    data:{
        some:'some',
        other:'other'
    }
})
// 会被编译为
<div id="some" otherattr="other"></div>
// 注意绑定到对象时，对象key转换为小写。

v-on

v-on指令用于绑定事件监听器。v-on也有语法糖，即@;
v-on后面可以增加修饰符

@click.stop=""          //停止冒泡
@click.prevent=""       //阻止默认行为
@click.stop.prevent=""  //以上二者综合
@click.self=""          //本身触发才执行函数
@keyup.enter=""         //在指定键上触发回调
vue提供的键值有[esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,
down:40,delete:[8,46]];

ref

父组件上注册子组件的索引,有利于直接访问
this.$refs访问

v-once

此指令只绑定一次.

如果您有更多新的想法，欢迎交流，共同进步。

vue 内置指令