菜单

Vue.js中extend选项和delimiters选项的相比

2019年6月13日 - 皇家前端

Vue.js中extend选项和delimiters选项的比较

extend选项

同意声明扩张另贰个组件(能够是八个简易的挑三拣四对象或构造函数),而无需采纳Vue.extend,那根本是为着便利扩展单文件组件,它和mixin有类似之处

<div id="app">
  {{num}}
  <button @click="add">addNumber</button>
</div>
<script type="text/javascript">
  var extendsObj = {
    updated: function() {
      console.log("extend updated");
    }
  };
  new Vue({
    el: "#app",
    data: {
      num : 1
    },
    methods : {
      add : function() {
        console.log("原生 add");
        this.num++;
      }
    },
    updated : function(){
      console.log('原生updated');
    },
    extends : extendsObj,
  });
</script>

地点的代码扩充的是updated,实施结果如下:

图片 1

能够看到扩大的update施夷光行,那么上边看看扩充methods的时候,只是下边包车型地铁片段差异而已

 var extendsObj = {
    updated: function() {
      console.log("extend updated");
    },
    methods : {
      add : function() {
        console.log("extend add");
      }
    }
  };

施行结果其实就是上面图片的范例,也正是说,对于methods来讲,遭遇同名的函数,则推行的是是非非扩充的函数,假诺扩充的好坏同名的函数,则遵照扩充之后的奉行

delimiters选项

暗中认可的插值的写法是{{}},不过在好几境况下,大家需求选取部分分歧等的办法,比方那样${}

<div id="app">
  ${num}
  <button @click="add">addNumber</button>
</div>


  new Vue({
    el: "#app",
    data: {
      num : 1
    },
    methods : {
      add : function() {
        console.log("原生 add");
        this.num++;
      }
    },
    delimiters: ['${', '}']
  });

在意:delimiters对应的是一个数组

以上就是Vue.js中extend选项和delimiters选项的相比的讲课,本站关于Vue.js的文章还诸多,我们可以寻找查阅,谢谢阅读,多谢大家对本站的帮忙!

你也许感兴趣的篇章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图