同学笔记

• 

  weixin_45721211 2020-02-26 21:56:45

  来源：Extends Option 扩展选项 查看详情

  extends扩展选项

  通过外部增加对象的形式，对构造器进行扩展。跟mixins混入很相似。

  {{number}}
      <p><button @click="add">add</button></p>

  var extendsObj= {
          updated: function () {
              console.log("我是扩展出来的update");
          },
          methods: {
              add: function () {
                  console.log("我是扩展出来的方法");
                  this.number++;
              }
          }
      }
      var app=new Vue({
          el:'#app',
          data:{
              number:1
          },
          methods:{
              add:function () {
                  console.log("我是构造器里的方法");
                  this.number++;
              }
          },
          updated:function(){
              console.log("原生的update方法");
          },
          extends:extendsObj
      })

  在控制台显示的顺序是，构造器方法先打印，然后是扩展出来的打印，最后是原生的updated方法，对于扩展的方法没有打印是因为，扩展中的方法和构造器中的方法名字相同，所以不会打印扩展器中的方法。

  新手一枚，若有不足，请指正！

• 

  weixin_45721211 2020-02-26 21:09:45

  来源：Mixins 混入选项操作 查看详情

  mixins混入选项

  Mixins一般有两种用途：

  1. 在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
  2. 很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

  基本用法

  {{number}}
      <p><button @click="add">add</button></p>

  var addCon={
          updated:function () {
              console.log("数据更新完成，更新为"+this.number);
          }
      };
  var app=new Vue({
          el:'#app',
          data:{
              number:1
          },
          methods:{
              add:function () {
                  this.number++;
              }
          },
          mixins:[addCon]
      })

  我们现在有个数字点击递增的程序，每次点击增加数字，在控制台打印出提示：“数据发生变化”.

  mixins调用顺序

  1、在构造器中用原生的updated方法

  updated:function(){
            console.log("原生的update方法");
          }

  2、在全局API混入方式

  Vue.mixin({
          updated:function () {
              console.log("全局的update方法");
          }
      })

  运行完代码可以在控制台看到全局API是首先执行，然后是构造器中的mixins选项，最后是构造器中原生updated方法。

  新手一枚，若有不足，请指教！

• 

  weixin_45721211 2020-02-26 20:30:25

  来源：Watch 选项 监控数据 查看详情

  watch选项

  构造器中的watch选项是用来监听数据。

  我们写一个例子，温度大于26度时，我们建议穿短袖短裤，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿羽绒棉衣。

  <p>今日温度：{{temperature}}℃</p>
      <p>穿衣建议：{{suggest}}</p>
      <p>
          <button @click="add">升高温度</button>
          <button @click="reduce">降低温度</button>
      </p>

  var arrayS=['短袖短裤','夹克长裙','羽绒棉服'];
      var app=new Vue({
          el:'#app',
          data:{
              temperature:4,
              suggest:'夹克长裙'
          },
          methods:{
              add:function () {
                  this.temperature+=4;
              },
              reduce:function () {
                  this.temperature-=4;
              }
          },
          watch:{
              temperature:function (newVal,oldVal) {
                  if(newVal>=26){
                      this.suggest=arrayS[0];
                  }else if(newVal<26&&newVal>0){
                      this.suggest=arrayS[1];
                  }else{
                      this.suggest=arrayS[2];
                  }
              }
          }
      })

  还有可以将watch选项用实例方法写在构造器外部

  app.$watch('temperature',function(newVal,oldVal){
      if(newVal>=26){
          this.suggest=suggest[0];
      }else if(newVal<26 && newVal >0)
      {
          this.suggest=suggest[1];
      }else{
          this.suggest=suggest[2];
      }
  
  })

  新人一枚，若有不足，请指正！

没有更多了