vue指令的基本使用

vue指令

1、v-text

<div id="app">
	<h2 v-text="message"></h2><!--覆盖标签内的所有内容-->
	<h2 v-text="message + '我是一个初学者！'"></h2><!--覆盖拼接-->
	
	<h2>{{ message }}</h2><!--直接输出，不需要v-text指令-->
	
	<h2>{{ message }}我是一个初学者！</h2><!--拼接写法-->
	<h2>{{ message + '我是一个初学者！'}}</h2><!--拼接写法-->
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			message:"你好，Vue！"
		}
	})
</script>

2、v-html

<div id="app">
	<p v-html="content"></p><!-- 等同于v-text -->
	<p v-html="content2"></p><!-- 解析html内容 -->
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			content:"你好，Vue！",
			content2:"<a href='www.baidu.com'></a>"
		}
	})
</script>

3、v-on

<div id="app">
	<input type="button" v-on:click="click()"><!-- 绑定点击事件 -->
	<input type="button" @click="click(3)"><!-- 绑定点击事件并传参 -->
	
	<input type="button" v-on:monseenter="monseenter()"><!-- 绑定鼠标移入事件 -->
	<input type="button" @monseenter="monseenter()"><!-- 绑定鼠标移入事件 -->
	
	<input type="button" v-on:dbclick="dbclick()"><!-- 绑定鼠标双击事件 -->
	<input type="button" @dbclick="dbclick()"><!-- 绑定鼠标双击事件 -->

	<input type="button" @keyup="keyup()"><!-- 键盘输入事件 -->
	<input type="button" @keyup.enter="keyup()"><!-- 键盘输入回车事件 -->
	
	<!-- 其他事件同理 -->
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			content:"你好，Vue！",
			content2:"<a href='www.baidu.com'></a>"
		},
		methods:{
			click(int){
				this.content = '你好，Vue，我已经学习'+int+'天了' //修改data中的值，页面同步渲染
			},
			monseenter(){
				alert('鼠标移入事件触发')
			},
			dbclick(){
				alert('鼠标双击事件触发')
			}
		}
	})
</script>

4、v-show

<div id="app">
	<p v-show="true">{{ content }}</p><!--标签显示 -->
	<p v-show="is_show_true">{{ content }}</p><!--标签显示 -->
	
	<p v-show="is_show_false" v-html="content2"></p><!-- 标签隐藏 -->
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			content:"你好，Vue！",
			content2:"<a href='www.baidu.com'></a>",
			is_show_true:true,
			is_show_false:false
		}
	})
</script>

5、v-if

<div id="app">
	<p v-if="is_show_true">{{ content }}</p><!--标签显示 -->
	<p v-else="is_show_false">{{ content }}</p><!-- 标签隐藏 -->
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			content:"你好，Vue！",
			is_show_true:true,
			is_show_false:false
		}
	})
</script>

6、v-bind

<div id="app">
	<img v-bind:src="imgsrc"> <!-- 给标签的属性赋值 -->
	<img :src="imgsrc" :title="title"><!-- 给标签的属性赋值 简写 -->
	<img :class="{clas:is_show}"><!-- 以对象的形式给标签的class赋值 is_show为true，class的值为active，否则值为'' -->
	<!-- 其他属性同理 -->
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			imgsrc:"图片地址",
			title:"这是一张图片",
			clas:"active",
			is_show:true
		}
	})
</script>

7、v-for

<div id="app">
	<ul>
		<li v-for="(item,index) in arr">{{index}}:{{item}}</li><!-- item:数组每一项的值  index:数组索引 -->
	</ul>
	<ul>
		<li v-for="(item,index) in obj">{{index}}:{{item.name}}</li><!-- 对象的循环渲染 -->
	</ul>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			arr:[1,2,3,4,5],
			obj:[
				{name:'张三'},
				{name:'李四'}
			]
		}
	})
</script>

8、v-model

<div id="app">
	<input type="text" v-model="value"> <!-- 数据双向绑定 -->
	<div>{{value}}</div>
</div>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			value:'123123'
		}
	})
</script>