扩展选项和分隔符选项的比较

Vue.js中扩展选项和分隔符选项的比较

扩展选项

允许在不使用Vue.extend的情况下声明和扩展另一个组件(可以是简单的选项对象或构造函数)，这主要是为了方便扩展单个文件组件，类似于mixin

div id=' app ' { num } } button @ click=' add ' addnumber/button/div script type=' text/JavaScript ' var extend sobj={ updated : function(){ console . log(' extend updated ')；} };new vue({ El : ' # app }，data: {num33601}，methods : { add 3360 function(){ console . log(' native add ')))；this.num}}，updated : function(){ console . log(' native updated ')；}，扩展了： extendsObj，})；/script上面的代码进行了扩展更新，执行结果如下：

可以看出，扩展更新是先执行的，所以当我们看下面的扩展方法时，只有下面的部分不同

var extendsObj={ updated : function(){ console . log(' extend updated ')；}，methods : { add : function(){ console . log(' extend add ')；} } };执行结果其实和上图一样，也就是说对于方法，如果遇到同名函数，就会执行非扩展函数；如果一个同名的扩展函数被扩展，它将在扩展后被执行。

分隔符选项

默认的插值是用{{}}编写的，但是在某些情况下，我们需要使用一些不同的方式，比如$ {}

div id=' app ' $ { num } button @ click=' add ' add number/button/div new vue({ El : ' # app }，data: {num33601}，methods : { add 3360 function(){ console . log(' native add。this.num} }，delimiters: ['${ '，' } ']})；注意：分隔符对应于一个数组

以上是Vue.js中extend选项和分隔符选项的对比说明，这个网站上关于vue.js的文章还是很多的，大家可以搜索一下。感谢您的阅读和对本网站的支持。