Vue-核心

Vue-核心

事件修饰符

    .prevent 阻止浏览器默认事件
    .stop阻止冒泡事件
    .once只触发一次 
    .capture捕获模式    打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，
    先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发
    .self 阻止自身事件促发，但不会阻止冒泡，间接性有捕获效果
    在冒泡事件中，点击设置了self的子类，才不会触发自身
    点击设置了self本身是可以触发的
    event.stopPropagation()阻止冒泡

 <a href="" @click.prevent="func1()">链接</a>
        <div @click.self="func2()" class="box1">
            1
            <p @click.self.once="func3()" class="box2">
                2
                <span @click="func4()" class="box3">3</span>
            </p>
        </div>

v-model修饰符

.lazy 失去焦点后提交值
.number有效转换"1"== 1 为数字
.trim清除前后空格
注：使用v-model时尽量使用v-model=“” 不要使用v-model:value=“”,只有在需要设置初始值才使用v-model:value=“”。

 <form action="" method=""  @click.prevent="func()">
            注：使用v-model时尽量使用v-model="" 不要使用v-model:value="",
            只有在需要设置初始值才使用v-model:value=""
            姓名：<input type="text" v-model.trim="formData.userName">
            <!-- 姓名：<input type="text" v-model.trim:value="formData.userName"> -->

            <br>
            <!-- 年龄：<input type="number" v-model:value="formData.age"> -->
            <!-- v-model.number有效转换"1"== 1 为数字 -->
            年龄：<input type="number" v-model="formData.age">
            年龄：<input type="number" v-model.number="formData.ages">
            <br>
            性别：
            <label for="nan">男</label>
            <input type="radio" id="nan" name="1" v-model="formData.sex" value="1">
            <label for="nv">女</label>
            <input type="radio" id="nv" name="1" v-model="formData.sex" value="2">
            <br>
            手机号：
            <input type="tel" v-model:value="formData.iphone">
            <br>
            爱好：
            <label for="sing">唱</label>
            <input type="checkbox" id="sing" v-model="formData.like" value="sing">
            <label for="junp" >跳</label>
            <input type="checkbox" id="junp" v-model="formData.like" value="junp">
            <label for="rap">rap</label>
            <input type="checkbox" id="rap" v-model="formData.like" value="rap">
            <label for="bask">篮球</label>
            <input type="checkbox" id="bask" v-model="formData.like" value="bask">
            <br>
            <!-- v-model.lazy 失去焦点后提交值 -->
            <textarea v-model.lazy="formData.other" name="" id="" cols="30" rows="10"></textarea>
            <textarea v-model="formData.others" name="" id="" cols="30" rows="10"></textarea>
            {{formData.other}}
            {{formData.others}}
            <br>
            <input type="submit" value="提交">
            <!-- <button>确定</button> -->
        </form>

v-model是什么

1.双向数据绑定，既可以从data流向页面，也可以由页面流向data
2.通常用于表单收集，v-model默认绑定value值
3.v-model:value=““或v-model=””(简写)

v-model原理

1.v-model本质是一个语法糖
2.v-bind绑定数据
3.oninput数据传递

测试双向数据绑定原理

e和event区别
1.定义函数()，接收时e,当为形参
2.e自身某个事件带有的方法，event是window带有的
3.e = window.event;兼容

div>
            <input type="text" :value="val" @input="func1()">
            <h1>{{val}}</h1>
            <button @click="func2()">按钮</button>
        </div>
        <div>
            <h1 v-nums="sum"></h1>
            <button @click="sum++">点击</button>
        </div>
        <input type="text" v-model="a">
    </div>
    methods: {
     
            func1(){
                // console.log(window);
                // console.log(window.event);
                // console.log(event);
                // console.log(e);
                // console.log(event.target);
                this.val = event.target.value;
            },
            func2(){
                // console.log(e);
                console.log(event);
            }
        },
    })

自定义指令

规则：定义指令名称不能使用驼峰和v-，要是用-连接，记得添加引号
使用时要v-自定义名称
函数写法
名称(节点,绑定对象){}
对象写法
名称:{
绑定成功调用
bind(节点,绑定对象){},
插入到页面调用
inserted(节点,绑定对象){},
重新解析时调用(值发生改变)
update(节点,绑定对象){}
}
1.局部自定义指令
directives ,写入Vue实例中
2.全局自定义指令
Vue.directive ,定义在实例化之前

directives局部自定义指令语法

bind成功绑定时调用
inserted成功插入页面调用
update重新解析时(改变)调用

 directives:{
            "nums":{
                // bind成功绑定时调用
                bind(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value*10;
                    binding.value = binding.value*10;
                    console.log("----------------");
                },
                // inserted成功插入页面调用
                inserted(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value*100;
                    binding.value = binding.value*100;
                    console.log("----------------");
                },
                // update重新解析时(改变)调用
                update(element,binding){
                    console.log(element);
                    console.log(binding);
                    element.innerText = binding.value+binding.oldValue;
                    binding.value = binding.oldValue;
                    console.log("----------------");
                }
            }
        },

使用插值做计算

{{a-b}}

{{a}}-{{b}}

methods操作计算

{{func()}}

<input type="text" v-model="a">
        <input type="text" v-model="b">
        <h1>{{func()}}</h1>
        <h1>{{fullDate}}</h1>
        <input type="checkbox" v-model="fullDate">
        <input type="text" v-model="fullName">
        <input type="text" v-model="fullNames">

Vue的MVVM模型，数据代理

Object.defineProperty（数据代理）

>  // let obj = {
>     //     name:"张三",
>     //     age:18,
>     //     sex:"男"
>     // }
>     // obj.sclNum = 202201;
>     // obj["a"] = 110;
>     //  (obj,"b",{
>     //     // value:10,
>     //     // enumerable:true,
>     //     // writable:true,
>     //     // configurable:true,
>     //     get(){
>     //         console.log("触发了get方法");
>     //         return 10;
>     //     },
>     //     set(value){
>     //         console.log(value);
>     //         console.log("触发了set方法");
>     //     }
>     // });
>     // console.log(obj.b);
>     // obj.b = 20;
>     // console.log(obj);

MVVM与MVC区别

1.VM(vue)==C(调服务)
2.MVVM双向(双向绑定，数据代理)，MVC单向(直接操作DOM)
3.MVVM(虚拟DOM)更快渲染,MVC单向(真实DOM)