内容渲染指令
内容渲染指令就是渲染内容的,有三种内容渲染指令:
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等