版权声明：本文为博主原创学习笔记，如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/85230286
建立多个Vue实例对象
这里在同一个js文件中创建了两个Vue实例对象，它们各自能完成前面学的那些功能，同时使用对象名称也可以互相访问，协同实现一些功能。
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<!--<link rel="stylesheet" href="style3.css">-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这次创建2个根容器-->
<div id="vue-app1">
<h3>{{title}}</h3>
<p>{{greet}}</p>
</div>
<div id="vue-app2">
<h3>{{title}}</h3>
<p>{{greet}}</p>
<button v-on:click="changeTitle1()">改变app1的title</button>
</div>
<script src="app10.js"></script>
</body>
</html>
app10.js
注意这里const只是保证其修饰的为常量不被改变，也就是v1和v2的指向，但是它们内部的属性还是可以改变的。
//注意var/let/const的区别,在这里用哪个都可以的时候尽量选择后两个,它们约束了变量提升
// 实例化vue对象1
const v1 = new Vue({
el: "#vue-app1",
data: {
title: "app1的内容",
},
methods: {},
computed: {
greet: function () {
return "Hello App1";
}
}
});
// 实例化vue对象2
const v2 = new Vue({
el: "#vue-app2",
data: {
title: "app2的内容",
},
methods: {
changeTitle1: function () {
v1.title = "app1的title改变了";
}
},
computed: {
greet: function () {
return "Hello App2";
}
}
});
v2.title = "app2的titile在js文件导入时就被改变了";
运行结果
认识Vue中的组件
Vue实例对象中的data、methods、computed都可以在组件中实现：
Vue.component("组件名", 对象);
而不必写在Vue实例对象中。
注意下面例子里的组件的模板里将双引号换成反引号是使用ES6的语法，这样就可以换行写了。
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<!--<link rel="stylesheet" href="style3.css">-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这次创建2个根容器-->
<div id="vue-app1">
<greeting></greeting>
</div>
<div id="vue-app2">
<greeting></greeting>
</div>
<script src="app10.js"></script>
</body>
</html>
app10.js
注意第13行和第26行注解掉的代码，如果将它们打开，也就是在data所对应的function中返回的是一个共享的对象，那么点击改名时所改的这个data对象是共享的，所以点击改名按钮，两个Vue容器下的name都会改变。而在目前这种情况下，点击改名只会改变那个Vue容器下的name。
// 定义了一个Vue组件,将组件名当成一个标签使用
// 这样HTML上不必有太多的结构,而且内容可以动态地来自这个组件中
Vue.component("greeting", {
//组件模板,当使用组件时是显示这个基础上的内容,注意要放在一个根标签里
template: `
<p>
{{name}}:大家好,这是一个p标签
<button v-on:click="changeName()">改名</button>
</p>
`,
//组件中的数据
data: function () {
// return dt;
return {
name: "lzh"
};
},
//组件中的方法
methods: {
changeName: function () {
this.name = "LZH";
}
}
});
// var dt={name:"lzh"};
// 实例化vue对象1
new Vue({
el: "#vue-app1"
});
// 实例化vue对象2
new Vue({
el: "#vue-app2"
});
运行结果
