Vue.js学习总结——Vue指令

最新推荐文章于 2024-05-24 10:20:23 发布

soEzLife

最新推荐文章于 2024-05-24 10:20:23 发布

阅读量295

点赞数

分类专栏：学习总结 Vue.js 文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_41591033/article/details/103894018

版权

学习总结同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

Vue.js

2 篇文章 0 订阅

订阅专栏

1. Vue实例

<div id="app">
	{{message}}
</div>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello,Vue'
		}
	})
</script>

1.1 el（挂载点）

el是用来设置Vue实例挂载（管理）的元素
Vue会管理el选项命中的元素机器内部的后代元素
可以使用其他的选择器，但建议使用ID选择器
可以使用其他的双标签，不能使用HTML和Body
使用app.$mount(’#app’)，也可以实现挂载

<div id="app">
	{{ msg }}
</div>

<script>
	var vue = new Vue({
		data: {
			msg: 10
		}
	})

	vue.$mount('#app');
</script>

1.2 data（数据对象）

<div id="app">
	<p>{{message.name}}</P>
	<p>{{message.age}}</P>
	<p>{{message.gender}}</P>
</div>

<script>
	var app = new Vue({
		el:	'#app',
		data: {
			message: {
				name: '小明',
				age: 18,
				gender: 'male'
			}
		}
	})
</script>

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守JS的语法即可

2. Vue指令

2.1 v-text

<div id="app">
	<p v-text="message"></p>
	<p v-text="message">!!</p>
	<p>{{message}}!!</p>
	<p v-text="'Hello,' + message + '!'"></p>
	<p>{{'Hello,' + message + '!'}}</p>
</div>

<script>
	var app = new Vue({
		el:	'#app',
		data: {
			message: 'Vue'
		}
	})
</script>

结果为:
在这里插入图片描述

v-text指令的作用是：设置标签的内容
默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
内部支持写表达式

2.2 v-html

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

<script>
	var app = new Vue({
		el: '#app',
		data: {
			message: '<a href="#">Hello,Vue!</a>'
		}
	})
</script>

在这里插入图片描述

v-html指令的作用是：设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无法解析html标签
解析文本使用v-text，解析html用v-html

2.3 v-on

<div id="app">
	<input type="button" value="单击v-on" v-on:click="doIt">
	<input type="button" value="双击v-on简写" @dblclick="doIt2">
	<h1>{{message}}</h1>
</div>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			message:"v-on"
		},
		methods:{
			doIt:function(){
				this.message = '嘿嘿嘿';
			},
			doIt2:function(){
				this.message = 'v-on';
			}
		} 
	})
</script>

v-on指令的作用是：为元素绑定事件
事件名不需要写on
指令可简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

2.3.1 v-on补充

	<div id="app">
		<button type="button" @click="doIt('嘿嘿嘿', $event)">点我</button>
		<input type="text" @keyup.enter="sayHi"></input>
	</div>
	
	<script>
		var app = new Vue({
			el: '#app',
			methods: {
				doIt: function(a, e) {
					alert(a);
					console.log(e.target);
				},
				sayHi: function(e) {
					alert("你好");
					console.log(e);
				}
			}
		})
	</script>

事件绑定的方法写成函数调用的形式，可以传入自定义参数
若不传入参数，则默认传递事件参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
如.enter可以限制触发的按键为回车键
传递参数$event，则可获得事件参数

2.4 v-show

<div id="app">
	<button type="button" @click="hide">显示/隐藏</button>
	<h1 v-show="isShow">{{message}}</h1>
</div>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			isShow: true,
			message: '嘿嘿嘿'
		},
		methods: {
			hide: function(){
				this.isShow = !this.isShow;
			}
		}
	})
</script>

v-show指令的作用是：根据真假切换元素的显示状态
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新

2.5 v-if

v-if指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
频繁的切换使用v-show，反之用v-if，前者的切换消耗小

2.5.1 v-else

	<style>
		.red {
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.blue {
			width: 100px;
			height: 100px;
			background-color: blue;		
		}
	</style>
	<body>
		<div id=app>
			<div class="red" v-if="isShow"></div>
			<div class="blue" v-else></div>
			<button @click="hide">点我</button>
		</div>
		
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					isShow:true
				},
				methods: {
					hide: function() {
						this.isShow = !this.isShow;
					}
				}
			})
		</script>
	</body>

v-else可与v-if搭配，中间不能插入别的标签
v-else显示时，v-if隐藏，反之亦然

2.5.2 v-else-if

-相当于

if() {

}else if(){

}else{

}

2.6 v-bind

<style>
	.active {
		border: 10px solid red;
	}
</style>
<body>
	<div id=app>
		<img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="toggleAtive"><!-- 三目运算符 -->
		<img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="toggleAtive"><!-- 对象 -->
	</div>
	
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				imgSrc: "./img/timg.gif",
				imgTitle: "螺旋丸",
				isActive: false
			},
			methods: {
				toggleAtive: function(){
					this.isActive = !this.isActive;
				}
			}
		})
	</script>
</body>

v-bind指令的作用是：为元素绑定属性
完整写法是v-bind:属性名
简写可直接省略v-bind，:属性名
本身的属性依然存在，但同名属性会被v-bind覆盖
同时绑定多个同名属性，会以第一个为准
同时绑定多个属性值，可用数组方式
动态的增删class可采用三元表达式和对象的方式（推荐）
添加style可以使用对象的方式

<style>
	.red {
		background-color: red;
	}
			
	.size {
		width: 100px;
		height: 100px;
	}
</style>
<body>
	<div id="app">
		<div :class="[class1, class2]"></div>
		<div :class="class1" :class="class2"></div>
	</div>
	
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				class1: 'red',
				class2: 'size'
			}
		})
	</script>
</body>

结果为
在这里插入图片描述

2.7 v-for

	<div id="app">
		<ul>
			<li v-for="(item, index) in arr">
				索引： {{ index }} 内容：{{ item }}
			</li>
		</ul>
		<p v-for="(item, index) in student">
			{{index+1 + item.name + '：' + item.age}}
		</p>
	</div>
	
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				arr:[1, 2, 3, 4],
				student:[
					{name: "小明",age: 18},
					{name: "小刘",age: 19}
				]
			}
		})
	</script>

在这里插入图片描述

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是(item, index) in 数据
item和index可以结合其他指令一起使用

<div id="app">
	<ul>
		<li v-for="item in arr"> {{ item }} </li>
	</ul>
	<button type="button" @click="deleteArr">delete</button>
	<button type="button" @click="changeArr">change</button>
</div>

<script type="text/javascript">
	var vue = new Vue({
		el: '#app',
		data: {
			arr: [1, 2, 3, 4]
		},
		methods: {
			deleteArr: function() {
				this.arr.length --;//通过更改长度的方式更改数组
			},
			changeArr: function() {
				this.arr[0] = 10;//通过索引的方式去更改数组
			}
		}
	})
</script>

在这里插入图片描述
通过上面示例可以看出，尽管通过这两种方式将数组更改，但并不会渲染页面

更改数组时，需注意
- 不能通过索引的方式去更改数组，这样不会渲染页面
- 不能通过更改长度的方式更改数组，这样不会渲染页面
- 应通过数组变异方法（pop, shift, unshift, sort, splice, reverse, push）更改数组

<div id="app">
	<ul>
		<li v-for="item in obj"> {{ item }} </li>
	</ul>
	<button type="button" @click="add">click</button>

</div>

<script type="text/javascript">
	var vue = new Vue({
		el: '#app',
		data: {
			obj: {
				name: 'xiaoming',
				age: 18
			}
		},
		methods: {
			add: function() {
				this.obj.gender = 'male';
			}
		}
	})
</script>

在这里插入图片描述
通过上面示例可以看出，直接添加对象的属性也不会渲染页面

更改对象时，需注意
- 使用.$set()添加属性
  - 三个参数分别为修改的对象，属性名，属性值
  - vue.$set(this.obj, ‘gender’, ‘male’);
- 使用.$delete删除属性
  - 参数分别为修改的对象，属性名
  - vue.$delete(this.obj, ‘gender’);

<div id="app">
	<ul>
		<li v-for="item in obj"> {{ item }} </li>
	</ul>
	<button type="button" @click="add">click</button>

</div>

<script type="text/javascript">
	var vue = new Vue({
		el: '#app',
		data: {
			obj: {
				name: 'xiaoming',
				age: 18
			}
		},
		methods: {
			add: function() {
				vue.$set(this.obj, 'gender', 'male');
			}
		}
	})
</script>

2.8 v-model

<div id="app">
	<input type="text" v-model="message" @keyup.enter="showMessage">
	<p>{{ message }}</P>
	<button @click="changeM">改变message的值</button>
</div>

<script>
	var app = new Vue({
		el: '#app',
		data: {
			message: '嘿嘿嘿'
		},
		methods: {
			showMessage: function() {
				alert(this.message);
			},
			changeM: function() {
				this.message = '嘻嘻嘻';
			}
		}
	})
</script>