Vue.js中extend选项和delimiters选项的比较
2017-07-17 14:29
609 查看
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.js和angular.js的特点与比较
- Vue.js UI框架比较
- 1代 angularjs ember vue 比较
- Vue.js 与其他框架比较
- Vue.js 组件重要选项
- 使用Jquery与vuejs操作dom比较
- 使用Jquery与vuejs操作dom比较
- vue.js组件的重要选项
- 使用Jquery与vuejs操作dom比较
- Vue.js与Jquery的比较 谁与争锋 js风暴
- Vue.js与Jquery的比较 谁与争锋 js风暴
- Vue.js组件的重要选项
- extend选项和delimiters选项
- Vue.js源码学习一 —— 数据选项 State 学习
- Vue.js学习(二):computed响应数据变化与其他几种方法的比较
- Vue.js组件的重要选项
- 基于webpack和vue.js搭建的H5端框架
- 下载及安装vue.js
- js修改select列表选项中的值
- 原生js和jQuery的DOM操作函数速度比较