VUE 基本指令 （代码）

HTML 部分

<div id="username">
	{{message}}
	<!-- v-model 绑定  响应 message-->
	<input type="text" v-model="message">
	<!-- 绑定Dom  click -->
	<button v-on:click="tabbnave">点击反转</button>
	<!--  v-html 用来 显示html -->
	<p v-html="cander"></p>
	<!-- v-text  用来显示text(文本值) 不包括 html 元素 -->
	<p v-text="cander"></p>
	<!-- v-for 遍历循环输出 Vue 中的值 -->
	<p v-for="(nav,key) in naver">
		{{"key的值为："+key+" nav的值为："+nav}}
	</p>
	<br />
	<!-- 动态响应 -->
	<input type="text"  v-model="values">
	<br />
	<!-- 绑定Dom 用来绑定 methods 中方法 并用v-model 来实现动态响应 -->
	<!-- v-on:oninput    缩写为    @input   input标签事件包括  oninput  onchange -->
	<input type="text" @input="inputnave" v-model="values">
	<br /> 
	<!-- if 动态判断 v-bink:href -->
	<!-- v-bink:href   缩写为 :href -->
	<a :href="href">点击我</a>
	<!-- v-if 判断是否 为 true (显示) -->
	<p v-if="thater">你猜我啊</p>
	<p v-show="thater">你再猜我啊</p>
	<!-- v-if v-else-if 多重判断 -->
	<p v-if="comer == 0">你好</p>
	<p v-else-if="comer == 1">你好啊</p>
	<p v-else-if="comer ==2">你好噢</p>
	<button @click="isflag()">啊哈</button>
</div>

JS 部分

<script type="text/javascript">
//注册一个全局自定义指令
Vue.directive('focus',{
	//当绑定的元素插入到DOM中
	inserted:function(el){
		//聚焦元素
		el.focus();
	}
})

var app=new Vue({
	el : '#username',
	data : {
		message : 'Hello World!',
		cander : "<span>你猜猜我在不在？</span>",
		naver : [1,2,3],
		values : "",
		href : "http://www.baidu.com/",
		thater : true,
		comer : 2,
		flag:true
	},
	methods : {
		tabbnave:function(){    //元素逆序输出
			this.message = this.message.split('').reverse().join('')
		},
		inputnave:function(){    //value值获取
			var num = event.target || event.srcElement;
			this.values = num.value;
		},
		isflag:function(){   //是否为true
			this.flag = !this.flag;
		}
	},
	//注册一个局部自定义函数
	directives : {
		change : {
			//指令的定义
			bind : function(el,bindings){
				//改变元素
				// el.change();
				console.log(el);
				console.log(bindings);

			},
			//指令的定义
			unbind : function(){
				//改变元素
				// el
				console.log("指令解除了绑定");
			}
		}
	}		 
})
</script>

Vue.js的指令是指v-开头，作用于html标签，提供一些特殊的特性，当指令被绑定到html元素的时候，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成html的一种属性。