Vue常用指令

vue声明式渲染：
采用模板语法来声明式的将数据渲染进Dom

<div id="app">
	<h1>{{msg}}<h1>
</div>
new Vue({
	el:"#app",
	data:{
		msg:"hello Vue",
	}
});
//渲染结果会将h1中的文本渲染成hello Vue

指令：
v-bind指令（简写为“:”）：用于给标签设置属性

基本用法

<div id="#app">
	<p v-bind:id="id"></p>
</div>
//此时p标签的id名就为myid

多类名用法

<div id="#app">
	<p v-bind:class="[class1,class2]"></p>
</div>
//此时p标签的类名就为c1 c2

判断类

<div id="#app">
	<p v-bind:class="{class1:isClass1}"></p>
</div>
//isClass1为true，则有class1类，如果为false，则没有class1类
//多个类判断用“,”号隔开写即可

//还可以直接绑定数据里的某个对象
<div id="#app">
	<p v-bind:class="checkClass"></p>
</div>

上述vue实例

 new Vue({
    	el:"#app",
    	data:{
    		id:"myid",
    		class1:"c1",
    		class2:"c2",
    		isClass1:true,
    		checkClass:function(){
    		return {
    			"class1":isClass1,
    			"class2":isClass2,
    		};
    		}
    	}
  });

v-if指令：用于判断

<div id="app">
	<h1 v-if="flag"></h1>
</div>
new Vue({
	el:"#app",
	data:{
		flag:true,
	}
});
//如果flag为true,h1才会显示，否则将隐藏

v-for指令：用于循环遍历渲染数据

<div id="app">
	<ul>
		<li v-for="item in res">{{item.name}}</li>
	</ul>
</div>
new Vue({
	el:"#app",
	data:{
		res:[
			{name:"zhangsan"},
			{name:"lisi"},
			{name:"wangwu"}
		]
	}
});

v-on 指令（可简写为“@”）：添加一个事件监听器

<div id="app">
	<button v-on:click="alert">v-on指令</button>
</div>
new Vue({
	el:"#app",
	data:{
		//数据
	},
	methods:{
		alert:function(){
			console.log("hello vue");
		}
	}
});
//点击button后触发点击事件，控制台输出hello vue

v-model 指令：表单输入和应用状态之间的双向绑定（理解：牵一发而动全身）

<div id="app">
	<input type="text" v-model="inpData">
	<p>{{inpData}}</p>
</div>
new Vue({
	el:"#app",
	data:{
		inpData:"hello vue",
	}
});
//此时在文本框中编辑内容，p标签中的内容会随之改变