代码部份请下载本文代码浏览，代码均能一般运转并有细致的解释。
概述
无需置疑，Vue之所以能云云之火，重要受益于它是一个MVVM框架和它易学的文档，险些一切以为进修Vue有难度的开发者都是以为组件脚手架等等不太好明白，然则这些都不是Vue的中心，Vue的中心表如今最易学的Vue指令和绑定，学好Vue指令和绑定基本就学好Vue的一大半了，把基本中心的几个学问点说完会做几个完全的demo。
进修要领
进修编程切勿眼高手低，遇到简朴的如Vue指令相似的学问万万不要疏忽掉，最好能把指令熟记于心，关于新手更是如许，如许在解说庞杂学问点的时刻就不必再重述这些简朴的学问点了，当你关于简朴学问点烂熟于心的时刻，你的注意力会集合在少数几个最难的学问点上，更轻易学好，所以读者最好能对着下面的代码和官方文档把这些指令多明白多影象，再进修背面的文章。
Vue指令的官方文档
Vue指令大杂烩
<style>
[cloak] {
display: none;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="demo">
<!-- 插值就是把{{}}中的值当作一个变量，然后再用vue实例data中对应的变量值替代它 -->
插值用法: {{demo1}} <hr>
<!-- v-text指令 的功用和{{}}的功用如出一辙，只是为了方便把这个指令零丁拿出来用{{}}示意 -->
v-text用法: <span v-text = "demo2"></span> <hr>
<!-- v-html 类式 v-text， 只是把这个变量字符串取出来衬着成了对应的html，而不是直接展现字符串 -->
v-html用法: <span v-html = "demo3"></span> <hr>
<!-- v-show对应变量的值应该是true或false,假如为true则自动跟他增加display：block，不然增加display：none ,你只须要修正对应变量的值就可以够掌握元素显现隐蔽-->
v-show用法：<span v-show = "demo4">这是v-show内容，v-show的值掌握这个元素显现隐蔽</span> <hr>
<!-- v-if和v-show的用法类式，v-if的值s是true直接增加到dom元素，不然从dom商remove掉，而不是修正display属性，如许操纵比较斲丧机能，如无必要请运用v-show -->
v-if用法： <span v-if = "demo5">这是v-if的内容</span><hr>
<!-- v-else 必需跟v-if团结运用，就像js中的else也必需跟if一同运用一样，假如v-if元素的内容显现，则v-else元素remove掉，反之v-if元素remove掉，v-else元素增加到dom上 -->
v-else用法： <span v-if = "demo6">这是v-if的内容</span> <span v-else >这是v-else的内容</span> <hr>
<!-- v-else-if 必需跟v-if团结运用，假如v-if的值为和v-else-if的值都为false则显现v-else-if元素的内容,请参考js中的if、else if、else明白 -->
v-else-if用法：<span v-if = "demo71">这是v-if的内容</span> <span v-else-if = "demo72" >这是v-else-if的内容</span> <span v-else> 这是v-else内容</span><hr>
<!-- v-for 和js中的for in轮回很相似，有了v-for你能够轻松复制多个当前元素，有以下几种写法，前面两种是for轮回数组的，后两种是轮回json的，都有待index项和不带的 -->
<!-- <div v-for = "item in items"> -->
<!-- <div v-for="(item, index) in items"> -->
<!-- </div> <div v-for="(val, key) in object"></div> -->
<!-- <div v-for="(val, key, index) in object"></div> -->
v-for用法1： <span v-for="(item, index) in items1">{{"这是第"+index + "个" + ":" + item}}</span> <br>
v-for用法2： <span v-for="(value,key,index) in items2" >{{"key:" +key + "|" +"value:" + value + "|" + "index:" + index + " " }}</span> <hr>
<!-- v-on 是绑定事宜的要领，v-on:click="clickMethod"是c点击事宜，它能够简写成@click ,它的值是methods中的要领 -->
v-on用法： <input type="text" name="name" v-on:keyup= "keyupEvent" style="border:solid 1px red;" /><hr>
<!-- v-bind 背面接的是html标签所带的属性，比方v-bind:value 能够省略为:value ，v-bind是单向数据绑定，意义是你转变了vue实例data中的数据，页面dom中的值就会变化，反之不成立 -->
v-bind用法：<input v-bind:value="demo8" style="border:solid 1px red;" /> <input :value="demo8" style="border:solid 1px red;" /><span>转变input的值并不能修正vue实例中的值，所以另一个input不会修正</span><hr>
<!-- v-model 和 v-bind 相似，v-model是双向数据绑定， 然则当dom转变的时刻vue实例data中的数据也会转变，所以叫双向数据绑定 -->
v-model用法： <input v-model:value="demo9" style="border:solid 1px red;" /> <input v-model:value="demo9" style="border:solid 1px red;" /><span>转变input的值能修正vue实例中的值，所以另一个input会修正,这叫双向数据绑定</span><hr>
<!-- 和html中的pre标签相似,{{item}}这类插值就会当作字符串处置惩罚，并不会剖析成变量 -->
v-pre用法：<span v-pre> {{demo10}}</span><hr>
<!-- 因为vue编译衬着须要时候，在vue编译完之前，{{item}}还是以字符串的情势表现出来的，v-cloak 合营[v-cloak]{display:none} 能够让元素在vue编译前先隐蔽 -->
v-cloak用法：<span v-cloak>{{demo11}}</span> | <span>{{demo11}}</span><hr>
<!-- v-once 指令示意此元素只衬着一次，当data中的数据值转变的时刻这个元素不会再转变衬着 -->
v-once用法：
<span v-once>{{demo12}}</span>
</div>
<script>
//new 一个vue实例，Vue就可以运转了,Vue要领传入参数为一个商定花样的json
new Vue({
//el示意这个vue实例的作用局限为id为demo的元素内
el:"#demo",
//data的值是一个json，存储的都是要显现到页面上的值，能够明白成这里放的都是js变量(数据)
data:{
//插值用法
demo1:"这是demo1",
//v-text用法：
demo2:"这是demo2",
//v-html用法
demo3:"<span style='color:red'>这是v-html字符串，它是一个span</span>",
//v-show用法：
demo4:true,
//v-if用法：
demo5:true,
//v-else用法：
demo6:false,
//v-else-if用法：
demo71:false,
demo72:true,
//v-for用法：
items1:["item1","itme2","item3"],
items2:{key1:"value1",key2:"value2",kay3:"value3"},
//v-bind用法：
demo8:"这是demo8",
//v-model用法：
demo9:"这是demo9",
//v-pre用法：
demo10:"这是demo10",
//v-cloak用法：
demo11:"这是demo11"
//v-once用法：
demo12:"这是deom12"
},
methods:{
//v-on用法：
keyupEvent:function() {
console.log("keyup被促发了");
}
},
});
</script>
