Vue.js Learning 4: Vue Component Basics-Vue.js-php.cn

Vue.js Tutorial column today introduces you to the basic knowledge of Vue components.

Vue.js Learning 4: Vue Component Basics

So far, the notes in this series have shown extremely simple single-page web applications, often with only a few simple interactive elements on the page. However, in actual production environments, the user interface of Web applications is often composed of multiple complex pages. At this time, we need to start paying attention to the reusability of the code. To solve this problem, the solution proposed by the Vue.js framework is to first divide the elements on the user interface into independent components according to different functions, such as navigation. column, bulletin board, data form, user registration form, user login interface, etc. In this way, in our subsequent work, we can combine these components into various specific applications as needed, just like playing with Lego toys. All in all, the component system is an important concept that we must master when learning the Vue.js framework. Below, this note will write a series of experimental examples to experience the basic methods of building and using components in the Vue.js framework.

Before starting all experiments, I need to create a directory named 00_test in the code directory to store the next series of experimental projects , since these projects can only be used to experience the construction and use of Vue components and have no actual application functions, so I gave them the number 00. So, let’s start the first experiment! To do this, I need to continue to create another experimental directory named component_1 in the code/00_test directory, and execute the npm install vue command in this directory to install the Vue.js framework. Finally, I just need to create a file named index.htm in the code/00_test/component_1 directory and enter the following code:

<!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>
    <p id="app">
        <say-hello :who="who"></say-hello>
        <welcome-you :who="who"></welcome-you>
    </p>
    <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>

Copy after login

In the above experiment , I created and registered the say-hello and welcome-you components in two different ways. Next, we will use these two components to introduce the use of these two components. The first is the say-hello component, which is created and registered in the application by calling the Vue.component() method. Components created using this method are usually called As a "global component", we need to provide two parameters when calling it:

The first parameter should be a string object used to specify the name of the component. It is also the custom tag element we want to use in the HTML document. Since HTML code is not case-sensitive, I personally recommend that you try to use lowercase letters when naming components. You can use them between words. - This delimiter separates.
The second parameter should be a JavaScript object, used to set various specific parameters of the component. The following three most basic parameters are defined here:
- template: This parameter is a string object used to specify the HTML template code of the component. It should be noted that this The code snippet says that the corresponding DOM object must have and can only have one root node. This object will be represented by the custom tag corresponding to the component in the final HTML document, here it is <say-hello>.
- props: This parameter is a string array. Each element in the array is a property of the custom tag corresponding to the component. Users of the component can pass# The ##v-bind directive binds this property to a certain data so that the data can be transferred to the component. For example, here, I used the v-bind directive in the <say-hello> tag to bind the who attribute of the tag to the Vue instance object. on the who data and pass it into the say-hello component.
- data: This parameter is a function used to set the data of the component itself, such as you here, which I will get from the caller. who data is assigned to it. For the latter, we can use this reference to obtain it.

下面，我们再来看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>
    <p id="app">
        <say-hello :who="who"></say-hello>
    </p>
</body>
</html>

Copy after login

在上述 HTML 代码中，我们在照常引入 vue.js 框架之后，使用模块的方式引入了main.js脚本文件，最好在<p 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'
    }
});

Copy after login

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

const tpl = `
    <p>
        <h1>你好， {{ you }}！</h1>
        <input type="text" v-model="you" />
    </p>
`;

const sayhello = {
    template: tpl,
    props : ['who'],
    data : function() {
        return {
            you: this.who
        }
    }
};

export default sayhello;

Copy after login

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

相关学习推荐：js视频教程

The above is the detailed content of Vue.js Learning 4: Vue Component Basics. For more information, please follow other related articles on the PHP Chinese website!