Vue笔记四

一、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()"