1，v-model

【双向数据绑定】

v-model是进行动态双向数据绑定的（只能用在input, textarea, select上），以input为例，进行绑定后，vue对象中data的相应值会与input的输入同步变动。

// HTML
<input type="text" v-model="message">
new Vue({
	data {
		message: ' ', //最开始message为空
	} 
})

如果我们在input的输入框输入“打游戏”，则在data中message属性的值也会变为“打游戏”

<input type="text" v-model="message">  / /在input中输入：打游戏

data {
	message: '今天好困 ',   // 此时message中数据自动更新为"打游戏"
}

2，v-bind（缩写为 : ）

【动态绑定多个特性或组件（用于绑定数据和元素属性】

通常来说，当我们需要给一个标签赋值时，可以直接给href属性赋上相应的地址即可，但是这样，往往会导致代码不灵活。为了使得标签的一些属性可以动态的改变，我们可以在这些标签加上v-bind属性。
当data中url属性改变后，相应的，标签的href值也会改变。

<a v-bind:href="url">网络测试</a>  //v-bind绑定href。
new Vue({
	...
	data {
		url: "http://www.baidu.com"
		}
})

类似的，对于其他标签，我们可以将标签中的属性值与vue对象中data相应的值绑定。如下列代码中的，class属性绑定isPlaying，src属性绑定picUrl

<div class="player_con" :class="{playing:isPlaying}">
    <img src="images/player_bar.png" class="play_bar" />
    <img :src="picUrl" class="cover autoRotate" />
</div>
new Vue({
	...
	data {
		isPlaying: true,
		picUrl:"www.xxx.com"
		}
})

3，v-on（缩写为@）

【事件监听】
v-on属性绑定是HTML事件
例如：

<!-- 完整语法 -->
<a v-on:click="doSomething(tmp)">123</a>

<!-- 缩写 -->
<a @click="doSomething(tmp)">123</a>

new Vue({
	...
	methods:{
	doSomething(tmp){
	}
}
})

v-model、v-bind、v-on的总结

总结来说，v-model用来进行data数据与页面数据的双向绑定。即数据对数据绑定。v-bind是data数据对页面标签中属性的绑定，即属性对数据绑定。v-on，是methods对页面事件的绑定，即事件对接口（methods）的绑定

4，v-show

【根据条件展示元素】
主要是通过display来控制元素的显示和隐藏的。

5， v-if

【条件渲染控制是否显示隐藏】
通过创建和删除元素来控制元素的显示和隐藏

    值：true----显示，false----隐藏

    可以和v-else-if、v-else连用

v-if和v-show的区别：

1、v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁地切换，则使用v-show，如果在运行时条件很少改变，则使用v-if
2、使用场景：
频繁切换的时候用v-show，例如选项卡
登录与非登录页面，vip与非vip，权限页面用v-if
3、v-for不能和v-if一起使用，v-for的优先级更高，v-for和v-show一起使用

6， v-for

【列表渲染】
遍历数组、对象、字符串、数字
语法：v-for="(item,index) in 需要遍历的数据"

7， v-text

作用：用来渲染数据和执行一些js语法
底层是innerText
简写：{{}}
v-test在加载的时候，如果vue.js还未加载进来，页面不会出现{{}}，而使用简写方式就会出现{{}}。

8，v-html

    作用：用来渲染数据和执行一些js语句
    可以用来解析html标签
    简写：{{{}}}    仅限于vue1.0，所以不用了

9，v-cloak

    防止vue.js没有加载进来的时候，页面显示{{}}

10， v-once

    只渲染一次数据