<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>extends扩展选项</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <p>${num}</p> <p><button @click="add">add</button></p> </div> </body> <script type="text/javascript"> var extendsObj={ updated:function(){ // 更新 console.log('我是扩展的updated') }, methods:{ // 方法 add:function(){ console.log('我是扩展出来的方法'); } } } new Vue({ el:"#app", data:{ num:1, }, methods:{ //方法 add:function(){ this.num++; console.log('我是原生的方法'); } }, updated:function(){ //更新 console.log('我是原生的updated'); }, extends:extendsObj, //扩展放对象 扩展 delimiters:['${','}'] // 分隔符 delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。 }) </script> </html>