Vue.js中extend选项和delimiters选项的比较
更新时间：2017年07月17日 14:29:10 投稿：lqh
这篇文章主要介绍了Vue.js中extend选项和delimiters选项的比较的相关资料,需要的朋友可以参考下
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的文章还很多，大家可以搜索查阅，感谢阅读，谢谢大家对本站的支持！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了Vue+Canvas绘图的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue中@路径无法跳转到指定文件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了如何通过Vue全局组件的挂载来实现弹窗组件，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的可以了解一下2022-11-11
详解vuex中的this.$store.dispatch方法
这篇文章主要介绍了vuex中的this.$store.dispatch方法,必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法，才能在store存储成功，需要的朋友可以参考下2022-11-11
最近公司在做一个基于vue开发的项目，项目需要开发一个展示组织架构的树组件，在网上搜了半天，没有找到合适的，下面小编给大家分享一个基于Vue制作组织架构树组件，需要的朋友参考下吧2017-12-12
这篇文章主要介绍了VUE-ElementUI 自定义Loading图操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
vue项目怎样用nginx反向代理WebSocket请求地址
这篇文章主要介绍了vue项目怎样用nginx反向代理WebSocket请求地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
Vue+Element一步步实现动态添加Input_输入框案例
这篇文章主要介绍了Vue+Element一步步实现动态添加Input_输入框案例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue+axios 实现http拦截及路由拦截 ,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要为大家介绍了VueJs中如何使用Teleport及组件嵌套层次结构详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
最新评论