精华内容
下载资源
问答
  • vue基本语法

    2020-03-22 23:50:32
    vue基本语法 本文将涉及以下知识点: ...vue基本语法vue基本语法vue简要含义特点mvvm模式(面试常问)双向数据绑定含义双向数据绑定原理(面试常问)Vue使用Vue模板语法(1)插值指令v-fortempla...

    vue基本语法

    本文将涉及以下知识点:

    1. vue的简要含义
    2. 模板语法
    3. 各种花里胡哨的指令
    4. watch监听
    5. conputed计算属性
    6. mixins混入
    7. component组件
    8. filter过滤器
    9. 三种数据请求方式

    目录:

    vue简要含义

    vue是渐进式JavaScript框架,用到什么功能,只需要引入什么功能模块

    特点

    易用:使用成本低

    灵活:生态系统完善,适用于各种规模的项目

    高效:体积小,优化好,性能好

    vue是mvvm的js框架

    mvvm模式(面试常问)

    分为model、view、ViewModel三部分

    双向数据绑定含义

    在ViewModel中有一个 Binder 或则 Data-binding engine 的东西,在View的模板语法中,将Viewi上显示的内容与Model的那一块数据绑定;当ViewModel对Model进行更新的时候,Binder会自动对View上的元素更新;当用户在View上进行操作的时候,Binder会自动将数据跟新到Model上

    双向数据绑定原理(面试常问)

    当你把一个普通的js对象传入到Vue实例作为data选项,Vue将遍历该对象的所有属性,并使用Object.defineProperty把这些属性全部转换为getter/setter。每一个组件都对应着一个watcher实力,当触发setter的时候,会通知watcher,使它关联的组件重新渲染

    核心代码

          var obj = {};
          let _msg = "";
          Object.defineProperty(obj, "msg", {
            get() {
              return _msg;
            },
            set(val) {
              _msg = val;
            }
          });
    

    Vue的使用

    Vue不支持IE8,因为使用了ES5中的Object.defineProperty()方法

    开发的时候使用开发版本,上线的时候使用生产版本,因为生产版本报错的时候没有返回报错信息

    注意:
    Object.defineProperty有以下缺点:

    1. 无法监听Set、Map变化
    2. 无法监听Class类型数据
    3. 属性的新加与删除无法监听
    4. 数组元素的增加和删除无法监听

    针对这些缺点,ES6 Proxy都能够解决,它的唯一缺点就是对IE不友好,Vue3在检测的时候如果使用的是IE(IE11都不支持Proxy),会自动降级为Object.defineProperty的监听系统


    Vue模板语法

    (1)插值

    1. 插入 {{}}

      {{}}里面只可以写表达式!undefined / null 不可以被渲染出来

          <div id="app">
            <p>{{msg}}</p>     					这是一条数据
            <p>{{num+1}}</p>   					45
            <p>{{bool}}</p>    					true
            <p>{{und}}</p>							无法被渲染,不占位
            <p>{{null}}</p>							无法被渲染,不占位
            <p>{{fn()}}</p>      				333
            <p>{{arr}}</p>     					[ 1, 2, 3, 4 ]
            <p>{{3>2?"大于":"小于"}}</p>  大于
          </div>
      
       let vm = new Vue({
              el: "#app",//挂载点
              data: {
                msg: "这是一条数据",
                num: 44,
                bool: true,
                und: undefined, //无法被渲染出来,
                null: null, //无法被渲染出来
                fn: function() {
                  return 333;
                }, 
                arr: [1, 2, 3, 4]
              }
            });
      
    2. 插入html v-html

          <div id="app">
            <p v-html="msg"></p>	//渲染的标签生效
          </div>
      
            let vm = new Vue({
              el: "#app",
              data: {
                msg: "<a href='#'>这是一个a标签</a>"
              }
            });
      

    指令

    ​ 是带有 v- 前缀的特殊属性

    • ​ v-bind 动态绑定属性
    • ​ v-if 动态创建/删除
    • ​ v-show 动态显示/隐藏
    • ​ v-on:click 绑定事件
    • ​ v-for 遍历
    • ​ v-model 双向绑定表单
    • ​ v-cloak 防止表达式闪烁

    在上面写v-开头的成为vue的指令,用于操作dom


    v-for

    既可以操作数组 也可以操作对象,进行遍历操作

    里面的可以用 of ,也可以用 in

    <ul>
      <li v-for="(item, index) of arr">{{index}},{{item}}</li>
    </ul>
    
    <ul>
      <li v-for="(value, key,index) of obj">{{key}},{{value}},{{index}}</li>
    </ul>
    

    一般在使用的时候,需要加:key属性,值是每一个元素唯一的标识,防止数据在被渲染的时候出现问题

    <li v-for="(item,index) in arr" :key="item.id">
      <input type="checkbox" /> {{item.name}}
    </li>
    
    template

    如果想进行多标签的循环,但是又不想增加多余的标签,可以用template

    <template v-for="i in 3">
      <div>我是div标签</div>
      <p>我是p标签</p>
    </template>
    
    数组跟新检测

    变异方法,可以改变原数组,被检测变动

    1. push() 在后边追加元素,返回数组长度
    2. pop() 从后边删除元素,返回被删除的元素
    3. unshift() 在前边添加一个元素,返回数组长度
    4. shift() 在前边删除一个元素,放回被删除的元素
    5. splice() 数组剪切、删除、插入
    6. sort() 数组的排序
    7. reserve() 数组的反转

    非变异方法,不会改变原数组,需要用新数组替换旧数组,才会更新视图

    1. slice() 截取数组,返回截取的部分
    2. concat() 拼接数组,返回拼接好的数组
    3. filter() 过滤数组,返回过滤后的数组

    ==注意:==vue不能检测以下数组的变动:

    1. 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue

      1-1. Vue.set(vm.items, indexOfItem, newValue)
      Vue.set(vm.arr, 2, 30) //如果在实例中可以通过 this.$set(vm.arr, 2, 30)
      1-2  vm.items.splice(indexOfItem, 1, newValue)
      
    2. 当你修改数组的长度时,例如:vm.items.length = newLength

    vm.items.splice(newLength)
    

    v-on

    v-on 用来绑定事件

    简写: v-on:click ===》@click

    <div id="app">
      <button v-on:click="fn1">按钮1</button>
      <button @click="fn2">按钮2</button>
      <button @click="fn3($event,1,2)">按钮3</button>
    </div>
    
    let vm = new Vue({
      el: "#app",
      methods: {
        fn1() {
          alert("你点击了按钮一");
        },
        //在标签不加括号的话,可以直接取到event参数
        fn2(event) {
          alert("你点击了按钮二"); 
          console.log(event);
        },
       //加了括号,可以添加额外参数,但是需要手动添加参数$event,才能取到event对象
        fn3(event,a,b) {
          alert("你点击了按钮三");
          console.log(event,a,b); 
        }
      }
    });
    
    事件修饰符

    修饰符可以链式调用,注意顺序不同效果可能也不同

    .stop 阻止事件冒泡
    .prevent 取消事件默认行为
    .once 只会触发一次
    .self 只会自身触发,从子代冒泡上来的事件不会触发
    .capture 采用事件捕获模式,先触发父代,再触发子代
    .passive 与prevent相反,不拦截默认事件。

    按键修饰符

    .enter
    .tab
    .delete
    .esc
    .space
    .up
    .down
    .left
    .right

    <input v-on:keyup.enter="submit">
    

    keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持

    也可以使用以下写法:

    <input v-on:keyup.13="submit">
    

    v-model

    原理(面试常问):以普通输入框为例

    1.给输入框绑定value属性

    2.绑定input事件(变量=输入框里面的值)

    v-model指令只能用在表单域(input/textarea/checkbox等)里面,不能用在例如div上面。

    在文本区域(textarea)插值 ({{text}}) 并不会生效,应用 v-model 来代替。

    • 单个复选框读取元素的checked值,绑定到字符串上(true/false)
    • 多个复选框读取元素的value值,绑定到同一个数组上
    • 单选框读取元素的value值,绑定到字符串上
    • 选择框v-model写在select上,读取option的value值,如果没有则读取元素包裹的文本
    <!-- 当选中时,`picked` 为字符串 "a" -->
    <input type="radio" v-model="picked" value="a">
    
    <!-- `toggle` 为 true 或 false -->
    <input type="checkbox" v-model="toggle">
    
    <!-- 当选中第一个选项时,`selected` 为字符串 "abc" -->
    <select v-model="selected">
      <option value="abc">ABC</option>
    </select>
    
    修饰符
    1. .lazy 默认是同步更新,如果加了.lazy修饰符,等光标离开后才会进行同步的更新。
    2. .number 这个值无法被parseFloat解析的时候,会原样返回。如果能够被解析,返回解析后的数值
    3. .trim 去掉首尾的空格

    v-bind

    绑定这个属性,绑定之后,对应的值要去vue的数据里面找。

    <div class="app">
      <a v-bind:href="url">click me</a>
    </div>  
    
    let vm = new Vue({
        el:'.app',
        data:{
            url:"https://www.baidu.com",
        }
    });
    

    class

    可以通过v-bind属性绑定来绑定class属性。

    <div id="app">
      <p class="red">这是一个p标签</p>
      <p v-bind:class="{red:isRed}">这是一个p标签</p>
      <p :class="['red',(isBig ? 'big' : '')]">这是一个p标签</p>
      <p class="red" :class="(isBig ? 'big' : '')">这是一个p标签</p>
      <p><button @click="isRed=!isRed">切换class</button></p>
    </div>
    
    var vm = new Vue({
      el:"#app",
      data:{
        isRed:true,
        isBig:true
      }
    })
    

    **注意:**可以传的参数为对象和数组,对象的key可以不加引号,也表示为字符串,数组的话必须加上引号,不然表示为变量,从vue当中找!


    style
    <div id="app">  
      <div :class="classobj">动态切换class-对象</div>
      <div :class="classarr">动态切换class-数组</div>
    
      <hr>
      <div :style="styleobj">动态切换style-对象</div>
      <div :style="stylearr">动态切换style-数组</div>
    </div>
    
    var vm = new Vue({
      el:"#app",
      data:{
        classobj:{
          aa:true,
          bb:true,
          cc:false
        },
        classarr:["aa","bb"],//效果同上
        styleobj:{
          backgroundColor: "red"
        },
        stylearr:[
          {backgroundColor: "red"}//效果同上
        ]
      }
    })
    

    **注意:**在 : style属性里写样式名的时候,要用驼峰命名写法,不然会报错的!

    <div id="app">
      <p :style="{backgroundColor:background,fontSize:'40px'}">我是p标签</p>
    </div>
    
    new Vue({
      el:"#app",
      data:{
        background:"green"
      }
    })
    

    v-cloak

    标签闪烁问题:当网络较慢的时候,网页还没有加载Vue.js,而导致Vue来不及渲染,这时页面就会显示出源代码,出现闪烁问题

    解决:当元素加上v-cloak时,当vue没有加载完成时,相当于标签属性,结合css样式可以隐藏未被渲染的标签,当vue加载完毕后,会将这个指令去掉

    [v-cloak] {
      display: none;
    }
    
    <div id="app" v-cloak>
      <p>msg=>{{msg}}</p>
    </div>
    

    v-text、v-pre、v-html

    v-text 与 {{}} 是等价的

    v-html是可以解析标签的 慎用 性能消耗比v-text高

    v-pre指令是不会解析{{}}

    <p>{{msg}}</p>
    <p v-pre>msg=>{{msg}}</p>
    <p v-text="msg"></p>
    <p v-html="msg"></p>
    

    结果截图:

    image-20200322120443185

    v-if、v-show

    v-if

    v-if 为 true的时候代表元素出现,为false代表元素移除(在dom树上直接移除)

    v-else 需要与 v-if 搭配使用,不能单独出现

    <button @click="ifShow=!ifShow">切换显示</button>
    <p v-if="ifShow">这是第一个标签</p>
    <p v-else>这是第二个标签</p>
    

    还可以搭配v-else-if

    <input type="text" v-model="type" />
    <p v-if="type=='A'">这是A的p标签<BB/p></p>
    <p v-else-if="type=='B'">这是B的p标签</p>
    <p v-else-if="type=='C'">这是C的p标签</p>
    <p v-else> not A/B/C</p>
    
    v-show

    true 代表元素出现

    false 代表元素隐藏 (通过切换display属性)

    <p v-show="ifShow">这是一段p标签</p>
    

    以上两种指令都可以直接添加 true/false,且不会被认为是vue的data属性

    <p v-if="true">这是if的p标签</p>			  <!--true出现,false消失-->
    <p v-show="true">这是show的p标签</p>		<!--true出现,false隐藏-->
    

    **注意:**template包裹的元素只能通过 v-if 切换,因为这个标签不会被浏览器解析渲染

    <template v-if="false">					<!--v-show 会失效--->
      <p>我是template里面的p标签哦</p>
    </template>
    

    v-if、v-show区别

    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销,因此
    如果需要非常频繁的切换,则使用v-show比较好;
    如果在运行的时候很少改变,则使用 v-if较好。


    watch监听

    需求:做一个num值的2倍的效果

    方法:

    1. {{num*2}} 可以实现此效果,因为发现不方便管理
    2. 可以将多次操作的内容封装成一个函数进行调用
      1. 好处是把数据进行更好的维护管理了
      2. 缺点就是页面中如果使用了无关数据的话,这个方法也会重新执行调用,页面效率变低
    3. 可以通过设置watch监听器来实现此功能
      1. 优点watch可以用来监听现有数据的变化,然后一旦现有数据发生改变了,就会实现一些业务逻辑
      2. 缺点是逻辑上稍微复杂一点
    var vm = new Vue({
      el:"#app",
      data:{
        num:1,
        watchNum:''
      },
      watch:{
        // num:function(newValue,oldValue){
        //     console.log(newValue,oldValue)
        //     this.watchNum = newValue*2
        // }
        num:{
          immediate:true,//初始化的时候也会监听
          deep:true,//深度监听  内部的属性发生变化了,也会被检测到
          handler(newValue,oldValue){
            this.watchNum = newValue*2
          }
        }
      },
    })
    

    **注意:**num里面的处理函数必须是handler,不能改变


    计算属性

    针对以上需求,通过computed(计算属性)可以去实现此效果

    会根据现有数据生成一个新的数据,并且两者会产生关联,建立永久性缓存,当无关数据变化的时候,计算属性内部不会重新计算,而是直接从缓存里面取值来用。

    <p>{{computedNum}}</p>
    
    var vm = new Vue({
      el:"#app",
      data:{
        num:1,
      },
      computed:{
        computedNum(){ //写法上像是一个函数,但是是一个属性,{{computedNum}} 计算属性
          return this.num*2
        }
      }
    })
    

    **注意:**计算属性的写法上是写成一个函数,但是在上面调用的时候千万不能加括号

    跟watch的区别:

    watch监听只能是单个的? 每次监听只能监听一个变量的改变;而计算属性computed是可以依赖多个数据的变化(并且只与他所依赖的项进行永久性缓存)

    当在输入框里面输入v-model="计算属性"的时候,后续如果更改输入框里面的值,就会报错了

    通常计算属性写成一个函数,默认就会执行get方法

    计算属性不仅可以获取数据,也可以通过set进行设置。

    new Vue({
      el:"#app",
      data:{
        msg:"hello "
      },
      computed:{ //声明计算属性
        // computedNum(){
        //     return this.msg
        // }
        computedNum:{
          get(){
            return this.msg
          },
          set(val){
            this.msg = val
          }
        }
      }
    })
    

    混入

    混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式

    let common = {
      methods: {
        a() {
          console.log("点击了a按钮");
        }
      },
      computed: {
        aaa() {
          return "这是aaa哦";
        }
      }
    };
    
    let vm = new Vue({
      el: "#app",
      mixins: [common]
    });
    

    组件

    全局组件

    在使用组件前,必须先注册再使用

    <!-- 调用全局组件 -->
    <hello></hello>
    
    //创建组件
    let Hello = Vue.extend({
      template: `<h2>我是h2组件</h2>`
    });
    //全局注册组件
    Vue.component("hello", Hello);//没有s!
    new Vue({
      el: "#app"
    });
    

    由于分开两步写有点麻烦,Vue又提供了第二种写法

    将组件的创建与注册集成在一起

    Vue.component("hello", {
      template: `<h2>我是h2组件</h2>`
    });
    

    局部组件

    只能在当前实例中使用,在components属性里面配置,在其他实例中使用会报错

    //创建组件
    let Hello = Vue.extend({
      template: `<h2>我是h2组件</h2>`
    });
    
    new Vue({
      el: "#app",
      components: {//不能漏了s!,局部组件的注册
        hello: Hello
      }
    });
    

    同样,也有集成写法

    new Vue({
      el: "#app",
      components: {
        hello: {
          template: `<h2>我是h2组件</h2>`
        }
      }
    });
    

    在html定义组件的模板结构

    可以使用body里创建的template模板标签在组件里指定template

    必须使用id作为标记

    模板内容外层必须有一个根元素

    <template id="my-h2">
      <div>
        <h2>我是h2标签</h2>
      </div>
    </template>
    
    Vue.component("my-h2", {
      template: "#my-h2"
    });
    

    is

    接下来看一个案例

    <table>
      <tr>
        <hello></hello>
      </tr>
    </table>
    

    去页面看的时候,发现hello跑到table外面了

    因为vue在解析模板的时候,会根据html的规则,table里面只能放tr,td,th,放入其他组件会跑到外面

    使用 is 指令,可以替换掉某标签,就可以插入到 table 中了

    <table>
      <tr>
        <td is="hello"></td>
      </tr>
    </table>
    
    

    通过 :is 实现组件切换

    <button @click="comp=comp=='my-h2'?'my-p':'my-h2'">切换组件</button>
    <component :is="comp"></component>
    

    组件嵌套

    子组件只能在父组件内调用

    <father></father>
    
    new Vue({
      el: "#app",
      components: {
        father: {	//父组件
          template: `<div>这是父级组件哦<son></son></div>`,
          components: {
            son: {	//子组件
              template: `<p>这是子级组件哦</p>`
            }
          }
        }
      }
    });
    

    过滤器

    过滤器是对即将显示的数据做进一步的筛选处理,然后进行显示,值得注意的是过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据

    <p>{{timer|filterTime1}}</p>
    <p>{{timer|filterTime2("/")}}</p>
    

    全局过滤

    Vue.filter("filterTime1", function(val) {	//将时间戳格式化
      let date = new Date(val);	//val值就是 “|” 号左边的 timer
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    });
    

    **注意:**要在声明vue实例之前创建过滤器,不然会报错;内部必须要写return,不然返回空。

    局部过滤

    new Vue({
      el: "#app",
      data: {
        timer: Date.now()
      },
      filters: {	//不要漏了S!s
        filterTime2(val, options = "-") {//第二个形参 为标签上的过滤器的第一个实参
          let date = new Date(val);
          return (
            date.getFullYear() +
            options +
            (date.getMonth() + 1) +
            options +
            date.getDate()
          );
        }
      }
    });
    

    数据请求

    vue-resource

    从2.0起,vue-resource不再维护,推荐使用axios

    发送get请求

    get() {
      this.$http.get("./data.json").then(res => {
        this.data = res.data; //获取返回的数据
      });
    }
    

    请求jsonp数据

    jsonp() {
      this.$http
        .jsonp("http://suggest.taobao.com/sug?code=utf-8", {
        params: {					//发送请求的时候需携带的参数
          q: this.good
        }
      })
        .then(res => {
        this.result = res.data.result;
        this.good = "";
      });
    }
    

    fetch

    get请求

    fetch("./data.json").then(res => {
      return res.json();//返回json格式
    }).then(res => {
      console.log(res);
    });
    

    post请求(两种传参方式)

    fetch("./data.json", {
      method: "post",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded" 
      },
      body: "name=zs&age=22"
    })
      .then(res => res.json())
      .then(res => console.log(res));
    
    fetch("./data.json", {
      method: "post",
      headers: {
        "Content-Type": "application/json" //以json格式作为参数
      },
      body: JSON.stringify({
        name: "张三",
        age: 33
      })
    })
      .then(res => res.json())
      .then(res => console.log(res));
    

    axios

    get

    axios.get("./data.json").then(res => {
      console.log(res.data);
    });
    

    post(两种传参方式)

    handleClick() {
      axios.post("./data.json", "name='张三'&age=22").then(res => {
        console.log(res.data);
      });
    }
    
    axios.post("./data.json", {
      name: "李四",
      age: 33
    }).then(res => {
      console.log(res.data);
    });
    

    以上就是本人的学习总结,如有不对,欢迎指出~

    展开全文
  • 1. 使用props来控制关闭组件,emit同步变量-----props可以进行父组件到子组件通信,我思路把子组件控制v-if 变量通过watch props值来控制子组件显示,这样父组件值改变,子组件w...

    开发src-在线系统的过程中,封装了很多组件,如Dialog prompt等,在开源项目的组件中这些组件使用v-model来控制显示,我来总结一下关于自己学习到的v-model知识

    1. 使用props来控制关闭组件,emit同步变量-----props可以进行父组件到子组件的通信,我的思路把子组件控制v-if 的变量通过watch props的值来控制子组件的显示,这样父组件的值改变,子组件watch到改变,子组件关闭;同时我们可以单独关闭子组件,但是需要父组件的变量保持一致,可以在关闭组件的回调中,emit一个新的event来通知父组件,子组件关闭,父组件变量改变为false状态

     

    // 父组件大致写法
    <Dialog :show="show" @on-cancel="changeShow"> data() { show: true, }, methods: { changeShow(val) { this.show = val } }

     2. v-model语法糖  v-model其实是一种简写方式,我们常见的有两种v-model,分别是input元素上的v-model 和非input元素上

     <input v-model="price"><!-- 下行注释的语法糖 -->
     <!-- <input :value="price" @input="price = $event.target.value"> --> // $event.target.value 就是把input的值赋值给 price

    data(){
    return {
      price: 20
      }
    }

    对于非input元素呢,这里使用官方的例子

    Vue.component('base-checkbox', {
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        checked: Boolean
      },
      template: `
        <input
          type="checkbox"
          v-bind:checked="checked"
          v-on:change="$emit('change', $event.target.checked)"
        >
      `
    })

    父组件

    <base-checkbox v-model="lovingVue"></base-checkbox>

    这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候,这个 lovingVue 的属性将会被更新。

    这里的change 可以是 input(input元素) click(dialog) 等等事件,具体要看是如何出发元素的状态改变, 注意.self 防止其他因素影响

     

    有了这颗糖,封装组件的时候事半功倍

     

    转载于:https://www.cnblogs.com/czy960731/p/10196634.html

    展开全文
  • 计算属性 计算属性:当计算属性依赖数据发生改变时候,计算属性会重新计算一...基本语法: /* 计算属性要写在computed对象中。属性值为一个函数且必须有返回值。调用计算属性时,和调用data中属性一样,不要加括号

    计算属性

    计算属性:当计算属性依赖的数据发生改变的时候,计算属性会重新计算一次,如果计算属性依赖的属性没有发生改变,那么计算属性就不会重新计算。

    基本使用

    1、计算属性应写在computed对象中,每一个计算属性的值是一个函数并且必须有返回值。

    2、计算属性不可以和data中的属性重名

    3、计算属性在使用时,和data中属性的使用方法一样。直接用属性名不要加括号。

    基本语法:

    /*
    计算属性要写在computed对象中。属性值为一个函数且必须有返回值。调用计算属性时,和调用data中属性一样,不要加括号。
    计算属性名: function () {
    	return 返回值
    }
    */
    

    例:

    var vm = new Vue({
          el: '#app',
          data: {
            n1:'',
            n2:''
          },
          //n3依赖与n1和n2的值,当n1 和 n2发生改变的时候,这个函数就会执行。
            //返回值就是n3的值
          computed: {
            n3(){
              return +this.n1 + +this.n2;
            }
          }
        });
    

    注意点:
    1 、定义在coomputed对象中
    2、定义成一个函数且必须有返回值
    3、属性名不可以和data中的属性名重复
    4、调用的时候按照属性的方式调用,不能加括号。

    计算属性的有点-缓存机制:
    1、计算属性第一次执行以后,会把结果缓存起来,再次调用计算属性,直接缓存。
    2、依赖的属性发生变化的时候,会再次执行,并缓存。

    计算属性是基于它们的依赖项进行缓存的

    如果页面中需要使用多次计算属性的值,只会计算一次,计算属性只有在它的相关依赖发生改变时才会重新求值。

    计算属性不能与data中的属性同名,因为无论是data中的属性还是计算属性,最终都是挂载到vm上的

    代码演示:

    <body>
      <!-- 
        /*
    计算属性要写在computed对象中。属性值为一个函数且必须有返回值。调用计算属性时,和调用data中属性一样,不要加括号。
    计算属性名: function () {
    	return 返回值
    }
    
    注意点:
    1 、定义在coomputed对象中
    2、定义成一个函数且必须有返回值
    3、属性名不可以和data中的属性名重复
    4、调用的时候按照属性的方式调用,不能加括号。
    
    
    计算属性的有点-缓存机制:
    1、计算属性第一次执行以后,会把结果缓存起来,再次调用计算属性,直接缓存。
    2、依赖的属性发生变化的时候,会再次执行,并缓存。
    */
       -->
      <div id="app">
        <h1>vue的例子</h1>
        <!-- <p>{{msg.split('').reverse().join('')}}</p>
        <p>{{msg.split('').reverse().join('')}}</p>
        <p>{{msg.split('').reverse().join('')}}</p>
        <p>{{msg.split('').reverse().join('')}}</p>
        <p>{{msg.split('').reverse().join('')}}</p> -->
    
        <p>{{reverseMsg}}</p>
        <p>{{reverseMsg}}</p>
        <p>{{reverseMsg}}</p>
        <p>{{reverseMsg}}</p>
        <p>{{reverseMsg}}</p>
        <p>{{reverseMsg}}</p>
    
    
        <!-- {{reverseMsg}} -->
      </div>
      <script src="vue.js"></script>
      <script>
        const vm = new Vue({
          el: '#app',
          data: {
            msg: 'hello'
          },
          computed: {
            reverseMsg: function(){
              console.log('我执行了一次')
              return this.msg.split('').reverse().join('')
            }
          }
        })
      </script>
    </body>
    

    计算属性完整语法:

    在需要改变计算属性值的时候,需要使用计算属性的完整写法:

    /*
    计算属性名: function () {
    	// getter  读取计算属性值得时候自动走get逻辑 
    	get: function () {
    		console.log('get被触发了')
    		return this.firstName + ' ' + this.lastName    
    	},  
    	// setter  设置计算属性值得时候自动走set逻辑  
    	set: function (value) {      
    		console.log(value)
    		console.log('set被触发了')
    	}  
    }
    */
    

    代码演示:

    <body>
      <div id="app">
        <h1>vue的例子</h1>
    
        <input type="text" placeholder="请输入你的姓" v-model="firstName"/> +
          <input type="text" placeholder="请输入你的名" v-model="lastName"/> =
          <input type="text" placeholder="你的姓名是" v-model="fullName"/>
      </div>
      <script src="vue.js"></script>
      <script>
        /*
        当我们改变计算属性的值的时候,会用到计算属性的完整写法
    
        计算属性名: function () {
          // getter  读取计算属性值得时候自动走get逻辑 
          get: function () {
            console.log('get被触发了')
            return this.firstName + ' ' + this.lastName    
          },  
          // setter  设置计算属性值得时候自动走set逻辑  
          set: function (value) {      
            console.log(value)
            console.log('set被触发了')
          }  
        }
        */
        const vm = new Vue({
          el: '#app',
          data: {
            firstName: '',
            lastName: '',
    
          },
          computed: {
            fullName: {
              // 获取计算属性值的时候执行get方法
              get(){
                console.log('get被触发了')
                return this.firstName + ' ' + this.lastName
              },
              // setter  设置计算属性值得时候自动走set逻辑  
              set(value){
                console.log('set被触发了')
                console.log(value)
                let arr = value.split(' ')
                this.firstName = arr[0]
                this.lastName = arr[1]
              }
            }
          }
        })
      </script>
    </body>
    

    watch监视数据的变化

    vue实例中提供了一个watch属性,用于监听vue实例中的属性的变化。

    watch对应了一个对象,键是观察的属性,值是对应的回调函数。

    基本使用

    • 基本使用
    
        var vm = new Vue({
          el: '#app',
          data: {
            money: 100,
          }
          watch: {
            //监听属性中的属性名 就是 我们要监听data中的属性的属性名。
            //第一个参数:当前值
            //第二个参数:上一次的值
            money: function(newValue, oldValue) {
    			console.log(newValue, oldValue)
            }
          }
        });
    
    

    监听属性-代码演示:

    <body>
      <div id="app">
        <h1>vue的例子</h1>
        {{money}}
      </div>
      <script src="vue.js"></script>
      <script>
        const vm = new Vue({
          el: '#app',
          data: {
            money: 100,
            girlFriend: {
              money: 1000,
              love: '你'
            }
          },
          watch: {
            //监听属性中的属性名 就是 我们要监听data中的属性的属性名。
            //第一个参数:当前值
            //第二个参数:上一次的值
            money: function(newValue, oldValue) {
              console.log(newValue, oldValue)
            },
            // 下面是监听属性的简写
            // girlFriend: function(newValue, oldValue){
            //   console.log(newValue, oldValue)
            // }
    
            // 监听属性的完整写法
            girlFriend: {
              // deep 属性  深度监听。
              deep: true,
              handler: function(newValue, oldValue){
                console.log(oldValue)
              }
            }
          }
        })
      </script>
    </body>
    
    • 表单校验效果
    // watch: 监视数据的变化
    watch: {
        // 监视msg,只要msg属性的值发生改变,function就会执行
        // value: 当前值  oldValue:上一次的值
        msg: function(value) {
            if (value.length >=3 && value.length <= 6) {
                this.tips = '正确'
            } else {
                this.tips = '密码格式不正确'
            }
        }
    }
    

    监视对象

    监视对象的时候,需要加上deep: true

    为了发现对象内部值的变化,可以在选项参数中指定 deep: true

    • 如果是一个对象,无法监听到对象内部值的变化
    
        var vm = new Vue({
          el: '#app',
          data: {
            girlFriend: {
              money: 100,
              love: '你'
            }
          }
          watch: {
            girlFriend: function(newValue, oldValue) {
              console.log(newValue, oldValue);
            }
          }
        });
    
    
    
    • 需要加上deep
    data: {
        girlFriend: {
            money: 100,
            love: '你'
        }
    },
    watch: {
        girlFriend: {
            deep: true,
            handler: function(newValue, oldValue) {
                //注意:如果监听的是对象,新值与旧值都是相同的,因为指向了同一个对象。
                //https://cn.vuejs.org/v2/api/#vm-watch
                console.log(newValue, oldValue);
            }
        }
    }
    
    • immediate 属性,立马进行监听
    watch: {
        user: {
            deep: true,
            immediate:true,
            handler: function(newValue, oldValue) {
              console.log(newValue, oldValue);
            }
        }
    }
    

    数据双向绑定原理

    数据双向绑定分析:

    • 从view 到model
      采用dom 的事件绑定实现的。
    • 从model到view:
      1、脏数据检查 轮询 ,angular 1.x 。
      2、ES5语法:对象的属性劫持。Object.defineProperty 劫持 vue2.0
      3、ES6语法:Proxy 代理 vue3.0

    View->Model

    实现原理:通过绑定Dom事件方式,实现同步更新数据。

    <input type="text">
    
    	const data = {
           msg: 'hello'
        }
    
        const input = document.querySelector('input')
        input.value = data.msg
    
    	input.addEventListener('input', function(){
           console.log('input事件被触发')
           data.msg = this.value
        })
    

    代码演示:

    <body>
      <input type="text">
      <script>
        const input = document.querySelector('input')
        // 功能键抬起也会触发keyup事件
        // input.addEventListener('keyup', function(){
        //   console.log(this.value)
        // })
    
        // 当内容发生变化后,失去焦点才会触发事件
        // input.addEventListener('change', function(){
        //   console.log(this.value)
        // })
    
        input.addEventListener('input', function(){
          console.log(this.value)
          data.msg = this.value
        })
    
        let data = {
          msg: ''
        }
      </script>
    </body>
    

    Model->View->vue2.0

    方法:

    1、通过ES5中语法:Object.defineProperty() 进行对象属性的数据劫持。(vue2.0)

    	const data = {
          name: '老王',
          age: '38'
        }
        /* 
          参数1: 对象
          参数2: 劫持的 属性
          参数3: 执行的函数对象。
        */
        Object.defineProperty(data, 'age', {
          // 访问属性时触发
          get(){
            console.log('get被触发')
            return '38'
          },
          // 设置属性时触发
          set(value){
            console.log('set被触发')
          }
        })
    

    代码演示:

    <body>
      <input type="text">
      <script>
        const input = document.querySelector('input')
    
        let data = {
          msg: 'hello'
        }
    
        let msg = data.msg
        input.value = msg
        /* 
          参数1: 对象
          参数2: 劫持的 属性
          参数3: 执行的函数对象。
        */
        Object.defineProperty(data, 'msg', {
          // 访问属性时触发
          get(){
            console.log('get被触发')
            // 会造成死循环
            // return data.msg
            return msg
          },
          // 设置属性时触发
          set(value){
            console.log('set被触发')
            console.log(value)
            // 会造成死循环
            // data.msg = value
            // 给临时存储的变量赋值
            msg = value
            // 给dom赋值
            input.value = value
          }
        })
      </script>
    </body>
    

    1、通过ES6中语法Proxy() 进行对象代理 。(vue3.0)

    	const data = {
          name: '老王',
          age: '38'
        }
    	/* 
          参数1: 对象
          参数2: 参数对象
        */
        const obj = new Proxy(data, {
          // 读取属性值得时候被调用
          // target: 目标对象
          // key: 所要访问的属性
          get(target, key){
            console.log('get被执行了')
            return target[key]
          },
          // 设置属性值得时候被调用
          // target: 目标对象
          // key: 所要访问的属性
          // value: 传入的值
          set(target, key, value){
            console.log('set被执行了')
            target[key] = value
          }
        })
    

    数据双向绑定vue2.0实现

    代码演示:

    <body>
      <input type="text">
      <script>
        const input = document.querySelector('input')
    
        input.addEventListener('input', function(){
          data.msg = this.value
        })
    
        let data = {
          msg: 'hello'
        }
    
        let msg = data.msg
        input.value = msg
        /* 
        第一个参数:数据(对象)
        第二个参数:劫持属性名 引号引起来
        第三个参数: 是个对象 
          1、get 当读取劫持的属性时 会触发。并且 get中要有返回值
          2、set 当设置劫持的属性值得时候 会触发。
        Object.defineProperty
    
        */
        Object.defineProperty(data, 'msg', {
          get(){
            return msg
          },
          set(value){
            msg = value
            input.value = value
          }
        })
      </script>
    </body>
    

    数据双向绑定vue2.0缺点

    代码演示:

    <body>
      <input type="text">
      <script>
        const input = document.querySelector('input')
    
        input.addEventListener('input', function(){
          data.msg = this.value
        })
    
        let data = {
          msg: 'hello',
        }
    
        let msg = data.msg
        input.value = msg
        /* 
        第一个参数:数据(对象)
        第二个参数:劫持属性名 引号引起来
        第三个参数: 是个对象 
          1、get 当读取劫持的属性时 会触发。并且 get中要有返回值
          2、set 当设置劫持的属性值得时候 会触发。
        Object.defineProperty
    
        */
        Object.defineProperty(data, 'msg', {
          get(){
            console.log('get')
            return msg
          },
          set(value){
            console.log('set')
            msg = value
            input.value = value
          }
        })
    
        data.car = '小黄车'
      </script>
    </body>
    

    数据双向绑定Model->View->vue3.0

    代码演示:

    <body>
      <input type="text">
      <script>
        const input = document.querySelector('input')
    
        let data = {
          msg: 'hello'
        }
    
        /* 
          参数1: 对象,要代理的对象
          参数2: 参数对象
        */
        const obj = new Proxy(data, {
          // 读取属性值得时候被调用
          // target: 目标对象
          // key: 所要访问的属性
          get(target, key){
            console.log(target)
            console.log(key)
            console.log('get被执行了')
            return target[key]
          },
          // 设置属性值得时候被调用
          // target: 目标对象
          // key: 所要访问的属性
          // value: 传入的值
          set(target, key, value){
            console.log('set被执行了')
            target[key] = value
          }
        })
      </script>
    </body>
    

    数据双向绑定vue3.0实现

    代码演示:

    <body>
      <input type="text">
      <script>
        const input = document.querySelector('input')
        input.addEventListener('input', function(){
          obj.msg = this.value
        })
    
        let data = {
          msg: 'hello'
        }
        input.value = data.msg
        const obj = new Proxy(data, {
          get(target, key){
            return target[key]
          },
          set(target, key, value){
            target[key] = value
            input.value = value
          }
        })
      </script>
    </body>
    
    展开全文
  • computed和watch的区别 资源 Vue 官网 知识点 引入vue 下载 直接下载开发版本,包含完整的警告和调试模式 CDN <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&

    Vue基础

    1. 说说你对mvvm框架的理解
    2. 说说你对vue数据双向绑定的理解
    3. v-if 和 v-show 的区别是什么?
    4. 使用v-for时,为什么一定要绑定key值?
    5. v-if 和 v-for 同时使用时,谁的优先级更高?
    6. computed和watch的区别

    资源

    Vue 官网

    知识点

    引入vue

    下载
    直接下载开发版本,包含完整的警告和调试模式

    CDN

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    

    NPM
    构建大型应用时:

    npm install vue
    

    创建第一个vue程序 Hello Vue

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue</title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <h1>Vue Demo</h1>
        <!-- 宿主文件,vue作用的目标 -->
        <div id="app">{{ text }}</div><!-- 插值表达式 -->
        <script>
            // 创建vue实例,传入配置对象
            const app = new Vue({
                el: '#app', // 配置宿主目标
                data () { // 响应式数据
                    return {
                        text: 'Hello Vue'
                    }
                }
            })
            setTimeout(() => {
                app.text = 'Vue World'
            }, 2000)
        </script>
    </body>
    </html>
    

    Vue 核心设计理念

    • 数据驱动
      通过特殊的语法将数据与页面元素绑定,无需手动操作dom,只要改变数据就能使dom同步更新

    • 遵循MVVM(Model–view–viewmodel)模型的框架
      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7m9vzKi0-1605161019418)(media/16049226085053/16049309142307.jpg)]

      • Model代表数据模型
      • View代表UI组件
      • ViewModel将Model和View关联起来

      数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据

      MVVM框架的三要素:响应式,模板引擎,渲染

      • 响应式:Vue 如何监听数据的变化?(响应式原理
      • 模板:Vue 如何设置模板与我们的页面元素绑定,以及如何解析?
      • 渲染:Vue 如何将模板转化为html代码?

    Vue 数据的双向绑定:数据变化更新视图,视图变化更新数据

    • 通过事件监听的方式来实现对view变化的监听,来更新data
    • vue 数据双向绑定主要是实现了根据data的变化来更新view

    对应的还有个mvc:mvc和mvvm的区别

    Vue 模板语法

    Vue.js 使用了基于 HTML 的模板语法

    插值文本

    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:

    <span>Message: {{ msg }}</span>
    

    使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。

    官网参考

    输出原始html

    使用v-html输出原始html:

    <span v-html="rawHtml"></span>
    

    官网参考

    属性

    使用v-bind绑定html属性值:

    <div v-bind:id="dynamicId"></div>
    

    v-bind的缩写为:

    官网参考

    使用JavaScript表达式

    可以在模板语法中使用JavaScript表达式:

    <span>{{ ok ? 'YES' : 'NO' }}</span>
    // or
    <div v-bind:id="'list-' + id"></div>
    

    官网参考

    条件渲染

    • v-if:
      条件性地渲染一块内容:在指令的表达式返回 truthy 值的时候被渲染

    • v-else:
      使用 v-else 指令来表示 v-if 的“else 块”。
      v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

    • v-else-if:
      充当 v-if 的“else-if 块”,可以连续使用。

    • v-show:
      效果跟v-if一样。
      不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
      v-show 只是简单地切换元素的 CSS property display。
      v-show 不支持 <template> 元素,也不支持 v-else

    v-ifv-show的区别:

    1. v-if是“真正”的条件渲染,在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
    2. v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
    3. 使用v-show元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
    4. v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
    5. 需要非常频繁地切换,则使用 v-show 较好
    6. 在运行时条件很少改变,则使用 v-if 较好

    官网参考

    列表渲染

    用 v-for 指令基于一个数组来渲染一个列表:使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。

    注意点:

    • 遍历数组时,第一个参数是当前值,第二个参数是当前索引
    • 遍历对象时,第一个参数是当前值,第二个参数是键名,第三个参数是当前索引值
    • 可以用 of 替代 in 作为分隔符
    • 必须绑定key值
    • <template>上使用 v-for 可以渲染多段内容
    • v-for 的优先级比 v-if 更高
    • 不推荐 v-if 和 v-for 一同使用

    触发视图更新的数组变更方法有哪些:

    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()

    官网参考

    class与style绑定

    用 v- bind 处理 class 和 style,表达式结果的类型除了字符串之外, 还可以是对象或数组。

    • 对象语法:

      <div
        class="static"
        v-bind:class="{ active: isActive, 'text-danger': hasError }"
      ></div>
      
      data: {
        isActive: true,
        hasError: false
      }
      
      <div v-bind:style="styleObject"></div>
      data: {
        styleObject: {
          color: 'red',
          fontSize: '13px'
        }
      }
      
    • 数组语法:

      <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
      
      <div v-bind:style="[baseStyles, overridingStyles]"></div>
      

    官网参考

    表单输入绑定

    用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定。

    <!--输入框-->
    <input v-model="message">
    <!--复选框-->
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <!--单选框-->
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <!--下拉框-->
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    

    .lazy.number.trim修饰符的使用

    官网参考

    事件处理

    用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码

    可以用事件修饰符,按键修饰符,系统修饰符做一些特殊处理

    v-on的缩写为@

    计算属性和侦听器

    计算属性使用:

    computed: {
        // 计算属性的 getter
        reversedMessage: function () {
            // `this` 指向 vm 实例
            return this.message.split('').reverse().join('')
        }
    }
    

    侦听器使用:

    watch: {
        // 如果 `question` 发生改变,这个函数就会运行
        target: function (newValue, oldValue) {
        }
    }
    

    侦听器的立即执行(immediate)与深度监听(deep):
    watch 最初绑定的时候是不会执行的。
    Vue 不能检测到对象属性的添加或删除。

    data: {
        obj: {
            a: 123
        }
    },
    watch: {
        obj: {
            handler(newVal, oldVal) {},
            immediate: true,
            deep: true
        }
    }
    

    深度监听会有性能问题,可以使用字符串形式监听:

    watch: {
        'obj.a': {
            handler(newVal, oldVal) {},
            immediate: true
        }
    } 
    
    展开全文
  • 一文学习vue3新语法

    千次阅读 多人点赞 2021-03-01 13:38:29
    一、知识点 defineComponent 构建应用及绑定事件 使用 reactive 绑定数据 使用 ref ( torefs ) 绑定数据 使用 getCurrentInstance 获取当前实例化对象上下文信息 watch、watchEffect 数据监听 简单 TodoList 点餐...
  • 引言:vue2中需要掌握的知识 基础知识 创建实例 模板语法/JSX语法 指令 data及数据劫持 methods / computed / watch / filters 事件监听和修饰符 条件渲染 循环渲染 表单处理和修饰符 class/style样式处理 … ...
  • Vue 常用知识

    2020-08-08 12:29:12
    Vue 知识总结计算属性场景:本质:书写位置:特点:语法:filters 过滤器作用:分类:局部过滤器:全局过滤器:watch 侦听器作用:语法:Iscroll 滚动条插件导包:布局:moment 时间插件安装:导包:作用:语法:单...
  • Vue知识点整理

    2021-04-10 14:45:17
    文章目录一、初识Vue1.1.Vue 是什么:1.2.Vue 两大核心:1.3.Vue 基础语法:1.4.Vuevm实例:1.3.Vue事件监听:1.5.Vue双向绑定:1.6.Vue属性绑定 v-bind:1.7.Vue计算属性computed:1.8.Vue监视属性watch:1.9....
  • Vue 基础知识分享Vue简单使用Vue数据的双向绑定原理(响应式原理)最基本的Vue用法(模板语法)计算属性computed一个小的综合实例监视watchVue中计算属性computed / methods / watch的区别强制数据绑定之class与...
  • vue知识点全集

    2020-12-11 21:22:08
    绑定语法: 同模板字符串中${}5.指令v-bindv-showv-if高频笔试题(手写) 观察者模式v-forsplice:key="i"绑定HTML片段内容v-html防止用户短暂看到{{}}v-cloakv-text事件绑定vue中如何获得事件对象 (vue中如何获得鼠标...
  • 【Vue】 基础知识

    2018-09-20 18:01:50
    1.监听器(watch)在表单输入时比较有用,可以根据输入不同(监视值变化)触发不同提示 (开销比较大操作更适合) 2.计算属性主要是用在属性之间存在关联情况,因为会使用属性依赖缓存(适合开销操作小操作),如果你不...
  • target 优化项目整理 async与await with try…catch进阶用法 Object.assgin对象合并方法 vue提供自定义watch函数来自定义监听指定data值(this.$watch) (进阶)Reflect内置对象 拦截以及获取对象相关信息 es6+新增...
  • 文章目录什么是Vue如何使用VueMVVM设计模式绑定语法: 同模板字符串中${}指令(directive)v-bindv-showv-if高频笔试题(手写) 观察者模式v-forsplice:key=“i”绑定HTML片段内容v-html防止用户短暂看到{{}}v-cloakv-...
  • 小P孩前端学习一

    2020-11-25 11:53:11
    目录VueSlot(插槽)v-model(只是一个语法糖)key数据来源状态data VS 属性propscomputed VS watch Vue Vue中容易忽视的知识点。 Slot(插槽) 插槽是传递复杂内容方式,分为普通插槽、具名插槽、作用域插槽。 版本2.5...
  • 之前已经解除过了v-bind及他的语法糖":"写法,这篇介绍class和style的绑定 二,绑定class Vue通过v-bind:class(:class)对class进行绑定, 绑定的值可以是多种类型,如:字符串,对象,数组 可以通过改变绑定...
  • template模板渲染语法和原理(vue-loader,虚拟DOM) 指令和自定义指令 methods computed watch filters class / style 条件和循环渲染 事件处理 表单处理 组件(属性) ref 生命周期 插槽 transition 渲染函数和jsx...
  • VUE框架学习2

    2019-06-28 09:38:16
    VUE框架学习 昨天看了大概一半的内容,今天争取搞定所有VUE框架的...1.关于watch的语法问题,昨天看到的教程是$watch,今天看到的是watch:{},没整明白这到底怎么用。 2.关于v-for里面key提升渲染效率? 3.对于v-f...
  • antlr4权威指南

    2017-09-30 10:47:22
    ANTLR是一款强大的语法分析器生成工具,可用于读取、处理、执行和翻译结构化的文本或二进制文件。它被广泛应用于学术领域和工业生产实践,是众多语言、工具和框架的基石。Twitter搜索使用ANTLR进行语法分析,每天...
  • 从零练就iOS高手实战班

    万人学习 2015-06-25 10:37:09
    iOS课程教学从入门到实战,系统讲解Swift编程,精讲基础语法,详解iOS基础框架,知识点涵盖新潮实用swift,AppleWatch App开发。 咨询QQ:2528047463 咨询群:462917576 付费学员答疑群:446896569
  • 01 爬虫课程概述

    2018-11-16 12:10:20
    https://www.youtube.com/watch?v=EDTOrXLYZ5s&amp;index=9&...1.python基本语法知识 2.如何抓取HTML页面 HTTP请求树立, urllib, urllib2, requests 处理后请求可以模拟浏览器发送请求,...
  • 2020.7.4今日日报

    2020-07-05 07:30:37
    4,会使用Vue中模块语法。 明日学习计划: 1,掌握指令修饰符。 2,学会自定义指令以及事件。 3,学会组件间通信。 4,了解计算属性以及watch。 心得 Vue核心更关注更关注图层方面,易学,但是也考验html和...
  • vue框架常用知识点 认识Vue文件结构( template, script,stye) 怎么使用vue? 1·内网下载, 2·另一种方式BootCDN。https://www.bootcdn.cn/ 选择.min.js压缩版本,也可以减少网络相应时间 模板语法 包含插值...
  • iOS课程教学从入门到实战,系统讲解Swift编程,精讲基础语法,详解iOS基础框架,知识点涵盖新潮实用swift,AppleWatch App开发。 咨询QQ:2528047463 咨询群:462917576 付费学员答疑群:446896569...
  • 很多已经做案例人,却不知道如何去学习更加高深的知识。那么针对这三类人,我给大家提供一个好学习平台,免费领取视频教程,电子书籍,以及课程源代码!??¤QQ群:1057034340One old watch, like brief python...
  • 知识总结: 一,vue-cli 3.0 (2.0到3.0... template模板渲染语法和原理(vue-loader)--详见2.4 指令和自定义指令(v-if与v-show) methods,computed,watch,filters,data(为什么是函数) class、style 条...
  • Redis事务

    2017-12-24 19:53:00
    2.watch可以监测在执行事务过程中,如果目标被改变,将会导致事务无法执行。 熟悉关系型数据库读者应该对事务比较了解,简单说,事务表示一组动作,要么全部执行,要么全部不执行。 Redis提供了简单事务...
  • SASS 学习笔记

    2016-06-03 06:23:03
    预处理功能,就是将 SASS/SCSS 格式文件输出为 CSS 文件,可以对单个文件进行预处理,也可以对指定目录进行预处理,还可以对指定目录进行实时监控,基本语法如下: sass input.scss output.css sass --watch ...
  • 手写vue -实现数据响应式、数据双向绑定和事件监听一、理解Vue设计思想1、MVVM框架三要素:数据响应式、模板引擎及其渲染1)数据响应式:监听数据变化并在视图中更新2)模版引擎:提供描述视图模版语法3)渲染...
  • vue3

    2021-03-06 10:52:21
    VUE3语法 vue3特点 Vue2与Vue3 最大区别 — Vue2使用选项类型API(Options API)对比Vue3合成型API(Composition API) 作用: 聚合代码 & 逻辑重用 一、知识点 使用defineComponent 构建应用及绑定事件 使用...

空空如也

空空如也

1 2 3
收藏数 44
精华内容 17
关键字:

watch的语法知识