v-cloak 指令,v-once 指令,v-pre 指令,事件修饰符,v-model原理 ,自定义指令，二级联动

一.内置指令

1.v-cloak 指令：

1.没有值

2.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性

3.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

 使用方法：

[v-cloak]{
            display: none;
        }

解决屏幕闪烁的问题，第一在标签上添加v-cloak,第二需要设置上面样式

2.v-once 指令

 v-once设置了以后，更改值不会发生改变，优化性能 

<title>v-once指令</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <h2 v-once>初始化的n值是: {{n}}</h2>
  <h2>当前的n值是: {{n}}</h2>
  <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  new Vue({ el: '#root', data: {n:1} })
</script>

3.v-pre 指令

好处：

1.跳过v-pre所在节点的编译过程
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

3.设置了以后，会让插值和指令失效

二.重点：不需要设置值的指令

以下：

v-else,v-cloak,v-once，v-pre

三.事件修饰符

        .prevent 阻止浏览器默认事件

        .stop阻止冒泡事件

        .once只触发一次

        .capture捕获模式    打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，

        先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发

        .self 阻止自身事件促发，但不会阻止冒泡，间接性有捕获效果

        在冒泡事件中，点击设置了self的子类，才不会触发自身

        点击设置了self本身是可以触发的-

例如：

.box1{
            width: 300px;
            height: 300px;
            border: 5px solid red;
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 5px solid pink;
        }
        .box3{
            width: 100px;
            height: 100px;
            display: inline-block;
            border: 5px solid orange;
        }

 <div id="app">
       
        <!-- 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>
</div>

<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                
            }
        },
        methods: {
           
            func1(){
                console.log(1111111111111111111);
            },
            func2(){
                console.log("div元素");
            },
            func3(){
                // console.log(event);
                // event.stopPropagation();
                console.log("p元素");
            },
            func4(){
                console.log("span元素");
            }
        },
    })

如图示：

四.v-model原理

1.v-model修饰符

        .lazy 失去焦点后提交值

        .number有效转换"1"== 1 为数字

        .trim清除前后空格-

例如：

<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>
    </div>

script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                formData:{
                    userName:"",
                    age:0,
                    ages:0,
                    sex:"",
                    iphone:"",
                    like:[],
                    other:"",
                    others:"",

                }
            }
        },
        methods: {
            func(){
                console.log(typeof this.formData.age);
                console.log(typeof this.formData.ages);
                console.log(this.formData.age+this.formData.ages);
                console.log(this.formData);
            },
        },
    })
</script>

2.v-model是什么

 1.双向数据绑定，既可以从data流向页面，也可以由页面流向data

 2.通常用于表单收集，v-model默认绑定value值

  3.v-model:value=""或v-model=""(简写)

3.v-model原理

1.v-model本质是一个语法糖

2.v-bind绑定数据

3.oninput数据传递

五.自定义指令

1.规则：定义指令名称不能使用驼峰和v-，要是用-连接，记得添加引号

        // 使用时要v-自定义名称

        // 函数写法

        // 名称(节点,绑定对象){}

        // 对象写法

        // 名称:{

            // 绑定成功调用

            // bind(节点,绑定对象){},

            // 插入到页面调用

            // inserted(节点,绑定对象){},

            // 重新解析时调用(值发生改变)

            // update(节点,绑定对象){}

        // }

 2.局部自定义指令

        //directives ,写入Vue实例中

        // .全局自定义指令

        // Vue.directive ,定义在实例化之前

代码如下：

<body>
    <div id="app">
        <button @click="func()">点击</button>
        <h1 v-nums="sum"></h1>
        <h1 v-nums-ing="sums"></h1>
        <h1 v-num1="sum1"></h1>
        <h1 v-num2="sum2"></h1>
    </div>
</body>

<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    Vue.directive("num2",function(element,binding){
        element.innerHTML = binding.value;
    })
    Vue.directive("num1",{
        bind(element,binding){
            // console.log(element);
            // console.log(binding);
        },
        inserted(element,binding){
            // console.log(element);
            // console.log(binding);
            element.innerHTML = binding.value;
            binding.value = binding.value;
        },
        update(element,binding){
            // console.log(element);
            // console.log(binding);
            element.innerHTML = binding.value+binding.oldValue;
            binding.value = binding.oldValue;
            // element.innerHTML = binding.value;
        }
    })
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                sum:0,
                sums:1,
                sum1:0,
                sum2:1,
            }
        },
        directives:{
            "nums-ing"(element,binding){
                // console.log(element);
                // console.log(binding);
                element.innerHTML = binding.value+100;
            },
            "nums":{
                bind(element,binding){
                    // console.log(element);
                    // console.log(binding);
                },
                inserted(element,binding){
                    // console.log(element);
                    // console.log(binding);
                    element.innerHTML = binding.value+100;
                    binding.value = binding.value+100;
                },
                update(element,binding){
                    // console.log(element);
                    // console.log(binding);
                    element.innerHTML = binding.value+binding.oldValue;
                    binding.value = binding.oldValue;
                }
            }
        },
        methods: {
            func(){
                this.sum++;
                this.sums++;
                this.sum1 += 2;
                if(this.sum2%2==1){
                    this.sum2 += 2;
                }else{
                    this.sum2 += 1;
                }
            }
        },
    })
</script>

六.二级联动和computed计算属性

<div id="app">
        <input type="text" v-model="a">
        <input type="text" v-model="b">
        <!-- 1.使用插值做计算 -->
        <!-- <h1>{{a-b}}</h1> -->
        <!-- <h1>{{a}}-{{b}}</h1> -->
        <!-- 2.methods操作计算 -->
        <!-- <h1>{{func()}}</h1> -->
        <h1>{{fullDate}}</h1>
        <input type="checkbox" v-model="fullDate">
        <input type="text" v-model="fullName">
        <input type="text" v-model="fullNames">
        <hr>
        <!-- 2级联动 -->
        <select name="" id="" v-model="num">
            <option v-for="(item,index) of arr" :value="index" :key="index+item">{{item}}</option>
            <!-- <option value="0">江西</option>
            <option value="1">湖南</option>
            <option value="2">广东</option> -->
        </select>
        <!-- <button @click="func1()">点击</button> -->
        <select name="" id="">
            <option v-for="(item,index) of arrs[num]" :key="item+index" value="index">{{item}}</option>
        </select>
    </div>

<script src="../vue.js"></script>
<script>
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                a:0,
                b:0,
                // num:"1",
                arr:["江西","湖南","广东"],
                arrs:[
                    ["南昌","吉安","抚州","赣州"],
                    ["长沙","株洲","怀化","岳阳"],
                    ["广州","深圳","佛山","潮汕"]
                ]
            }
        },
        computed:{
            num:{
                get(){
                    console.log("触发了get");
                    return 2;
                },
                set(value){
                    console.log(value);
                    console.log(this.num);
                    // this.num = value;
                    console.log("触发了set");
                }
            },
            fullDate:{
                get(){
                    // console.log("触发了get");
                    // return this.a-this.b;
                    return true;
                },
                set(value){
                    console.log(value);
                    console.log("触发了set");
                }
            },
            fullNames:{
                get(){
                    // console.log("触发了get");
                    // return this.a-this.b;
                    return 199;
                },
                set(value){
                    console.log(value);
                    console.log("触发了set");
                }
            },
            fullName(){
                // console.log("简写的计算方法触发了");
                return 99;
            }
        },
        directives:{

        },
        methods: {
            func(){
                // return this.a-this.b;
                return this.a+"-"+this.b
            },
            // func1(){
            //     this.num="2";
            // }
        },
    })
    // let obj = {
    //     name:"张三",
    //     age:18,
    //     sex:"男"
    // }
    // obj.sclNum = 202201;
    // obj["a"] = 110;
    // Object.defineProperty(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);
    // Vue的MVVM模型，数据代理
    // MVVM与MVC区别
    // 1.VM(vue)==C(调服务)
    // 2.MVVM双向(双向绑定，数据代理)，MVC单向(直接操作DOM)
    // 3.MVVM(虚拟DOM)更快渲染,MVC单向(真实DOM)
</script>