【Vue.js学习笔记】8：建立多个Vue实例对象,认识Vue中的组件

建立多个Vue实例对象这里在同一个js文件中创建了两个Vue实例对象，它们各自能完成前面学的那些功能，同时使用对象名称也可以互相访问，协同实现一些功能。index.html&lt;!DOCTYPE html&gt;&lt;html lang="en" xmlns:v-on="http://www.

LauZyHou

6943人浏览 · 2018-12-25 10:21:00

LauZyHou · 2018-12-25 10:21:00 发布

建立多个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"
});

运行结果

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^