<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>vue.extend</title>
</head>
<body>
<h1>Vue.extend</h1>
<hr>
<author></author>
<script type="text/javascript">
var authorExtend = Vue.extend({
template:"<p><a :href='authorUrl'>{{authorName}}</a></p>",
data:function(){
return{
authorName:'JSPang',
authorUrl:'http://jspang.com'
}
}
});
console.log(new authorExtend());
new authorExtend().$mount('author');
</script>
<h1>Extends Optin Demo</h1>
<hr>
<div id="app">
{{message}}
<p><button @click="add">add</button></p>
</div>
<script type="text/javascript">
var bbb={
created:function(){
console.log("我是被扩展出来的");
},
methods:{
add:function(){
console.log('我是被扩展出来的方法!');
}
}
};
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
methods:{
add:function(){
console.log('我是原生方法');
}
},
extends:bbb,
delimiters:['${','}']
})
</script>
</body>
</html>