Vue指令---总

Vue指令—总

vue.js的指令是带有特殊前缀"v-"的HTML特性，它绑定一个表达式，并将一些特殊应用到DOM上。

1. v-cloak

v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和css的display:none;配合使用，可以解决插值表达式的闪烁的问题：在vue.js没有加载之前，页面会显示{ {msg}}，知道vue.js加载完毕之后才会显示真正数据。

<div id="app" v-cloak>
	{
  {message}}
</div>
<script>
	var app = new Vue({
    
		el:'#app',
		data:{
    
			message:'这是一段文本'
		}
	})
</script>

这时虽然已经加了指令v-cloak，但是其实没有起到任何作用，当网速较慢、Vue.js文件还没加载完时，在页面上会显示{ {message}}的字样，知道Vue创建实例、编译模版时，DOM才会被替换，所以这个过程屏幕是有闪动的。只要加一句css就可以解决这个问题了：

[v-clock]{
   
	display:none;
}

在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很使用，但是在具有工程化的项目里，比如后面学习webpack和vue-router时，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不需要v-cloak。

2. v-text/v-html

v-text 是将数据当成普通文本替换整个标签的内容。

<div id="app1" style="background:green;" v-text="text">
	v-text替换前
</div>
<script>

	var app = new Vue({
    
		el:'#app1',
		data:{
    
		text:'<a href="http://www.baidu.com">百度一下</a>'
		}
	})
</script>

v-html 是将数据当成网页替换整个标签的内容。

<div id="app2" style="background:yellow;" v-html="link">
	v-html替换前
</div>
<script>
	var app2 = new Vue({
    
		el:'#app2',
		data:{
    
			link:'<a href="http://www.baidu.com">百度一下</a>'
		}
	})
</script>

3. v-bind/v-on

v-bind的基本用途是动态更新HTML元素上的属性，比如id、class等，例如下面几个示例：

<div id="app">
	<a v-bind:href="url">链接</a>
	<img v-bind:src="imgUrl"/>
</div>
<script>
	var app = new Vue({
    
		el:"#app",
		data:{
    
			url:"http://www.baidu.com",
			imgUrl:"http://xxx.xxx.xx/imgpng"
		}
	})
</script>

示例中的链接地址与图片的地址都与数据进行了绑定，当通过各种方式改变数据时，链接和图片都会自动更新。上述渲染后的结果为：

<a href="https://www.baidu.com">链接</a>
<img src="http://xxx.xxx.xx/img.png"/>

v-on 是用来绑定事件监听器的，这样我们就可以做一些交互了，先来看下面的示例：

<div id="app">
	<p v-if="show">这是一段文本</p>
	<button v-on:click="handleCloseOrShow">点击隐藏/显示</button>
</div>
<script>
	var app = new Vue({
    
		el:"#app",
		data:{
    
			show:true
		},
		methods:{
    
			handleCloseOrShow:function(){
    
				this.show = !this.show
			}
		}

	})
</script>

在button按钮上，使用v-on:click给该元素绑定了一个点击事件在普通元素上，v-on可以监听原声的DOM事件，除了click外，还有dbclick、keyup、mosemove等。表达式可以是一个方法名，这些方法都写在Vue实例本身，因此可以直接使用this.xxx的形式来访问或修改数据，如示例中的this.show = !this.show；当数据show为true时，就把show修改为false，所以点击按钮时，文本p元素就被移除了；当数据show为false时，就把show修改为true，所以点击按钮时，文本p元素就被添加上。

下面代码会报错，因为我们给input绑定了alert方法，此时会从ViewModel实例中去找alert方法，但是我们在vm实例中没有定义这个alert方法，所以报错。

<input type="button" value="点我1" v-on:click="alert('hello')">

下面的代码不会报错，此时就是用普通的js代码绑定alert事件。

<input type="button" value="点我2" onclick="alert('hello')">

强调: 以后我们凡是看到v-on 绑定信息，都会从VM实例中去找，如果找不到就会报错。

4. 语法糖

语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。
Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写，比如v-bind，可以省略v-bind直接写一个冒号“:”。
v-on可以直接用"@"来缩写。

5. 事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，Vue.js为v-on提供了事件修饰符。在@绑定的事件后加小圆点“.”，再跟一个后缀来使用修饰符。

<!-- 阻止单击事件冒泡 -->
<a @click.stop="handle"></a>

<!-- 提交事件不再重载页面-->
<form @submit.prevent="handle"></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="handle">...</div>

<!-- 只当在event.target是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="handle">..</div>

<!-- 点击事件将只会触发一次 -->
<a @click.once="handle"></a>

在表单元素上监听键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：

<!-- 只有在keyCode是13时调用vm.submit() -->
<input @keyup.13="submit"/>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self 会阻止所有的点击，而v-on:click.self.prevent 只会阻止对元素自身的点击。

6. Vue的双向绑定

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue.js提供了v-model 指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面例子：

<div id="app">
	<input type="text" v-model="message" placeholder="请输入..."/>
	<p>输入的内容是：{
  {message}}</p>
</div>
<script type="text/javascript">
	var app = new Vue({
    
		el:"#app",
		data:{
    
			message:''
		}
	})
</script>

==在输入=输入的同时{ {message}}也会实时将内容渲染在视图中。==对与文本域textarea也是同样的用法。
使用v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在<textarea></textarea>之间插入的值，也不会生效。
使用v-model时，如果用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉子时才会触发更新。如果希望总是实时更新，可以用@input来代替v-model。 事实上v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。例如下面示例：

<div id="app">
	<input type="text" @input="handleInput" />
	<p>输入的内容是：{
  {message}}</p>
</div>
<script type="text/javascript"