一、v-text和v-html,插值 区别
1.相同点:v-text和v-html都会覆盖原本内容。
2.不同点:v-text文本,v-html标签
3.插值会进行拼接
示例:
<div v-text="txt">aaaaaaaa</div>
<div v-html="txt">bbbbbbbb</div>
二、v-once只加载一次,静态内容,因为不会修改值所以优化了性能
<button @click="func3()">点击</button>
<h1 v-once>{{num}}</h1>
<h1>{{num}}</h1>
三、v-pre可以跳过插值或指令不加载
<h1 v-pre v-show="b">{{num}}</h1>
四、v-bind:单向数据绑定,由data流行页面
v-model双向数据绑定,由data流向页面或页面(用户输入)流向data
<input type="text" :value="nums">
<input type="text" v-model="nums">
<button @click="func5()">点击</button>
五、事件修饰符
1、.prevent阻止浏览器默认行为
2、.stop阻止冒泡事件
3、.once只能触发一次
4、.capture捕获模式 ,先触发带有该修饰符的元素,多个该修饰符,则由外而内触发打乱冒泡顺序(即可以理解为给元素添加一个监听器,当元素发生冒泡时,
先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。)
5、.self阻止自身事件促发,但不会阻止冒泡,(间接有捕获模式) 给元素设置self后,点击当前设置的自身元素会触发,点击设置self的子类,会跳过设置了self的元素。
event.stopPropagation();阻止冒泡事件
<a href="" @click.prevent="func1()">链接</a>
<div @click.self="func2()" class="box1">
我是div
<p @click.self="func3()" class="box2">
我是p
<span @click="func4()" class="box3">我是span</span>
</p>
</div>
methods: {
func1(){
console.log(111111111111111);
},
func2(){
console.log("div元素");
},
func3(){
// console.log(event);
// event.stopPropagation();
console.log("p元素");
},
func4(){
console.log("span元素");
}
},
六、v-model修饰符
1、v-model.lazy失去焦点后提交数据(data)
<input type="tel" v-model.lazy="dataList.iphone">
2、v-model.number可以将字符串转换为有效数字 “1”==1
注:通常使用v-model绑定表单v-model=“”,
v-model:value=“” 需要设置默认值
<input type="number" v-model.number="dataList.age">
3、v.model.trim清除前后空格
<input type="text" v-model.trim="dataList.userName">
七、v-model是什么
1.双向数据绑定,既可以拿取data的数据,也可以写入数据
2.v-model本身是一个语法糖,一般用于表单收集
3.v-model自动绑定表单value值 v-model=“”
v-model原理
1.使用v-bind绑定数据
2.使用oninput传递数据
<input type="text" :value="val" @input="func()"