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

时间:2021-05-26

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,执行结果如下:

可以看出扩展的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的文章还很多,大家可以搜索查阅,感谢阅读,谢谢大家对本站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章