Vue知识加深———el与data的写法，MVVM模型，数据代理

KiCCZha

于 2024-03-15 11:32:27 发布

阅读量460

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/KiCCZha/article/details/136680257

版权

本文详细介绍了Vue中el属性和data的不同写法，强调了使用函数式数据的重要性。还对比了v-if和v-show在显示/隐藏元素上的区别，讨论了事件修饰符的作用，并解析了v-model的双向绑定机制以及Vue的MVVM模型与MVC的区别。此外，还涉及了自定义指令的定义和使用。

摘要由CSDN通过智能技术生成

1.el与data的两种写法

1.el有两种写法

a.创建Vue实例对象的时候配置el属性

b.先创建Vue实例，随后再通过vm.$mount(#root")指定el的值。

2.data有两种写法

a.对象式：data： {}

b.函数式：data（）{return{}}

如何选择：目前哪种写法都可以，以后找到组件时，data必须使用函数，否则会报错

一个重要的原则

由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了。

2.v-if和v-show区别

1.相同的：都可以进行显示隐藏。

2.不同点：v-if存在或不存在，v-show展示或不展示。

3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗多次的显示隐藏推荐使用v-show。

<div id="app" style="height: 2000px;">
        <h1 v-cloak>{{x}}</h1>
        <div v-for="(item,index) of arr" :key="index+item">{{item}}</div>
        <div v-for="(item,index) of obj" :key="index+item">{{item}}</div>
        <div v-for="(item,index) of arrays" :key="index+item+a">
            <!-- {{item}} -->
            <div v-if="Array.isArray(item)">
                <h1 v-for="(items,index) of item" :key="index+items">
                    {{items}}
                </h1>
            </div>
            <h1 v-else style="color:red">
                {{item}}
            </h1>
        </div>
        <!-- v-if判断|显示隐藏 -->
        <h1 v-if="b">11111</h1>
        <h1 v-if="c">22222</h1>
        <!-- v-if和v-show区别
        1.相同的：都可以进行显示隐藏
        2.不同点：v-if存在或不存在，v-show展示或不展示
        3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗
        多次的显示隐藏推荐使用v-show
         -->
         <!-- v-if和v-for优先级和使用事项
        在vue2中v-for比v-if优先级高
        在vue3中v-if比v-for优先级高
        v-if和v-for在vue2或vue3中都不要同时使用，
        如果需要使用在外层先使用判断，在进行循环 -->
        <h1 v-show="d">33333</h1>
        <h1 v-show="e">44444</h1>
        <h1 v-show="arr.length>0">555555</h1>

3.事件修饰符

1.prevent阻止浏览器默认行为

2 .stop阻止冒泡事件

3.once只能触发一次

4.capture捕获模式，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）

5.self阻止自身事件促发，但不会阻止冒泡,(间接有捕获模式)给元素设置self后，点击当前设置的自身元素会触发点击设置self的子类，会跳过设置了self的元素

6. <!-- event.stopPropagation();阻止冒泡事件

<div id="app">
        <!-- 事件修饰符
        .prevent阻止浏览器默认行为
        .stop阻止冒泡事件
        .once只能触发一次
        .capture捕获模式 ，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发
        打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，
        先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）
        .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>

4.v-model是什么

1.双向数据绑定，既可以拿取data的数据，也可以写入数据

2.v-model本身是一个语法糖，一般用于表单收集

3.v-model自动绑定表单value值 v-model=""

5.v-model原理

1.使用v-bind绑定数据

2.使用oninput传递数据 -->

<div id="app">
        <!-- v-model是什么
        1.双向数据绑定，既可以拿取data的数据，也可以写入数据
        2.v-model本身是一个语法糖，一般用于表单收集
        3.v-model自动绑定表单value值 v-model=""
        v-model原理
        1.使用v-bind绑定数据
        2.使用oninput传递数据 -->
        <!-- vue.js devtools扩展工具 -->
        <div>
            <input type="text" :value="val" @input="func()">
            {{val}}
            <input type="submit" @click="fun1()">
        </div>
        <hr>
        <button @click="myfunc1()">点击</button>
        <h1 v-nums="sum"></h1>
    </div>

6. Vue的MVVM模型，数据代理

MVVM与MVC区别

1.VM(vue)==C(调服务)

2.MVVM双向(双向绑定，数据代理)，MVC单向(直接操作DOM)

3.MVVM(虚拟DOM)更快渲染,MVC单向(真实DOM)

var obj = {
        name:"张三",
        age:18,
        sex:"男"
    }
    obj.sclNum = 202201;
    obj["a"] = 100;
    let numbers = 99;
    Object.defineProperty(obj,"b",{
        // value:99,
        // enumerable:true,
        // writable:true,
        // configurable:true,
        get(){
            console.log("访问了");
            return numbers;
        },
        set(value){
            console.log("修改了");
            numbers = value;
        }
    })
    console.log(obj.b);
    obj.b = 100;
    console.log(obj);

    // Vue的MVVM模型，数据代理
    // MVVM与MVC区别
    // 1.VM(vue)==C(调服务)
    // 2.MVVM双向(双向绑定，数据代理)，MVC单向(直接操作DOM)
    // 3.MVVM(虚拟DOM)更快渲染,MVC单向(真实DOM)
    // ---------------------
    // 自定义指令
    // 规则：1.定义指令名称时不要使用v-和驼峰，需要使用-连接，需要加引号
    // 2.使用时需要v-
    // 3.对象式
    // "指令名":{
    //     绑定成功触发
    //     bind(元素,绑定对象){},
    //     插入页面触发
    //     inserted(元素,绑定对象){},
    //     元素解析触发(值改变)
    //     update(元素,绑定对象){}
    // }
    // 4.函数式
    // "指令名"(元素,绑定对象){}
    // 1.局部自定指令
    // directives,需要定义在Vue实例中
    // 2.全局自定义指令
    // directive,需要定义在Vue实例之前
    Vue.config.productionTip = false;
    Vue.directive("num2",function(element,binding){
        // console.log(this);
        element.innerHTML = binding.value+98;
    })
    Vue.directive("num1",{
        bind(element,binding){
            // console.log(element);
            // console.log(binding);
            // element.innerHTML = binding.value;
        },
        inserted(element,binding){
            // console.log(element);
            // console.log(binding);
            element.innerHTML = binding.value+99;
            binding.value = binding.value+99;
        },
        update(element,binding){
            // console.log(element);
            // console.log(binding);
            element.innerHTML = binding.value+binding.oldValue;
            binding.value = binding.oldValue;
        }
    })
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                sum:0,
                sum1:1,
                sum2:0,
                sum3:1,
            }
        },
        directives:{
            "num-ing"(element,binding){
                element.innerHTML = binding.value+200;
            },
            num:{
                bind(element,binding){
                    // console.log(element);
                    // console.log(binding);
                    // element.innerHTML = binding.value;
                },
                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.sum1++;
                this.sum2+=2;
                if(this.sum3%2==1){
                    console.log(11111111111);
                    this.sum3+=1;
                }else{
                    console.log(2222222222);
                    this.sum3+=2;
                }
            }
        },
    })