1、v-if:
v-if：是vue 的一个内部指令，指令用在我们的html中。
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后显示用户名称。
<div v-if="isLogin">你好，JSPang！</div>2、v-show ：
v-show ：调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
<div v-show="isLogin">你好：JSPang</div>3、v-if 和v-show的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。4、v-for指令 ：解决模板循环问题
// v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。
<li v-for="item in items">
{{item}}
</li>5、排序：
// 我们已经顺利的输出了我们定义的数组，但是我需要在输出之前给数组排个序，那我们就用到了Vue的computed:属性。
computed:{
sortItems:function(){
return this.items.sort();
}
}6、v-text & v-html
我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的 {{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。
需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
<span>{{ message }}</span>=<span v-text="message"></span><br/>7、v-on：绑定事件监听器
// v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
<button v-on:click="jiafen">加分</button>
// 我们的v-on 还有一种简单的写法，就是用@代替。
<button @click="jiafen">加分</button>
//我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
// 同样可以写成：
<input type="text" @keyup.enter="onEnter" v-model="secondCount">8、v-model：绑定数据源
v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。修饰符
.lazy：取代 input 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。9、v-bind ：绑定标签属性
// v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，我们绑定<img>上的src进行动态赋值。
<div id="app">
<img v-bind:src="imgSrc" width="200px">
</div>v-bind 缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
// 直接绑定class样式
<div :class="className">1、绑定classA</div>
//绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
<div :class="{classA:isOk}">2、绑定class中的判断</div>
//绑定class中的数组
<div :class="[classA,classB]">3、绑定class中的数组</div>
//绑定class中使用三元表达式判断
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
//绑定style
<div :style="{color:red,fontSize:font}">5、绑定style</div>
//用对象绑定style样式
<div :style="styleObject">6、用对象绑定style样式</div>10、其他内部指令(v-pre & v-cloak & v-once)
v-pre指令
在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<div v-pre>{{message}}</div>
这时并不会输出我们的message值，而是直接在网页中显示{{message}}
v-cloak指令
在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
v-once指令
在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>