通过标签引入vue.js文件，让我们来开始了解Vue的基础语法吧！
<script src="vue.js"></script>
除了差值表达式以外，Vue的指令是都在html标签的属性处定义。
v-text v-html
这两个指令用来控制标签在页面的显示数据，v-text会为标签按字符串的形式赋值，v-html则会将其中的字符串按html的标准解析出来。
<script>
var app = new Vue({
el:"#app",
data:{
//插入一个标签元素，对比两个指令的不同
message: "<a href='http://www.baidu.com'>xuan</a>"
}
})
</script>
<div id="app">
<h2 v-text="message + '!'">lel</h2>
<h2 v-html="message"></h2>
<h2>{{message}}</h2>
</div>
输出结果如下：
有两点需要注意：
1.访问Vue对象的方式有两种：在指令中可以直接通过变量名访问到；指令外使用差值表达式{{}}；
2.可以对拿到的数据进行二次操作。
v-on
v-on主要是为标签绑定一个具体的事件，在JavaScript中的写法是onclick、onchange等等，这个on便是取自于此。
<script>
var app = new Vue({
el:"#app",
methods: {
doIt:function(){
console.log("做IT");
}
},
})
</script>
<div id="app">
<input type="button" value="v-on指令" v-on:click="doIt()">
<input type="button" value="v-on指令简化" @click="doIt()">
</div>
当点击button时，就会进行doIt()的调用，v-on: 也可以简写成@。利用v-on，我们就可以实现一个简单的MVVM模式：
<script>
var app = new Vue({
el:"#app",
data:{
value:0
},
methods: {
subscribe:function(){
if(this.value === 0){
alert('到底啦.')
} else {
this.value--;
}
},
add:function(){
if(this.value === 10){
alert('最多啦.')
} else {
this.value++;
}
}
},
})
</script>
<div id="app">
<input type="button" value="-" @click="subscribe()">
<span v-text="value"></span>
<input type="button" value="+" @click="add()">
</div>
我们通过点击+ 、 -两个按钮就可以轻松控制中间value的值并显示在页面上：
MVVM理解
不妨来试想一下，没有vue之前我们是怎么做到的：
<div>
<input type="button" value="-" onclick="subscribe()">
<span id="v1">0</span>
<input type="button" value="+" onclick="add()">
</div>
<script> function subscribe() { var spanElement = document.getElementById("v1"); var value = spanElement.innerText; if(value == 0){ alert('到底啦.') } else { value--; } spanElement.innerText = value; }; function add(){ var spanElement = document.getElementById("v1"); var value = spanElement.innerText; if(value == 10){ alert('最多啦.') } else { value++; } spanElement.innerText = value; }</script>
我们通过DOM拿取到标签的值，进行操作之后，再手动的为标签设置值。这就是Vue MVVM模式的高明之处，它替我们完成了较繁琐的数据同步功能，使编码人员只需要关注具体的业务处理即可。
v-show v-if
两个指令都是用来控制页面标签元素的显示状态，可以动态的隐藏或展示标签：
<script> var app = new Vue({ el:"#app", data:{ food:"cake", isShow:true, age:18 }, methods: { //ES6定义函数 change(){ this.isShow = !this.isShow; } }, })</script>
<div id="app"> <H2 v-show="isShow" >show-{{food}}</H2> <H2 v-show="age>=18" >show-{{food}}</H2> <H2 v-if="isShow" >if-{{food}}</H2> <H2 v-if="age>=18" >if-{{food}}</H2> <!-- function不需要加()也能调用 --> <input type="button" value="修改" @click="change"></div>
看一下调式台的结果就能明白二者的区别：
v-show是将元素的display属性设置为none，该元素还存在，只是不显示；v-if是直接不加载当前元素。
考虑到Dom树的操作比较耗费性能，如果需要频繁切换建议使用v-show。
v-bind
v-bind是为html标签动态设置属性的值，v-bind:可以简写为:。
分别为src、class属性赋值：
<div id="app"> <!-- 两种写法的不同 --> <img v-bind:src="imgSrc" :class="isActive?'active':''" @click="change"> <img v-bind:src="imgSrc" :class="{active:isActive}" @click="change"> <!-- 简写形式 --> <img :src="imgSrc" :class="isActive?'active':''" @click="change"> </div>
为isActive设置一个样式:
<style> .active{ border: 4px solid red; }</style>
<script> var app = new Vue({ el:"#app", data:{ imgSrc:"demo1.png", isActive:true }, methods: { change:function(){ this.isActive = !this.isActive; } }, })</script>
点击事件触发后，class属性获得一个isActive值，进行边框加粗：
轮播图实现
利用v-show、v-bind可以实现一个简单的轮播图：
<div id="app"> <img :src="imgArr[index]"> <input type="button" @click="next" value="next" v-show="index < imgArr.length - 1"> <input type="button" @click="prev" value="prev" v-show="index != 0"> </div>
<script> var app = new Vue({ el:"#app", data:{ imgArr:['demo1.png','demo2.png','demo3.png','demo4.png'], index:0 }, methods: { prev:function(){ this.index--; }, next:function(){ this.index++; } }, })</script>
仔细感受一下图是怎么通过改变数组变化的，在Vue中，一切的界面动态都是对数据的操作。
v-for
见名知意，对数据进行循环遍历，需要我们先定义一个数组：
<script> var app = new Vue({ el:"#app", data:{ vegetables:[ {name:"xixi"}, {name:"heihei"} ] } })</script>
此处定义了一个对象数组，这也是日后前后端开发时必会的获取规则。
对于JavaScript对象和数组概念模糊，可以参考：JavaScript数据结构
<div id="app"> <ul > <li v-for="(item,i) in vegetables"> {{i+1}}:<p>{{item.name}}</p> </li> </ul></div>
item表示数组中的一个元素，i则是当前元素在数组中的下标。
v-model
v-model是双向数据绑定最淋漓尽致的体现，用于在input标签中使用：
<script> var app = new Vue({ el:"#app", data:{ message:"请你输入:" }, methods: { }, }); function aaa(){ alert('aaa') } </script>
<div id="app"> <input type="text" v-model="message"> <div>{{message}}</div> </div>
当我们在input中输入值的时候，下面的div不需要任何触发事件就会同步显示，这样可以更直观的看到双向数据绑定的现象。
作用域问题
在上面的案例中定义一个JavaScript函数，调用情况如下：
<!-- 找不到方法，不会进行函数调用 --><input type="button" v-model="message" @click="aaa()"> <!-- 正常显示与调用 --><input type="button" v-model="message" onclick="aaa()">
使用Vue的指令会使其在Vue对象的作用域内查找，我们定义的函数是在Vue之外，自然也就看不到了。
