[JavaScript知识库]Vue：vue中的指令

内容渲染指令

内容渲染指令就是渲染内容的，有三种内容渲染指令：
v-text
v-text和原生js中的innerText一样，不会解析标签，且会覆盖原来的内容

<template>
	# 最后输出结果为Vue
	<div v-text="msg">hello</div>
</template>

<script>
	export default{
		data(){
			return {
				msg:'Vue'
			}
		}
	}
</script>

v-html
v-html和原生js中的innerHTML一样，可以解析标签，且也会覆盖原来的内容

<template>
	# 最后输出结果为加粗后的Vue
	<div v-html="msg">hello</div>
</template>

<script>
	export default{
		data(){
			return {
				msg:'<strong>Vue</strong>'
			}
		}
	}
</script>

{{}}差值表达式
{{}}差值表达式用起来更灵活些，不会覆盖原来的内容，可以放在标签间的任意位置，但是不能使用在属性中，不能解析标签

<template>
	# 最后输出结果为Hello Vue
	<div>Hello {{msg}}</div>
</template>

<script>
	export default{
		data(){
			return {
				msg:'Vue'
			}
		}
	}
</script>

插值表达式不能使用在标签的属性中，如下示例：

<input type="text" value="{{xxx}} " />

属性绑定指令

vue中通过v-bind:指令可以动态为属性绑定值

<template>
	<div>
		# value属性的val就不再表示字符串val，而指向data中的val数据
		# 如果value前不加v-bind:，则表示单纯的值为字符串val
		<input type="text" v-bind:value="val" />
	</div>
</template>

<script>
	export default{
		data(){
			return {
				val:'小米笔记本'
			}
		}
	}
</script>

v-bind:属性=值 可以简写为 :属性=值，如下示例：

<input type="text" :value="val" />

v-bind:属于单向绑定，data数据驱动视图，也就是当data中的数据发生改变时，页面中的数据会跟着改变，但是当页面数据改变时，不会影响到data中的数据

事件绑定指令

语法：v-on:事件类型 = 事件处理函数

<template>
	<div>
		# 事件处理函数定义在js中的methods节点下
		<button v-on:click="change" v-on:mouseenter="move">按钮</button>
	</div>
</template>

<script>
	export default{
		methods:{
			change(){
				alert('按钮被触发了')
			},
			move(){
				console.log('鼠标移入了')
			}
		}
	}
</script>

v-on:事件类型 = 事件处理函数 可以简写为 @事件类型 = 事件处理函数，如下示例：

<button @click="change" @mouseenter="move">按钮</button>

每个vue组件都相当于是new Vue的实例对象，在组件中，this指向当前组件，而通过data、methods所添加的数据或方法，都会被放到当前实例对象中，可以通过this.的方式获取到

<template>
	<div>
		# 事件处理函数定义在js中的methods节点下
		<button v-on:click="change" v-on:mouseenter="move">按钮</button>
	</div>
</template>

<script>
	export default{
		methods:{
			change(){
				alert('按钮被触发了')
				this.move() # 通过this.的方式可以调用move方法
			},
			move(){
				console.log('鼠标移入了')
				console.log(this.info) # 通过this.的方式可以使用info的数据
			}
		},
		data(){
			return {
				info:'今年是2022年'
			}
		}
	}
</script>

给事件处理函数传参
传参分三种情况，不传参、传参，传参了如何使用事件对象

<template>
	<div>
		# 第一种：不传参数，直接写函数名即可
		<button @click="change">按钮</button>
		# 第二种；传入参数，函数名加()，()内写实参即可
		<button @click="change(10,20)">按钮</button>
		# 第三种；传入参数，且需要用到事件对象，函数名加()，()内写实参和$event
		# $event是固定写法，表示事件对象
		<button @click="change(10,20,$event)">按钮</button>
	</div>
</template>

<script>
	export default{
		methods:{
			# 因为不用传参，这时候传递一个e(自定义形参)默认就是事件对象
			change(e){
				console.log(e.taregt)
			}
			# 当传递了参数时，默认第一个参数就不是事件对象了
			change(x,y){
				console.log(x + y)
			}
			# 有几个形参传递几个实参，最后再写上一个e（自定义形参），表示接收$event事件对象
			change(x,y,e){
				console.log(x + y)
				console.log(e.target)
			}
		}
	}
</script>

事件修饰符

使用事件修饰符可以阻止默认行为、阻止冒泡
.prevent 阻止默认行为
.stop 阻止冒泡
语法：@事件类型.事件修饰符.事件修饰符… = 事件处理函数

<template>
	<div>
		<a href="" @click.prevent.stop="fn"></a>
	</div>
</template>

键盘事件修饰符

见名知意，键盘事件修饰符只对键盘事件生效，详情如下的先代码注释：

<template>
	<div>
		# 表示按下回车键才会触发fun函数
		<input type="text" @keyup.enter="fun"/>
		# 表示按下esc键才会触发clear函数
		<input type="text" @keyup.esc="clear"/>
	</div>
</template>

注意：如果事件修饰符用的是数字，@键盘事件.1=“函数名称”，该数字1表示的是键盘的keyCode值，不是数字1

双向绑定指令

双向绑定指令，就是当页面的数据改变时，data中的数据也会改变，反之当data中的数据改变时，页面中的数据也会改变，实现了一个双向绑定的效果
双向绑定语法：v-model = “xxx”

<template>
	<div>
		# 双向绑定实现了实时监测数据是否发生改变的效果
		<input type="text" v-model="msg" />
	</div>
</template>

<script>
	export default{
		data(){
			return {
				msg:'华为荣耀Pro'
			}
		}
	}
</script>

双向绑定的修饰符
双向绑定的修饰符只针对于双向绑定v-model
.lazy 不会再当input内的值每发生一次改变，就更新一次数据，而是当input输入框失去焦点后，更新一次数据，也就是不会再实时监测
.trim 去除内容两边的空白
.number 只允许填写数字

<input type="text" v-model.lazy="msg" />

v-model双向绑定一般用于表单，比如input、button、textarea、select等