Vue.js의 컴포넌트 사용에 대한 자세한 설명
이번에는 Vue.js의 컴포넌트 사용에 대한 자세한 설명을 가져왔습니다. Vue.js에서 컴포넌트를 사용할 때 주의사항은 무엇인가요?
소개
Vue.js를 사용할 때 Vue.js 구성 요소는 매우 중요합니다. 이 튜토리얼에서는 Vue.js 구성 요소를 자세히 살펴보고 기본 사항을 이해한 후 애플리케이션에 적용해 보겠습니다. 시작해 봅시다.
컴포넌트란 무엇인가요?
구성 요소를 사용하면 복잡한 애플리케이션을 작은 조각으로 나눌 수 있습니다. 예를 들어 일반적인 웹 애플리케이션에는 헤더, 사이드바, 콘텐츠, 바닥글과 같은 섹션이 있습니다.
Vue.js를 사용하면 각 부분을 구성 요소라고 하는 별도의 모듈 코드로 나눌 수 있습니다. 이러한 구성 요소를 확장한 다음 작업 중인 응용 프로그램에 연결할 수 있습니다. 구성 요소를 사용하는 것은 애플리케이션 작성 전반에 걸쳐 코드를 재사용할 수 있는 좋은 방법입니다.
블로그 애플리케이션이 있고 블로그 게시물 열을 표시하려고 한다고 가정합니다. Vue 구성 요소를 사용하면 다음을 수행할 수 있습니다.
<blog-post></blog-post>
Vue가 나머지를 처리합니다.
Vue 인스턴스를 DOM 요소에 마운트하는 간단한 HTML 페이지를 만듭니다. 이를 사용하여 구성 요소에 대해 알아봅니다. 다음은 샘플 HTML 페이지입니다.
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- p where Vue instance will be mounted -->
<p id="app"></p>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<script>
// A new Vue instance is created and mounted to your p element
new Vue({
el: '#app',
data: {
domain: 'Tutsplus'
},
template: '<p>Welcome to {{ domain }}</p>
});
</script>
</body>
</html>위에서는 코드에 구성 요소가 없는 간단한 Vue 인스턴스를 만들었습니다. 이제 환영 메시지를 두 번 표시하려면 어떻게 해야 할까요?
당신의 추측은 아마도 Vue 인스턴스가 마운트된 위치에 p가 두 번 나타날 것입니다. 이것은 작동하지 않습니다. ID를 클래스로 변경해 보면 다음과 같은 결과가 나옵니다:
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- p where Vue instance will be mounted -->
<p class="app"></p>
<p class="app"></p>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<script>
// A new Vue instance is created and mounted to your p element
new Vue({
el: '.app',
data: {
domain: 'Tutsplus'
},
template: '<p>Welcome to {{ domain }}</p>
});
</script>
</body>
</html>여전히 작동하지 않습니다!
이 문제를 해결하는 유일한 방법은 구성 요소를 만드는 것입니다. 구성 요소를 어떻게 생성합니까?
구성 요소는 Vue.comComponent()생성자 Vue.component（）构造函数创建的。 这个构造函数有两个参数：你的组件的名字（也可以叫做标签名）和一个包含组件选项（options）的对象。
让我们使用上面的内容创建一个组件。
Vue.component('welcome-message', {
data: function() {
return {
domain: 'Tutsplus'
}
},
template: '<p>Welcome to {{ domain }}</p>'
})
在上面，组件名称被称为welcome-message。 你的组件可以有你选择的任何名称。 然而重要的是，这个名字不会影响任何HTML标签，因为你不想重写它。
传递给构造函数的options对象包含数据和模板。 在创建组件时，你的数据应该是一个函数，如上所见。 被保存的数据应该作为一个对象返回。
在没有数据可以传递的情况下，传递如下的模板：
Vue.component('welcome-message', {
template: '<p>Welcome to Tutsplus</p>'
})
完成之后，可以通过使用传递给构造函数的名称将其当作常规HTML元素来在应用程序中使用组件。 它被这样调用：<welcome-message> </ welcome-message>를 사용하여 생성됩니다. 이 생성자는 구성 요소 이름(태그 이름이라고도 함)과 구성 요소 옵션이 포함된 개체라는 두 가지 매개 변수를 사용합니다.
위의 내용을 이용하여 컴포넌트를 만들어 보겠습니다.
rreee
위에서 구성요소 이름은 welcome-message입니다. 구성 요소의 이름은 원하는 대로 지정할 수 있습니다. 그러나 중요한 것은 이 이름을 재정의하고 싶지 않기 때문에 이 이름이 HTML 태그에 영향을 미치지 않는다는 것입니다.
생성자에 전달된 옵션 개체에는 데이터와 템플릿이 포함되어 있습니다. 구성요소를 생성할 때 위에서 본 것처럼 데이터는 함수여야 합니다. 저장된 데이터는 객체로 반환되어야 합니다.
전달할 데이터가 없는 경우 다음 템플릿을 전달합니다.
VueJs Components <welcome-message></welcome-message> <welcome-message></welcome-message> <welcome-message></welcome-message> <welcome-message></welcome-message>
<script> Vue.component('welcome-message', { data: function() { return { domain: 'Tutsplus' } }, template: '<p>Welcome to {{ domain }}</p>' }) // A new Vue instance is created and mounted to your p element new Vue({ el: '#app' }); </script>
이 작업이 완료되면 구성 요소를 생성자에 전달된 이름을 사용하여 일반 HTML 요소로 처리하여 응용 프로그램에서 사용할 수 있습니다. <welcome-message></welcome-message>와 같이 호출됩니다.
템플릿을 여러 번 출력하려면 아래와 같이 필요한 만큼 구성 요소를 호출하면 됩니다.
rreee결과적으로 환영 메시지가 4번 표시됩니다.
구성요소에 데이터 저장
위에서 나는 데이터가 함수여야 하고, 그 안에 포함된 정보가 객체로 반환되어야 한다고 언급했습니다. 왜 이런가요?
반환된 데이터가 개체가 아닌 경우 데이터를 사용하는 구성 요소는 동일한 소스, 즉 공유 데이터를 공유합니다. 따라서 한 구성 요소의 데이터 변경은 다른 구성 요소에 영향을 미칩니다. 이는 데이터가 객체로 반환되는 경우와 동일하지 않습니다.
이것이 실제로 어떻게 작동하는지 확인하는 것이 중요합니다. 먼저, 데이터가 객체로 반환되는 경우를 살펴보자.
rreee🎜 위에서 무슨 일이 일어나고 있는지 추측할 수 있나요? 🎜🎜 두 개의 구성 요소가 있으며, 데이터가 개체로 반환되지 않기 때문에 두 구성 요소 모두 동일한 데이터 소스를 공유합니다. 내가 옳다는 것을 어떻게 증명하나요? 위 페이지를 브라우저에서 보면 한 구성 요소의 변경으로 인해 다른 구성 요소의 데이터도 변경되는 것을 볼 수 있습니다. 그러면 어떤 모습이어야 할까요? 🎜🎜 좋아요: 🎜<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- p where Vue instance will be mounted -->
<p id="app">
<welcome-message></welcome-message>
<welcome-message></welcome-message>
</p>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<script>
var data = { name: 'Henry' }
Vue.component('welcome-message', {
data: function() {
return data
},
template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>',
methods :{
changeName: function() {
this.name = 'Mark'
}
}
})
// A new Vue instance is created and mounted to your p element
new Vue({
el: '#app'
});
</script>
</body>
</html>使用到目前为止学到的内容，让我们使用 vue -cli 从头开始一个新的Vue.js项目来实现它。 如果你的机器上没有安装 vue -cli ，你可以通过运行：
npm install -g vue-cli
开始你的新的Vue.js项目：
vue init webpack vue-component-app
导航到你的应用程序，安装依赖关系，并使用下面的命令运行你的开发服务器。
cd vue-component-app npm install npm run dev
首先，你将重命名HelloWorld组件，这个组件是你将应用程序初始化为Hello.vue时创建的组件。然后你将注册这个组件作为一个全局组件在你的应用程序中使用。
所以你的Hello组件应该看起来像这样。
#src/components/Hello.vue
<template>
<p class="hello">
<p>Welcome to TutsPlus {{ name }}</p>
<hr>
<button @click="changeName">Change Display Name</button>
</p>
</template>
<script>
export default {
name: 'Hello',
data () {
return {
name: 'Henry'
}
},
methods: {
changeName () {
this.name = 'Mark'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>你有欢迎文本显示欢迎消息和作为数据传递的名称。 当点击欢迎消息下方的按钮时，将调用changeName方法。 名字将从亨利改为马克。
要全局使用此组件，必须被注册。你能猜到应该在哪里完成这个操作吗？如果你说main.js，恭喜你，答对了！
要注册一个组件，可以导入它，然后使用Vue.component（）构造函数进行设置。自己动手试试。
我敢打赌，这个对你来说小菜一碟。以下是main.js文件中的内容。
#src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Home from './components/Hello'
Vue.config.productionTip = false
Vue.component('display-name', Home)
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})这里除了导入你的Hello组件的那一行之外，没有什么新东西。然后使用构造函数注册该组件。最后，对于这部分，组件需要使用你输入的组件名称来显示。在这种情况下，组件是显示名称。这将在你的App.vue文件中完成。
打开src / App.vue并使其看起来像这样。
#src/App.vue
<template>
<p id= "app" >
<display-name/>
</p>
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: 'Avenir' , Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>打开服务器，打开http：// localhost：8080。 点击按钮，名称应该改变。
我们来看看如何在本地使用一个组件。
在组件目录中创建一个名为Detail.vue的文件。 这个组件不会做任何特殊的事情 - 它将被用在Hello组件中。
使你的Detail.vue文件就像这样。
#src/components/Detail.vue
<template>
<p class="hello">
<p>This component is imported locally.</p>
</p>
</template>
<script>
export default {
name: 'Detail'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>要在Hello组件中使用它，可以像导入Hello组件一样将其导入。 接下来，把它注册，但这次你不需要使用Vue.component（）构造函数。
你可以使用导出内的组件对象进行注册。将用作元素标记的组件的名称必须作为值传递给对象。 完成后，你现在可以使用元素标记来输出组件。
为了理解这一点，Hello组件应该长这样：
#src/components/Hello.vue
<template>
<p class="hello">
<p>Welcome to TutsPlus {{ name }}</p>
<hr>
<button @click="changeName">Change Display Name</button>
<!-- Detail component is outputted using the name it was registered with -->
<Detail/>
</p>
</template>
<script>
// Importation of Detail component is done
import Detail from './Detail'
export default {
name: 'HelloWorld',
data () {
return {
name: 'Henry'
}
},
methods: {
changeName () {
this.name = 'Mark'
}
},
/**
* Detail component gets registered locally.
* This component can only be used inside the Hello component
* The value passed is the name of the component
*/
components: {
Detail
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>刷新页面以查看新页面。
范围组件样式
Vue.js允许你为组件提供全局和本地样式。是什么意思呢？在某些情况下，你希望组件中的某些元素与另一个组件中的对应元素的样式不同。Vue.js能够帮助你。
一个很好的例子是你刚刚建立的小应用程序。App.vue中的样式是全局的; 这怎么可能？ 打开你的App.vue，风格部分看起来像这样。
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>这与Detail.vue不同，看起来像这样。
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>将 scoped 添加到样式标签是造成这个差别的原因。 尝试通过删除 scoped 来编辑一种组件样式，你会看到这是如何运作的。
结论
虽然这个文章有点长，但是我相信你会喜欢它。
现在你知道如何有效地使用组件，并且了解如何在现有应用程序中构建组件。在使用vue-cli时，你还可以在本地和全局范围内创建和使用组件。当你想为一个组件使用特定的风格时，你已经看到了如何使用scoped来做到这一点。
你现在可以继续构建使用组件的复杂Vue.js应用程序。了解Vue.js允许你重用代码，你的页眉，页脚，登录面板和搜索栏可以用作组件。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 Vue.js의 컴포넌트 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 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)
뜨거운 주제
7710
15
1640
14
1394
52
1288
25
1232
29
Win11에서 관리자 권한을 얻는 방법에 대한 자세한 설명
Mar 08, 2024 pm 03:06 PM
Windows 운영 체제는 세계에서 가장 인기 있는 운영 체제 중 하나이며, 새로운 버전의 Win11이 많은 주목을 받았습니다. Win11 시스템에서 관리자 권한을 얻는 것은 사용자가 시스템에서 더 많은 작업과 설정을 수행할 수 있도록 하는 중요한 작업입니다. 이번 글에서는 Win11 시스템에서 관리자 권한을 얻는 방법과 권한을 효과적으로 관리하는 방법을 자세히 소개하겠습니다. Win11 시스템에서 관리자 권한은 로컬 관리자와 도메인 관리자의 두 가지 유형으로 나뉩니다. 로컬 관리자는 로컬 컴퓨터에 대한 모든 관리 권한을 갖습니다.
Oracle SQL의 나누기 연산에 대한 자세한 설명
Mar 10, 2024 am 09:51 AM
OracleSQL의 나눗셈 연산에 대한 자세한 설명 OracleSQL에서 나눗셈 연산은 두 숫자를 나눈 결과를 계산하는 데 사용되는 일반적이고 중요한 수학 연산입니다. 나누기는 데이터베이스 쿼리에 자주 사용되므로 OracleSQL에서 나누기 작업과 사용법을 이해하는 것은 데이터베이스 개발자에게 필수적인 기술 중 하나입니다. 이 기사에서는 OracleSQL의 나누기 작업 관련 지식을 자세히 설명하고 독자가 참고할 수 있는 특정 코드 예제를 제공합니다. 1. OracleSQL의 Division 연산
PHP 모듈로 연산자의 역할과 사용법에 대한 자세한 설명
Mar 19, 2024 pm 04:33 PM
PHP의 모듈로 연산자(%)는 두 숫자를 나눈 나머지를 구하는 데 사용됩니다. 이 글에서는 모듈로 연산자의 역할과 사용법을 자세히 논의하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다. 1. 모듈로 연산자의 역할 수학에서는 정수를 다른 정수로 나누면 몫과 나머지가 나옵니다. 예를 들어 10을 3으로 나누면 몫은 3이고 나머지는 1입니다. 이 나머지를 얻기 위해 모듈로 연산자가 사용됩니다. 2. 모듈러스 연산자의 사용법 PHP에서는 모듈러스를 나타내기 위해 % 기호를 사용합니다.
리눅스 시스템콜 system() 함수에 대한 자세한 설명
Feb 22, 2024 pm 08:21 PM
Linux 시스템 호출 system() 함수에 대한 자세한 설명 시스템 호출은 Linux 운영 체제에서 매우 중요한 부분으로 시스템 커널과 상호 작용하는 방법을 제공합니다. 그 중 system() 함수는 흔히 사용되는 시스템 호출 함수 중 하나이다. 이 기사에서는 system() 함수의 사용법을 자세히 소개하고 해당 코드 예제를 제공합니다. 시스템 호출의 기본 개념 시스템 호출은 사용자 프로그램이 운영 체제 커널과 상호 작용하는 방법입니다. 사용자 프로그램은 시스템 호출 기능을 호출하여 운영 체제를 요청합니다.
Linux 컬 명령에 대한 자세한 설명
Feb 21, 2024 pm 10:33 PM
Linux의 컬 명령에 대한 자세한 설명 요약: 컬은 서버와의 데이터 통신에 사용되는 강력한 명령줄 도구입니다. 이 글에서는 컬 명령어의 기본적인 사용법을 소개하고, 독자들이 명령어를 더 잘 이해하고 적용할 수 있도록 실제 코드 예제를 제공할 것입니다. 1. 컬이란 무엇인가? 컬은 다양한 네트워크 요청을 보내고 받는 데 사용되는 명령줄 도구입니다. HTTP, FTP, TELNET 등과 같은 다중 프로토콜을 지원하며 파일 업로드, 파일 다운로드, 데이터 전송, 프록시와 같은 풍부한 기능을 제공합니다.
Promise.resolve()에 대해 자세히 알아보세요.
Feb 18, 2024 pm 07:13 PM
Promise.resolve()에 대한 자세한 설명에는 특정 코드 예제가 필요합니다. Promise는 비동기 작업을 처리하기 위한 JavaScript의 메커니즘입니다. 실제 개발에서는 순서대로 실행해야 하는 일부 비동기 작업을 처리해야 하는 경우가 종종 있으며, 이행된 Promise 객체를 반환하기 위해 Promise.resolve() 메서드가 사용됩니다. Promise.resolve()는 Promise 클래스의 정적 메서드입니다.
C 언어 학습 경로에 대한 상세한 분석
Feb 18, 2024 am 10:38 AM
소프트웨어 개발 분야에서 널리 사용되는 프로그래밍 언어로서 C 언어는 많은 초보 프로그래머가 가장 먼저 선택하는 언어입니다. C 언어를 배우면 프로그래밍에 대한 기본 지식을 쌓을 수 있을 뿐만 아니라 문제 해결 능력과 사고력도 향상될 수 있습니다. 이 기사에서는 초보자가 학습 과정을 더 잘 계획하는 데 도움이 되는 C 언어 학습 로드맵을 자세히 소개합니다. 1. 기본 문법 배우기 C 언어를 배우기 전에 먼저 C 언어의 기본 문법 규칙을 이해해야 합니다. 여기에는 변수 및 데이터 유형, 연산자, 제어문(예: if 문,
numpy 버전 쿼리 방법에 대한 자세한 설명
Jan 19, 2024 am 08:20 AM
Numpy는 풍부한 배열 작업 기능과 도구를 제공하는 Python 과학 컴퓨팅 라이브러리입니다. Numpy 버전을 업그레이드할 때 호환성을 보장하기 위해 현재 버전을 쿼리해야 합니다. 이 글에서는 Numpy 버전 쿼리 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다. 방법 1: Python 코드를 사용하여 Numpy 버전 쿼리 다음은 구현 방법 및 샘플 코드입니다. importnumpyasnpprint(np)
