Vue的基本指令总结

v-text

用于输出文本

<div id="app">
		<p v-text="msg"></p>
		</div>

var vm = new Vue({
				el:"#app",
				data:{
					msg:'测试'
				}
			})

p标签里的内容替换为测试

v-html

用于输出 html 代码

<div id="app">
		<p v-html="message"></p>
		</div>

var vm = new Vue({
				el:"#app",
				data:{
					message:"<h1>测试</h1>"
				}
			})

v-bind

用于绑定属性

var vm = new Vue({
				el:"#app",
				data:{
					message:"asd"
				}
			})

绑定p为title，鼠标移动到123上时会显示asd

<p v-bind:title="message">123</p>
<p v-bind:title="message+123">123</p>  //可以拼接上字符串，会显示asd123

绑定p为class，p的类名会变成asd，可以做出对应样式的更改

<p v-bind:class="age">123</p>

简写方式

<p :class="age">123</p>

v-on

用于 绑定事件

		<button v-on:click="show">展示</button>
		<button @click="show">展示</button>          //简写方式

点击按钮，弹出弹框

			var vm = new Vue({
				el:"#app",
			methods:{
				show:function(){
					alert("hello");     //弹出弹框语句
				}
			}	
			})

事件修饰符

• .once 事件仅触发一次
• .stop 阻止冒泡，调用 event.stopPropagation()
• .capture 添加事件侦听器时使用事件捕获模式
• .prevent 阻止默认事件，调用 event.preventDefault()
• .self 当事件在该元素本身时触发时触发回调

v-model

实现数据的双向绑定(只能运用在表单元素当中)

表单元素：

<div id="app">
			<p>{{msg}}</p>
			<input type="text" v-model="msg"/>
		</div>

var vm = new Vue({
				el:"#app",
				data:{
					msg:"123"
				}
			})

p标签里的数据和input输入框里的数据双向绑定，一起改变。

v-for

循环普通数组

打印内容

<div id="app">
			<p v-for="item in list">{{item}}</p>
		</div>

打印内容和索引值

<div id="app">
			<p v-for="(item,i) in list">索引值{{i}}-----每一项内容{{item}}</p>
		</div>

	var vm = new Vue({
				el:"#app",
				data:{
					list:[1,2,3,4,5,6,7]
				}
			})

循环对象数组

<div id="app">
			<p v-for="user in list">{{user.id}}-----{{user.name}}</p>
		</div>

var vm = new Vue({
				el:"#app",
				data:{
					list:[
						{id:1,name:'aaa'},
						{id:2,name:'bbb'},
						{id:3,name:'ccc'},
					]
				}
			})

循环对象

<div id="app">
			<p v-for="(val,key) in user">值是{{val}}-----键是{{key}}</p>
		</div>

var vm = new Vue({
				el:"#app",
				data:{
						user : {
							id:1,
							name:'aaa',
							gender:'男'
					}
				}
			})

循环数字

<div id="app">
			<p v-for="(val,key) in user">值是{{val}}-----键是{{key}}</p>
		</div>

循环从1开始

v-if

显示与隐藏（直接把元素删除或重新创建元素）
性能消耗较高，频繁切换不使用

<div id="app">
<p v-if="isShow">v-if</p>         <!-- 删除p -->
</div>

var app=new Vue({
				el:"#app",
				data:{
					isShow:false,
				}
		}）

v-show

是否显示元素（若为否会隐藏元素，相当于display：none；）

<div id="app">
		<p v-show="isShow">v-show</p>     <!-- 改变CSS样式隐藏p -->
</div>

var app=new Vue({
				el:"#app",
				data:{
					isShow:false,
				}
		}）

v-pre

标签里的内容不被解析

<div id="app">
		<h1 v-pre>{{msg}}</h1>
		</div>

结果显示{{msg}}