1.在html元素之间插入值，例：

<div id="app"> <p>{{ msg }}</p> </div>

<script> new Vue({ el: '#app', data: { msg : 'XXX' } }) </script>

双花括号之间写入插入的值,msg可以为人和文字数字，也可以是新的html元素

 

2.v-html

v-html和双花括号结果类似，唯一不同的是v-html写在元素内部，例：

<div id="app"> <div v-html="msg "></div> </div>

<script> new Vue({ el: '#app', data: { msg : 'XXX' } }) </script>

 

3.v-text

v-text为元素内部显示的文本，里面不可以显示HTML元素，就算写入HTML元素也只能当做文本显示，例：

<span v-text="msg"></span>

<script> new Vue({ el: '#app', data: { msg : 'XXX' } }) </script>

 

4.v-if、v-else 、v-else-if

相当于JavaScript的if、else 、else if 用法，v-if可单独存在，当有v-else的时候前面必须有v-if或者v-else-if，当用v-else-if的时候前面必须有v-if 或v-else-if，例：

<div v-if="num === 1">
1
</div>
<div v-else-if="num === 2">
2
</div>
<div v-else-if="num === 3">
3
</div>
<div v-else>
 error
</div>
<script> new Vue({ el: '#app', data: { num : 3 } }) </script>
此处输入为3
 
5.v-for
相当于JavaScript的for循环语句，如果你想重新排序可以给定一个key值让其依据key值来排序，例：
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
<script> new Vue({ el: '#app', data: { 
  items: [{
        id: 1,
        text: '111'
    }, {
        id: 2,
        text: '222'
    }]
 } }) </script>
 
6.v-on
监听事件，缩写为‘@’，例：
<div id="app">
    <button class="btn btn-success" v-on:click="showMsg">{{msg}}</button>
</div>
var vm = new Vue({
    el:‘#app‘,
    data:{
        msg:‘点击按钮‘,
        name:‘aaa‘
    },
    methods:{
        showMsg: function(e){
            console.log(‘我的名字是：‘ + this.name + ‘!‘);
        }
    }
});
此例就是点击按钮后显示“我的名字是aaa!”。
 
7.v-bind
绑定html元素的属性值，比如src、class、id、type和组件等等，可缩写为‘：’例：
<div id="app"><div v-bind:class="{'class1': class1}">aaa</div> </div>
<script> new Vue({ el: '#app', data:{ class1: false } }); </script>
表示class1为true使用class1样式，为false不使用，此处class1为false，表示不使用class1样式
 
8.v-model
用于绑定表单控件或组件的值，例：
<div id="app"> <p>{{ msg}}</p> <input v-model="msg"> </div>
<script> new Vue({ el: '#app', data: { msg: 'aaa' } }) </script>
此处input组件值就用v-model绑定，当是普通p元素的时候直接花括号绑定即可
 
9.v-show
相当于JavaScript的show()方法，用于显示某段内容，后跟true或者false，分别表示显示或隐藏，例：
<div v-show="true" style="display:none">显示</div>
<div v-show="false" style="display:none">隐藏</div>
注：当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。v-hide与v-show相反
 
10.v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译,例：
<span v-pre>此处不被编译显示</span>
 
11.v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕，例：
<div v-cloak>aa</div>
[v-cloak] {
display: none;
}
aa不会显示出来，但是要编译。
 
12.v-once
含有v-once的元素和组件中内容只执行一次，例：

<div id="app"> <p>{{ msg }}</p> </div>

<script> new Vue({ el: '#app', data: { msg : 'XXX' } }) </script>

当msg执行后，后面就算改变了msg的值，div中的内容不会改变