vue指令

v-bind特性被称为指令，指令带有前缀v-表示他们是Vue提供的特殊特性

v-text

用来替换插值表达式，如果有v-text，那么插值 {{}} 不起作用

v-html

如果要输出正确的不带html标签转义的内容，就需要v-html指令

v-cloak

与style标签一起使用，防止页面刷新不出来的时候出现乱码

[v-cloak] {

    display: none;

}

条件与循环

<ul>

    <li v-for="item in list">

        <span>{{item.id}}</span><span>{{item.title}}</span>

    </li>

</ul>

v-if

<span v-if="item.isCompleted === true" style="color:#090">已完成</span>

v-show 和 v-if 的区别

    相同点：v-if与v-show都可以动态控制dom元素显示隐藏

    不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。对于需要频繁切换显示和隐藏的节点特别实用。

v-on

v-on:事件名    用于绑定一个事件，这个事件可以直操作data里面的数据

v-on:事件名    可以直接缩写为@事件名

v-bind

用于动态绑定元素的属性

可以直接简写为 ：属性

    v-bind:key="item.id"

    :key="item.id"

按键修饰符

可以通过v-on添加按键修饰符

v-on指令绑定enter键事件，点击执行submit()函数事件，

同样也可以简写为@keyup.enter="onAddValue()"

下面的button按钮也绑定了点击事件，执行函数onAddValue();

同样vue监听按键事件也可以添加其他的按键：只要加上相应的按键的名称就行了

<div id="root">

     <input type="text" v-model="inputValue" @keyup.ctrl.enter="onAddValue()">

     <button @click="onAddValue">添加</button>

</div>