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