zoukankan      html  css  js  c++  java
  • vue相关

    一、mvvm
    model:基本的业务逻辑
    view:页面视图
    viewModel:接口提供两个东西:动作和数据,将model和view两者联系在一起。

    优点:
    1.降低耦合,视图(view)和数据(model)可以独立开来;
    2.可重用性,把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑;
    3.独立开发,业务逻辑、数据和页面设计独立专注开发;
    方便测试,测试可以针对ViewModel来测试;

    核心:
    MVVM是将“数据双向绑定”的思想作为核心,因此在View和Model之间没有联系,通过ViewModel进行交互,而且Model和ViewModel之间的交互是双向的,因此view的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应到View上。

    mvvm在vue中的体现:
    组件内双向绑定的实现:
    父组件:
    <div>
    <input type="text" v-model="value">
    <children :val="value"></children>
    </div>
    data:{
    value:''
    }

    子组件:
    <input type="text" :value="val" @input="handlerInput">

    props:["val"]
    handlerInput(e){
    this.$emit("input",e.target.value)
    }

    二、vue有哪些指令:
    v-for、v-show、v-html 、v-if

    三、监控某个属性的变化:
    1.深度监控,监测所有属性的变化
    watch:{
    obj:{
    handler(newVal,oldVal){

    },
    deep:true
    }
    }

    2.监测某个属性的变化:
    watch:{
    'obj.a':{
    handler(newVal,oldVal){

    }
    }
    }

    3.
    computed:{
    a1(){
    return this.obj.a;
    }
    }

    4.watch与computed的区别?


    四、vue中怎样动态添加属性:
    <button @click="addObjB"></button>
    data:{
    obj:{
    a:''
    }
    }

    methods:{
    addObjB(){
    this.$set(this.obj,'b',111)
    }
    }
    $set()方法相当于手动的去把obj.b处理成一个响应式的属性,此时视图也会跟着改变了

    五、delete与Vue.delete区别
    var a=[1,2,3,4]
    var b=[1,2,3,4]
    delete a[1]
    console.log(a) //[1,empty,3,4]
    this.$delete(b,1)
    console.log(b) //[1,3,4] 直接删除,改变了数组的键值

  • 相关阅读:
    vue中的Data为什么必须是一个函数
    单页面应用的优缺点
    数组去重
    mvvm框架
    前端计算精确度问题处理JS
    shell 修改json配置。
    ubuntu 两个文件夹合并
    fdisk、df与du的区别
    新买移动磁盘,使用前需要什么操作?
    Springboot+MybatisPlust+ControllerAdvice ;Mybatis_Plus多数据源,controller统一异常返回
  • 原文地址:https://www.cnblogs.com/annie211/p/12489965.html
Copyright © 2011-2022 走看看