1.v-if ：用来判断是否加载html的dom
在vue实例中给定一个属性的定值，用if条件去判断是否 显示某个元素标签。
<div id="app">
<p>一。v-if 用于条件判断</p>
<p v-if = "items > 10">{{ items }}个有现货</p><!-- 大于10个显示这个 -->
<p v-else-if = "item > 1">所剩不多了，快点买吧</p><!-- 0-10个显示这个 -->
<p v-else>没有库存了，请耐心等待</p><!-- 0个显示这个 -->
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
items : 52,
Ninja : true,
//一个忍者技能，是否隐身
}
})
</script>2.v-show：调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
<div id="app">
<P>二。 v-show 把DOM节点通过display:none隐藏起来了</P>
<p v-show = "Ninja">i am hide</p>
<p v-show = "!Ninja">i am here</p>
<button v-on:click = "Ninja = !Ninja">Ninga skill</button>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
items : 52,
Ninja : true,
//一个忍者技能，是否隐身
}
})
</script>3.学到这里，我们对 v-if 和 v-show 进行一个比较，摘自VUE官网：
v-if是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
相比之下，v-show简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用v-show较好，如果在运行时条件不大可能改变则使用v-if较好。
用个人的理解就是：v-if 为 false 时，源码中的 html 以注释形式显示；v-show的值为false时，实际上是执行了CSS的display属性来控制元素的显隐。 v-if 为 true 时，源码中的 HTML 才进行渲染。
选择：
- v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
- v-show：调整css dispaly属性，可以使客户端操作更加流畅。
4.v-for ：需要v-for循环哪个html标签就写在哪个上。有一个点要注意：.v-for的运行机制模板复用。循环的时候直接使用上一个模板，就不需要重新渲染dom，节省性能。但是他也存在一个BUG。这个BUG我们后面会讲解。
BUG!!!!
<div id="app">
<div v-for = "item in persons" >
{{item.name}} {{item.id}}
<input type="" name="">
</div>
<button v-on:click = "reverse">reverse</button>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
persons : [{
id : 1,
name : "liu"
},{
id : 2,
name : "da"
},{
id :3,
name : "zhuang"
}]
},
methods : {
reverse : function(){
this.persons.reverse()
//reverse重写了，从而可以检测到数组内部的变化
}
}
})
</script>会出来一个效果是点击按钮后，前面的文字发生顺序变化，可是输入框并没有变化，跟我们实际上想要的不符。
这里的一个解决办法是：
在v-for后面接一个key值（独一无二的值）。 上面例子添加了v-bind:key = "item.id" 。id的变化导致不是同一个div，所以会进行重新渲染。
5.v-text ： 等网页加载出来才会显示，否则不会显示
v-text 产生的原因：我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。
<span>{{ message }}</span>=<span v-text="message"></span><br/>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
html : "<h1>hello</h1>",
message : "liu"
}
})
</script>
6.v-html ： 输出信息，不输出标签，把标签转换为标签效果
产生原因：如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。
双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。
双大括号上述把输出数据的一个默认行为变成只输出一个字符串.好处：防止跨域脚本攻击。防止用户随意更改html页面的dom。
坏处：v-html 可能会引起黑客的xss攻击，尽量少使用，尤其是用户提交表单之类的操作。
<div id ="app">
<div v-html = "html"></div>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
html : "<h1>hello</h1>",
message : "liu"
}
})
</script>7. v-on ： 监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
v-on简单写法：@ ， 例如：
<button @click="jianfen">减分</button>v-on可以绑定事件，click，keyup等等。既然有了事件绑定，为了修饰事件而产生了事件修饰符。
<div id="app">
<p>事件修饰符：修饰事件</p>
<p>.stop阻止默认冒泡，会出来一次alert</p>
<div v-on:click = "showsome(1,$event)">
<button v-on:click.stop = "showsome(233,$event)">click me!!!</button>
<!-- . 后面就是写一些事件修饰符的一些你想做的东西, -->
</div>
<P>.prevent阻止默认事件,不会跳转到百度网页</P>
<a href="http://www.baidu.com" v-on:click.prevent>link me!!!</a>
</div>
<script type="text/javascript">
new Vue({
el : "#app",
methods : {
showsome : function(msg,event){
console.log(msg)
alert("show somethings")
}
}
})
</script>注意：：文本框的数字会默认转变成字符串，故可以用parseInt()函数进行整数转换。
你也可以根据键值表来定义键盘事件：
8.v-model：双向数据绑定
<div id="app">
<p>v-model简化写双向数据绑定(会覆盖原本value值)</p>
<!-- 这样子写的话,JS中的methods就不需要了，可以删除 -->
<input type="text" v-model = "value" value="test">
<p>v-model修饰符之.trim(去除首尾空格)</p>
<input type="text" v-model.trim = "value">
<p>.number 一直变为数值型</p>
{{ typeof age }}
{{ age }}
<input type="text" v-model = "age">
<input type="text" v-model.number = "age">
<!-- 操作方法：一开始显示类型为number，在第一个input输入东西，就会变成string。而在第二个输入东西，还是number。
-->
<p>.lazy 在失去焦点的时候进行改变</p>
{{ age }}
<input type="text" v-model.lazy = "age">
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
value : "liuluwei",
age : 27,
},
methods : {
//事件的作用：改变html模板，从而改变JS里面的代码
//
input : function(event){
this.value = event.target.value;
}
}
})
</script>9.v-bind：处理HTML中的标签属性
缩写： : ，例子
<div :class="className">1、绑定classA</div>
v-bind 和 v-on 结合使用其实就是 v-model
<div id="app">
{{ value }}
<input type="text" v-bind:value = "value" v-on:input = "input">
<!-- v-bind把JS里面的一个数据输出到DOM节点上面去
v-on DOM节点发生改变，操作DOM节点，改变JS中的数据.
这就是一个双向的数据绑定。
-->
</div>
<script type="text/javascript">
new Vue({
el : "#app",
data : {
value : "liuluwei",
age : 27,
},
methods : {
//事件的作用：改变html模板，从而改变JS里面的代码
//
input : function(event){
this.value = event.target.value;
}
}
})
</script>10.v-pre & v-cloak & v-once
v-pre : 在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
<div v-pre>{{message}}</div>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>