Vue起步之實現多物件和元件
阿新 • • 發佈：2018-11-11
1多物件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link rel="stylesheet" href="demo07.css"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <!--根容器--> <div id="vue-appone"> <h1>多個Vue例項化物件{{title}}</h1> <p>{{greet}}</p> </div> <div id="vue-apptwo"> <h1>多個Vue例項化物件{{title}}</h1> <p>{{greet}}</p> <button v-on:click="changetitle">change</button> </div> <script src="app08.js"></script> </body> </html>
//例項化物件 var one = new Vue({ el:"#vue-appone", data:{ title:"app one", }, methods:{ }, computed:{ greet:function(){ return "one" } } }); //例項化物件 var two=new Vue({ el:"#vue-apptwo", data:{ title:"two" }, methods:{ changetitle:function(){ one.title="change" } }, computed:{ greet:function(){ return "two" } } }); two.title ="change two"
2.元件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue.js</title> <link rel="stylesheet" href="demo07.css"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <h1>元件</h1> <!--根容器--> <div id="vue-appone"> <greeting></greeting> </div> <div id="vue-apptwo"> <greeting></greeting> </div> <script src="app09.js"></script> </body> </html>
Vue.component("greeting",{
template:
'<p>hello world!{{name}}<button v-on:click="changeName">changName</button></p>',
data:function(){
return {
name:'鹿晗',
}
},
methods:{
changeName:function(){
this.name="jerry"
}
}
})
//例項化物件
new Vue({
el:"#vue-appone",
});
//例項化物件
new Vue({
el:"#vue-apptwo",
});搭建腳手架CLI:https://blog.csdn.net/qq_35723619/article/details/83817417