指令是特殊的带有前缀的表达式

v-if

export

{{ msg }}

source

<div id="app">
	<span v-if="state">
		{{ msg }}
	</span>
</div>
var app = new Vue({
  el: '#app',
  data: {
	state : true,
	msg: 'hello Vue.js'
  }
});
这里 v-if 指令将根据表达式 state 的值来判断是否修改 msg 的数据
只有表达式为真时,下面的数据才会绑定

v-bind : 参数

<div id="app">
	<span v-bind:class="cls">
		{{ content }}
	</span>
</div>

var app = new Vue({
  el: '#app',
  data: {
	cls : "show",
	content: 'hello Vue.js'
  }
});

output

<div id="app">
	<span class="show">
		hello Vue.js
	</span>
</div>
这里 class 是参数,它告诉 v-bind 指令将元素的 class 特性跟表达式 cls 的值绑定

v-on 事件监听

<div id="app" v-on:click="tips">
	<span v-bind:class="cls">
		{{ content }}
	</span>
</div>

var app = new Vue({
  el: '#app',
  data: {
	cls : "show",
	content: 'hello Vue.js'
  },
  methods : {
  	//声明 v-on 中绑定的事件
  	tips : function(){
  		alert("click 事件绑定");
  	}
  }
});
v-on 可以给元素绑定事件, click 是事件名称, tips 是触发事件时执行的方法,该事件需要在实例化时构造好.

缩写

// 完整语法
<a v-bind:href="url"></a>

// 缩写
<a :href="url"></a>
// 完整语法
<a v-on:click="doSomething"></a>

// 缩写
<a @click="doSomething"></a>

v-text

指输出文本内容的指令
<div id="app">
	<span v-text="message"></span>
	等价
	<span>{{ message }}</span>
</div>
var app = new Vue({
  el: '#app',
  data: {
	message: 'hello Vue.js'
  }
});

v-html

指输出一段 html 标签, 该指令容易收到 xss 攻击,谨慎使用
<div id="app">
	<div v-html="innerHtml"></div>
</div>
var app = new Vue({
  el: '#app',
  data: {
	innerHtml: '<p>hello vue.js</p>'
  }
});

v-cloak

该指令没有表达式,设置该指令可以使元素在编译完前的花括号不会显示出来
<div id="app" v-cloak>
	{{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
	message: 'hello vue.js'
  }
});