<!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>
