到目前为止，这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序，并且页面上通常只有几个简单的交互元素。但在实际生产环境中，Web 应用程序的用户界面往往是由多个复杂的页面共同组成的。这时候，我们就需要开始注意代码的可复用性了，针对这个问题，Vue.js 框架提出的解决方案就是先将用户界面上的元素按照不同的功能划分成一个个独立的组件，例如导航栏、公告栏、数据表格、用户注册表单、用户登录界面等。这样一来，我们在之后的工作中就可以像玩乐高玩具一样，根据需要将这些组件组合成各种具体的应用程序了。总而言之，组件系统是我们在学习 Vue.js 框架中必须要掌握的一个重要概念。下面，这篇笔记将通过编写一系列实验示例来体验一下在 Vue.js 框架中构建和使用组件的基本方法。

在所有实验开始之前，我需要先在code目录中创建一个名为00_test的目录，以便用于存放接下来的一系列实验项目，由于这些项目只能用于体验 Vue 组件的构建与使用方法，并没有实际的应用功能，所以我给了它00这个编号。那么，下面就来开始第一个实验吧！为此，我需要继续在code/00_test目录中再创建一个名为component_1的实验目录，并在该目录下执行npm install vue命令来安装 Vue.js 框架。最后，我只需在code/00_test/component_1目录下创建一个名为index.htm的文件，并输入如下代码：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA  -Compatible" content="ie=edge">

    <title>学习 vue 组件实验（1）：组件注册</title>

`</head>

<body>

    <div id="app">

        <say-hello :who="who"></say-hello>

        <welcome-you :who="who"></welcome-you>

    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>

        // 全局组件注册

        Vue.component('say-hello', {

            template: `<h1>你好， {{ you }}！</h1>`,

            props: ['who'],

            data: function() {

                return {

                    you: this.who

                };

            }

        });

        const app = new Vue({

            el: '#app',

            // 局部组件注册

            components: {

                'welcome-you': {

                    template: `<h2>欢迎你， {{ you }}！</h2>`,

                    props: ['who'],

                    data: function() {

                        return {

                            you: this.who

                        };

                    }

                }

            },

            data: {

                who: 'vue'

            }

        });

    </script>

</body>

</html>

在上述实验中，我用两种不同的方式分别创建并注册了say-hello和welcome-you两个组件。接下来就借由这两个组件来介绍一下这两种组件的使用。首先是say-hello组件，该组件是通过调用Vue.component()方法来创建并注册到应用程序中的，使用该方法创建的组件通常被称之为"全局组件"，我们在调用它的时候需要提供两个参数：

  • 第一个参数应该是一个字符串对象，用于指定组件的名称，该名称也是我们要在 HTML 文档中使用的自定义标签元素，而由于 HTML 代码是大小写不敏感的，所以我个人会建议大家在给组件起名字的时候应该尽量一律使用小写字母，单词之间可以使用-这样分隔符进行区隔。

  • 第二个参数应该是一个 JavaScript 对象，用于设置组件的各项具体参数。这里定义了以下三项最基本参数：

    • template：该参数是个字符串对象，用于指定该组件的 HTML 模版代码，需要注意的是，这段代码说对应的 DOM 对象必须有且只能有一个根节点。而这个对象在最终的 HTML 文档中将会由该组件所对应自定义标签所代表，在这里就是<say-hello>。
    • props：该参数是一个字符串数组，该数组中的每个元素都是该组件所对应的自定义标签的一个属性，该组件的用户可以通过v-bind指令将该属性绑定到某一数据上，以便将数据传到组件内部。例如在这里，我在<say-hello>标签中就用v-bind指令将该标签的who属性绑定到了 Vue 实例对象的who数据上，并将其传进say-hello组件中。
    • data：该参数是一个函数，用于设置组件自身的数据，例如这里的you，我将从调用者那里获取的who数据赋值给了它。对于后者，我们可以用this引用来获取。

    当然了，除了上面三个基本参数之外，我们还可以为组件设置更多参数，例如自定义事件及其处理函数等，这些我将会在后续的程序编写体验中展示。

下面，我们再来看welcome-you组件的构建。如你所见，该组件是在 vue 实例的components成员中构建并注册到应用程序中的，使用该方法创建的组件通常被称之为"局部组件"（它与全局组件的区别是，全局组件会在程序运行时全部加载，而局部组件只会在被实际用到时加载） 。该components成员的值也是一个 JSON 格式的数据对象，该数据对象中的每一个成员都是一个局部组件，这些组件采用键/值对的方式来定义,键对应的是组件的名称，值对应的是组件参数的设置。当然了，由于局部组件的命名规则与具体参数的设置方法都与全局对象一致，这里就不再重复说明了。

需要注意的是，第一个实验项目的编写方式将 HTML 代码、Vue 实例的构建代码以及组件的构建代码糅合在了一起，这对于提高代码的可复用性这个目的来说，显然是不行的。要想解决这个问题，我们可以利用 ES6 规范新增的模块规则将这三部分代码隔离开来。为了体验这种用法，我继续开始了第二个实验。具体做法就是在code/00_test目录中再创建一个名为component_2的实验目录，并在该目录下执行npm install vue命令来安装 Vue.js 框架。最后，我只需在code/00_test/component_2目录下创建一个名为index.htm的文件，并输入如下代码：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script type="module" src="./main.js"></script>

    <title>学习 vue 组件实验（2）：以 ES6 模块的方式注册组件</title>

</head>

<body>

    <div id="app">

        <say-hello :who="who"></say-hello>

    </div>

</body>

</html>

在上述 HTML 代码中，我们在照常引入 vue.js 框架之后，使用模块的方式引入了main.js脚本文件，最好在<div id="app">标签中使用了后面将要定义的组件所对应的自定义标签。接下来，我只需要在相同的目录下创建一个名为main.js的 JavaScript 脚本文件，并在其中输入如下代码：

// import Vue from './node_modules/vue/dist/vue.js';

import sayhello from './sayhello.js';

const app = new Vue({

    el: '#app',

    components: {

        'say-hello': sayhello

    },

    data: {

        who:'vue'

    }

});

在上述 JavaScript 代码中，我首先使用了 ES6 新增的import-from语句导入了后续要在sayhello.js文件中构建的组件，然后在构建 Vue 实例时将其注册成了局部组件。最后，我只需在同一目录下再创建这个sayhello.js脚本文件，并在其中输入如下代码：

const tpl = `

    <div>

        <h1>你好， {{ you }}！</h1>

        <input type="text" v-model="you" />

    </div>

`;

const sayhello = {

    template: tpl,

    props : ['who'],

    data : function() {

        return {

            you: this.who

        }

    }

};

export default sayhello;

在这部分代码中，我先定义了一个局部组件，然后再使用 ES6 新增的export default语句将其导出为模块。当然了，考虑到各种 Web 浏览器对 ES6 规范的实际支持情况，以及 Vue.js 框架本身使用的是 CommonJS 模块规范，所以上述实验依然可能不是编写 Vue.js 项目的最佳方式，其中可能还需要配置 babel 和 webpack 这样的转译和构建工具来辅助。当然了，如果大家不想陷入如此复杂的配置，那使用 Vue 官方提供的 vue-cli 脚手架工具是一个不错的选择，在下一篇笔记中，我就来记录如何使用这个工具来构建具体的 vue 应用程序。

Vue.js 学习笔记之四：Vue 组件基础的更多相关文章

  1. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  2. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  3. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  4. Vue.js 学习笔记之七：使用现有组件

    5.3 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...

  5. Vue.js 学习笔记 第1章 初识Vue.js

    本篇目录: 1.1 Vue.js 是什么 1.2 如何使用Vue.js 本章主要介绍与Vue.js有关的一些概念与技术,并帮助你了解它们背后相关的工作原理. 通过对本章的学习,即使从未接触过Vue.j ...

  6. Vue.js学习笔记（三） - 修饰符

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  7. Vue.js学习笔记之修饰符详解

    本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...

  8. Vue.js 学习笔记 第7章 组件详解

    本篇目录: 7.1 组件与复用 7.2 使用props传递数据 7.3 组件通讯 7.4 使用slot分发内容 7.5 组件高级用法 7.6 其他 7.7 实战:两个常用组件的开发 组件(Compon ...

  9. Vue.js 学习笔记之五：编译 vue 组件

    正如上一篇笔记中所说,直接使用 ES6 标准提供的模块规范来编写 Vue 组件在很多情况下可能并不是最佳实践.主要原因有两个,首先是市面上还有许多并没有对 ES6 标准提供完全支持的 Web 浏览器, ...

随机推荐

  1. 题解 洛谷P2434 【[SDOI2005]区间】

    本题的贪心策略是以区间起点位置由小到大排序,然后开始合并. 区间按起点顺序由小到大排序,可以最大化合并成功的可能. 这个脑补应该不难想出来.(读者自证不难 直接上代码: #include <bi ...

  2. .net core中使用jwt进行认证

    JSON Web Token(JWT)是一个开放标准(RFC 7519),它定义了一种紧凑且自包含的方式,用于在各方之间作为JSON对象安全地传输信息.由于此信息是经过数字签名的,因此可以被验证和信任 ...

  3. 发布jar包到服务器读取resource目录下文件

    * 解决:当项目打包成jar之后resources路径下面的证书文件访问不到* 思路:* 1.运行时先复制一个jar* 2.将复制的jar解压到jar文件目录* 3.删除复制的jar跟解压的非证书文件 ...

  4. centOS7 安装jdk压缩包版

    1.到官网下载jdk https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.将压 ...

  5. leetcode刷题-46全排列

    题目 给定一个 没有重复 数字的序列,返回其所有可能的全排列. 思路 回溯算法 不断取出字符,对剩余字符进行选择 实现 class Solution: def permute(self, nums: ...

  6. PHP生成二维码 endroid/qr-code 扩展包

    目录 1. 引入 endroid/qr-code 扩展包 2. 使用示例 3. 二维码中放入logo,无法识别二维码的问题 1. 引入 endroid/qr-code 扩展包 https://pack ...

  7. Oracle数据库之体系结构

    Oracle数据库管理系统中的3个重要的概念:实例(Instance).数据库(Database)和数据库服务器(Database Server). 实例:是后台进程和内存结构的集合,是Oracle数 ...

  8. jackson序列化与反序列化的应用实践

    jackson序列化与反序列化的应用实践 源码地址: https://github.com/zhouweixin/serializable 1 相关概念 序列化: 把对象转换为字节序列的过程称为对象的 ...

  9. xampp安装和使用：windows和linux使用安装微擎小程序

    1.官网下载xampp XAMPP:Apache+MySQL+PHP+PERL,适用于windows+linux+macos x+Solaris等多系统使用 官网地址:https://www.apac ...

  10. django之models字段参数

    字段内部参数: null 数据库中字段是否可以为空 db_column 数据库中字段的列名 db_tablespace default 数据库中字段的默认值 primary_key 数据库中字段是否为 ...