집 > 기사 > 웹 프론트엔드 > Vue.js 학습 4: Vue 구성 요소 기본 사항

Vue.js 학습 4: Vue 구성 요소 기본 사항

coldplay.xixi앞으로: 2020-10-16 14:43:372283검색

Vue.js 튜토리얼칼럼 오늘은 Vue 구성 요소에 대한 기본 지식을 소개합니다.

지금까지 이 노트 시리즈에서는 매우 간단한 단일 페이지 웹 애플리케이션을 보여 주었으며 일반적으로 페이지에는 몇 가지 간단한 대화형 요소만 있습니다. 그러나 실제 프로덕션 환경에서 웹 애플리케이션의 사용자 인터페이스는 여러 개의 복잡한 페이지로 구성되는 경우가 많습니다. 이때 우리는 코드의 재사용성에 주목해야 합니다. 이 문제를 해결하기 위해 Vue.js 프레임워크에서 제안하는 솔루션은 먼저 사용자 인터페이스의 요소를 다양한 기능에 따라 독립적인 구성 요소로 나누는 것입니다. 탐색 컬럼, 게시판, 데이터 양식, 사용자 등록 양식, 사용자 로그인 인터페이스 등 이러한 방식으로 후속 작업에서는 마치 레고 장난감을 가지고 노는 것처럼 필요에 따라 이러한 구성 요소를 다양한 특정 애플리케이션에 결합할 수 있습니다. 전체적으로 컴포넌트 시스템은 Vue.js 프레임워크를 학습할 때 반드시 숙지해야 하는 중요한 개념입니다. 아래에서는 Vue.js 프레임워크에서 구성 요소를 구축하고 사용하는 기본 방법을 경험하기 위한 일련의 실험적 예제를 작성합니다.

모든 실험을 시작하기 전에 다음 일련의 실험 프로젝트를 저장하기 위해 code 디렉터리에 00_test라는 디렉터리를 만들어야 합니다. 이 프로젝트는 체험에만 사용할 수 있습니다. Vue 컴포넌트의 구성 및 사용에 대한 내용이 있고 실제 애플리케이션 기능이 없으므로 00이라는 숫자를 부여했습니다. 그럼 첫 번째 실험을 시작하겠습니다! 이렇게 하려면 code/00_test 디렉터리에 comComponent_1이라는 실험용 디렉터리를 계속 만들고 이 디렉터리에서 npm install vue를 실행해야 합니다. code> 명령을 사용하여 Vue.js 프레임워크를 설치합니다. 마지막으로 <code>code/00_test/comComponent_1 디렉터리에 index.htm이라는 파일을 만들고 다음 코드를 입력하면 됩니다. 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>
    <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>

在上述实验中，我用两种不同的方式分别创建并注册了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
```
<!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>
```
- 첫 번째 매개 변수는 구성 요소의 이름을 지정하는 데 사용되는 문자열 개체여야 하며, 이는 또한 HTML 문서에서는 HTML 코드는 대소문자를 구분하지 않으므로 구성요소 이름을 지정할 때 소문자를 사용하는 것이 좋습니다. -를 사용하면 구분됩니다.
  🎜
- 🎜두 번째 매개변수는 구성 요소의 다양한 특정 매개변수를 설정하는 데 사용되는 JavaScript 개체여야 합니다. 다음 세 가지 가장 기본적인 매개변수가 여기에 정의되어 있습니다. 🎜
  - template: 이 매개변수는 구성 요소의 HTML 템플릿 코드를 지정하는 데 사용되는 문자열 개체입니다. 코드에서는 해당 DOM 개체가 루트 노드를 하나만 가져야 하며 하나만 가질 수 있다고 말합니다. 이 개체는 최종 HTML 문서의 구성 요소에 해당하는 사용자 정의 태그(이 경우 <say-hello>)로 표시됩니다. 🎜
  - props: 이 매개변수는 문자열 배열입니다. 배열의 각 요소는 구성 요소에 해당하는 사용자 정의 태그의 속성입니다. 지시문은 이 속성을 일부 데이터에 바인딩하여 데이터가 구성 요소로 전송될 수 있도록 합니다. 예를 들어, 여기서는 <say-hello> 태그의 v-bind 지시문을 사용하여 태그의 who 속성을 바인딩했습니다. Vue 인스턴스 객체의 who 데이터를 say-hello 구성 요소에 전달합니다. 🎜
  - data: 이 매개변수는 여기서 you와 같은 구성 요소 자체의 데이터를 설정하는 데 사용되는 함수입니다. 호출자로부터 를 가져옵니다. 누구데이터가 할당되었는지. 후자의 경우 이 참조를 사용하여 얻을 수 있습니다. 🎜🎜🎜물론 위의 세 가지 기본 매개변수 외에도 사용자 정의 이벤트 및 해당 처리 기능 등과 같은 구성요소에 대한 더 많은 매개변수를 설정할 수도 있습니다. 이에 대해서는 후속 프로그래밍 경험에서 보여드리겠습니다. 🎜
  下面，我们再来看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>
```
  在上述 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'
    }
});
```
  在上述 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;
```
  在这部分代码中，我先定义了一个局部组件，然后再使用 ES6 新增的export default语句将其导出为模块。当然，考虑到各种 Web 浏览器对 ES6 规范的实际支持情况，以及 Vue.js 框架本身使用的是 CommonJS 模块规范，所以上述实验依然可能不是编写 Vue.js 项目的最佳方式，其中可能还需要配置 babel 和 webpack 这样的转译和构建工具来辅助。在下一篇笔记中，我就来记录如何使用这些工具来构建具体的 vue 应用程序。
  
  相关学习推荐：js视频教程

위 내용은 Vue.js 학습 4: Vue 구성 요소 기본 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript json vue.js html es6 npm webpack 字符串 JS 对象事件 default dom this

성명：

이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Vue의 슬롯에 대해 알아보기다음 기사：Vue의 슬롯에 대해 알아보기