Vue.js 학습 4: Vue 구성 요소 기본 사항
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>
로그인 후 복사로그인 후 복사위 실험에서 저는 두 가지 다른 방법으로
say-hello및welcome-you구성 요소를 만들고 등록했습니다. 다음으로 이 두 가지 구성 요소를 사용하여 이 두 구성 요소의 사용법을 소개하겠습니다. 첫 번째는say-hello컴포넌트로,Vue.comComponent()메소드를 호출하여 애플리케이션에 생성 및 등록됩니다. 이 메소드를 사용하여 생성된 컴포넌트는 일반적으로 " 전역 구성 요소"인 경우 호출 시 두 개의 매개 변수를 제공해야 합니다.-
첫 번째 매개 변수는 구성 요소의 이름을 지정하는 데 사용되는 문자열 개체여야 하며, 이는 또한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
Vue 컴포넌트 통신: 컴포넌트 파괴 통신을 위해 $destroy 사용
Jul 09, 2023 pm 07:52 PM
Vue 컴포넌트 통신: 컴포넌트 파괴 통신을 위해 $destroy를 사용하세요. Vue 개발에서 컴포넌트 통신은 매우 중요한 측면입니다. Vue는 Props, Emit, Vuex 등과 같은 컴포넌트 통신을 구현하는 다양한 방법을 제공합니다. 이 기사에서는 컴포넌트 파괴 통신을 위해 $destroy를 사용하는 또 다른 컴포넌트 통신 방법을 소개합니다. Vue에서 각 구성 요소에는 일련의 수명 주기 후크 기능을 포함하는 수명 주기가 있습니다. 컴포넌트 파괴도 그 중 하나입니다. Vue는 $de를 제공합니다.
Vue 구성 요소 통신: 데이터 모니터링을 위해 watch 및 계산 사용
Jul 10, 2023 am 09:21 AM
Vue 구성 요소 통신: 데이터 모니터링을 위해 watch 및 계산 사용 Vue.js는 널리 사용되는 JavaScript 프레임워크이며 핵심 아이디어는 구성 요소화입니다. Vue 애플리케이션에서는 데이터를 서로 다른 구성요소 간에 전송하고 통신해야 합니다. 이번 글에서는 Vue의 Watch와 Computed를 사용하여 데이터를 모니터링하고 응답하는 방법을 소개하겠습니다. watch Vue에서 watch는 하나 이상의 속성 변경을 모니터링하는 데 사용할 수 있는 옵션입니다.
Vue 실습: 날짜 선택기 구성요소 개발
Nov 24, 2023 am 09:03 AM
Vue 실용적인 전투: 날짜 선택기 구성 요소 개발 소개: 날짜 선택기는 일상적인 개발에서 자주 사용되는 구성 요소로 날짜를 쉽게 선택할 수 있으며 다양한 구성 옵션을 제공합니다. 이 기사에서는 Vue 프레임워크를 사용하여 간단한 날짜 선택기 구성 요소를 개발하고 특정 코드 예제를 제공하는 방법을 소개합니다. 1. 요구사항 분석 개발을 시작하기 전에 구성요소의 기능과 특성을 명확히 하기 위해 요구사항 분석을 수행해야 합니다. 일반적인 날짜 선택기 구성 요소 기능에 따라 다음 기능 포인트를 구현해야 합니다. 기본 기능: 날짜를 선택할 수 있습니다.
Vue는 구성 요소 재사용 및 확장을 어떻게 구현합니까?
Jun 27, 2023 am 10:22 AM
프론트엔드 기술의 지속적인 개발로 Vue는 프론트엔드 개발에서 널리 사용되는 프레임워크 중 하나가 되었습니다. Vue에서 구성 요소는 페이지를 더 작고 관리하기 쉬운 부분으로 나누어 개발 효율성과 코드 재사용성을 향상시킬 수 있는 핵심 개념 중 하나입니다. 이 기사에서는 Vue가 구성 요소 재사용 및 확장을 구현하는 방법에 중점을 둘 것입니다. 1. Vue 컴포넌트 재사용 믹스인 믹스인은 Vue에서 컴포넌트 옵션을 공유하는 방법입니다. 믹스인을 사용하면 여러 구성 요소의 구성 요소 옵션을 단일 개체로 결합하여 최대한의 효과를 얻을 수 있습니다.
Vue 프로젝트에서 타사 라이브러리를 사용하는 방법
Oct 15, 2023 pm 04:10 PM
Vue는 최신 웹 애플리케이션을 구축하는 데 도움이 되는 풍부한 도구와 기능을 제공하는 인기 있는 JavaScript 프레임워크입니다. Vue 자체는 이미 많은 실용적인 기능을 제공하지만 때로는 Vue의 기능을 확장하기 위해 타사 라이브러리를 사용해야 할 수도 있습니다. 이 기사에서는 Vue 프로젝트에서 타사 라이브러리를 사용하는 방법을 소개하고 특정 코드 예제를 제공합니다. 1. 타사 라이브러리 소개 Vue 프로젝트에서 타사 라이브러리를 사용하는 첫 번째 단계는 이를 소개하는 것입니다. 다음과 같은 방법으로 소개할 수 있습니다.
Vue의 구성요소 수명주기에 대한 심층적인 이해
Oct 15, 2023 am 09:07 AM
Vue의 구성 요소 수명 주기를 깊이 이해하려면 특정 코드 예제가 필요합니다. 소개: Vue.js는 단순성, 학습 용이성, 효율성 및 유연성으로 인해 개발자가 선호하는 진보적인 JavaScript 프레임워크입니다. Vue의 컴포넌트 개발에서는 컴포넌트의 라이프사이클을 이해하는 것이 중요한 부분입니다. 이 기사에서는 Vue 구성 요소의 수명 주기를 자세히 살펴보고 독자가 이를 더 잘 이해하고 적용할 수 있도록 구체적인 코드 예제를 제공합니다. 1. Vue 컴포넌트의 라이프사이클 다이어그램 Vue 컴포넌트의 라이프사이클은 컴포넌트로 간주할 수 있습니다.
Vue 컴포넌트 개발: 탭 페이지 컴포넌트 구현 방법
Nov 24, 2023 am 08:41 AM
Vue 컴포넌트 개발: 탭 컴포넌트 구현 방법 현대 웹 애플리케이션에서 탭 페이지(Tab)는 널리 사용되는 UI 컴포넌트입니다. 탭 구성 요소는 단일 페이지에 여러 관련 콘텐츠를 표시하고 탭을 클릭하여 전환할 수 있습니다. 이번 글에서는 Vue.js를 사용하여 간단한 탭 컴포넌트를 구현하는 방법을 소개하고 자세한 코드 예제를 제공하겠습니다. Vue 탭 구성 요소의 구조 탭 구성 요소는 일반적으로 탭과 패널의 두 부분으로 구성됩니다. 라벨은 표면을 식별하는 데 사용됩니다.
Vue 구성 요소에서 여러 데이터 상호 작용 방법 간을 전환하는 방법
Oct 08, 2023 am 11:37 AM
Vue 구성 요소에서 여러 데이터 상호 작용 방법 간을 전환하는 방법 Vue 구성 요소를 개발할 때 API를 통해 데이터 요청, 양식을 통해 데이터 입력 또는 실시간 데이터 푸시와 같은 다양한 데이터 상호 작용 방법으로 전환해야 하는 시나리오에 자주 직면합니다. WebSocket 등을 통해 . 이 기사에서는 Vue 구성 요소에서 여러 데이터 상호 작용 방법의 전환을 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다. 방법 1: API 요청 데이터 어떤 경우에는 백그라운드 데이터를 얻기 위해 API를 통해 데이터를 요청해야 합니다. 아래에
