解析Vue.js中的組件
介紹
在使用Vue.js時(shí)，Vue.js組件非常重要。在本教程中，我們將深入研究Vue.js組件，理解基礎(chǔ)知識(shí)并將其應(yīng)用于應(yīng)用程序。讓我們開(kāi)始吧。
什么是組件？
組件使我們能夠?qū)?復(fù)雜的 應(yīng)用程序分解成小塊。例如，典型的Web應(yīng)用程序?qū)⒕哂袠?biāo)題，側(cè)邊欄，內(nèi)容和頁(yè)腳等部分。
Vue.js允許我們將每個(gè)部分分解成單獨(dú)的模塊化代碼，稱(chēng)為組件。這些組件可以擴(kuò)展，然后附加到 你 正在處理的應(yīng)用程序。 使用 組件是 在 整個(gè)應(yīng)用程序 編寫(xiě) 中重用代碼的好方法。
假設(shè) 你 有一個(gè)博客應(yīng)用程序，并且 你 想要顯示 一列 博客 帖子 。使用Vue組件，你可以做：
<blog-post></blog-post>
Vue處理剩下的事情。
創(chuàng)建一個(gè)將Vue實(shí)例掛載到DOM元素的簡(jiǎn)單HTML頁(yè)面。 你 將使用它來(lái)了解組件。以下是HTML頁(yè)面 樣例 ：
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- Div where Vue instance will be mounted -->
<div id="app"></div>
<!-- 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 div element
new Vue({
el: '#app',
data: {
domain: 'Tutsplus'
},
template: '<p>Welcome to {{ domain }}</p>
});
</script>
</body>
</html>
在上面，你創(chuàng)建了一個(gè)簡(jiǎn)單的Vue實(shí)例，在代碼中沒(méi)有組件因素。 現(xiàn)在，如果 你 希望歡迎消息出現(xiàn)兩次，那么 你 怎么做？
你的猜測(cè)可能是 讓 div 在 Vue實(shí)例掛載的地方出現(xiàn)兩次。 這是行不通的。 嘗試改變它從 id 到 class ， 你會(huì)得到 ：
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- Div where Vue instance will be mounted -->
<div class="app"></div>
<div class="app"></div>
<!-- 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 div element
new Vue({
el: '.app',
data: {
domain: 'Tutsplus'
},
template: '<p>Welcome to {{ domain }}</p>
});
</script>
</body>
</html>
它仍然不會(huì)工作！
解決這個(gè)問(wèn)題的唯一方法是創(chuàng)建一個(gè)組件。 你如何創(chuàng)建一個(gè)組件？
組件是使用Vue.component（）構(gòu)造函數(shù)創(chuàng)建的。 這個(gè)構(gòu)造函數(shù)有兩個(gè)參數(shù)：你的組件的名字（也可以叫做標(biāo)簽名）和一個(gè)包含組件選項(xiàng)（options）的對(duì)象。
讓我們使用上面的內(nèi)容創(chuàng)建一個(gè)組件。
Vue.component('welcome-message', {
data: function() {
return {
domain: 'Tutsplus'
}
},
template: '<p>Welcome to {{ domain }}</p>'
})
在上面，組件名稱(chēng)被稱(chēng)為welcome-message。 你的組件可以有你選擇的任何名稱(chēng)。 然而重要的是，這個(gè)名字不會(huì)影響任何HTML標(biāo)簽，因?yàn)槟悴幌胫貙?xiě)它。
傳遞給構(gòu)造函數(shù)的options對(duì)象包含數(shù)據(jù)和模板。 在創(chuàng)建組件時(shí)，你的數(shù)據(jù)應(yīng)該是一個(gè)函數(shù)，如上所見(jiàn)。 被保存的數(shù)據(jù)應(yīng)該作為一個(gè)對(duì)象返回。
在沒(méi)有數(shù)據(jù)可以傳遞的情況下，傳遞如下的模板：
Vue.component('welcome-message', {
template: '<p>Welcome to Tutsplus</p>'
})
完成之后，可以通過(guò)使用傳遞給構(gòu)造函數(shù)的名稱(chēng)將其當(dāng)作常規(guī)HTML元素來(lái)在應(yīng)用程序中使用組件。 它被這樣調(diào)用：<welcome-message> </ welcome-message>。
要多次輸出模板，可以根據(jù)需要多次調(diào)用組件，如下所示。
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- Div where Vue instance will be mounted -->
<div id="app">
<welcome-message></welcome-message>
<welcome-message></welcome-message>
<welcome-message></welcome-message>
<welcome-message></welcome-message>
</div>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<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 div element
new Vue({
el: '#app'
});
</script>
</body>
</html>
這樣一來(lái)，歡迎消息將顯示四次。
將數(shù)據(jù)存儲(chǔ)在組件中
上面我提到數(shù)據(jù)必須是一個(gè)函數(shù)，它所包含的信息必須作為一個(gè)對(duì)象返回。 為什么這樣？
當(dāng)返回的數(shù)據(jù)不是對(duì)象時(shí)，使用該數(shù)據(jù)的組件共享相同的源：共享數(shù)據(jù)。 因此，一個(gè)組件的數(shù)據(jù)變化會(huì)影響另一個(gè)組件。 當(dāng)數(shù)據(jù)作為對(duì)象返回時(shí)，這是不一樣的。
看看這是如何實(shí)際工作是很重要的。 首先，讓我們看看數(shù)據(jù)作為對(duì)象返回的情況。
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- Div where Vue instance will be mounted -->
<div id="app">
<welcome-message></welcome-message>
<welcome-message></welcome-message>
</div>
<!-- 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 div element
new Vue({
el: '#app'
});
</script>
</body>
</html>
你能猜到上面發(fā)生了什么嗎？
有兩個(gè)組件，并且這兩個(gè)組件共享相同的數(shù)據(jù)源，因?yàn)閿?shù)據(jù)不作為對(duì)象返回。 你怎么證明我是對(duì)的？ 當(dāng)從瀏覽器查看上述頁(yè)面時(shí)，你將看到一個(gè)組件的更改會(huì)導(dǎo)致另一個(gè)組件的數(shù)據(jù)發(fā)生更改。那么它應(yīng)該是怎樣的呢？
像這樣：
<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
<!-- Div where Vue instance will be mounted -->
<div id="app">
<welcome-message></welcome-message>
<welcome-message></welcome-message>
</div>
<!-- Vue.js is included in your page via CDN -->
<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('welcome-message', {
data: function() {
return {
name: 'Henry'
}
},
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 div element
new Vue({
el: '#app'
});
</script>
</body>
</html>
這里的數(shù)據(jù)是作為一個(gè)對(duì)象返回的，一個(gè)組件的改變不會(huì)影響另一個(gè)組件。 該功能是針對(duì)單個(gè)組件執(zhí)行的。 在構(gòu)建應(yīng)用程序時(shí)，不要忘記這一點(diǎn)，這很重要。
創(chuàng)建和使用組件
使用到目前為止學(xué)到的內(nèi)容，讓我們使用 vue -cli 從頭開(kāi)始一個(gè)新的Vue.js項(xiàng)目來(lái)實(shí)現(xiàn)它。 如果你的機(jī)器上沒(méi)有安裝 vue -cli ，你可以通過(guò)運(yùn)行：
npm install -g vue-cli
開(kāi)始你的新的Vue.js項(xiàng)目：
vue init webpack vue-component-app
導(dǎo)航到你的應(yīng)用程序，安裝依賴(lài)關(guān)系，并使用下面的命令運(yùn)行你的開(kāi)發(fā)服務(wù)器。
cd vue-component-app npm install npm run dev
首先，你將重命名HelloWorld組件，這個(gè)組件是你將應(yīng)用程序初始化為Hello.vue時(shí)創(chuàng)建的組件。然后你將注冊(cè)這個(gè)組件作為一個(gè)全局組件在你的應(yīng)用程序中使用。
所以你的Hello組件應(yīng)該看起來(lái)像這樣。
#src/components/Hello.vue
<template>
<div class="hello">
<p>Welcome to TutsPlus {{ name }}</p>
<hr>
<button @click="changeName">Change Display Name</button>
</div>
</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>
你有歡迎文本顯示歡迎消息和作為數(shù)據(jù)傳遞的名稱(chēng)。 當(dāng)點(diǎn)擊歡迎消息下方的按鈕時(shí)，將調(diào)用changeName方法。 名字將從亨利改為馬克。
要全局使用此組件，必須被注冊(cè)。你能猜到應(yīng)該在哪里完成這個(gè)操作嗎？如果你說(shuō)main.js，恭喜你，答對(duì)了！
要注冊(cè)一個(gè)組件，可以導(dǎo)入它，然后使用Vue.component（）構(gòu)造函數(shù)進(jìn)行設(shè)置。自己動(dòng)手試試。
我敢打賭，這個(gè)對(duì)你來(lái)說(shuō)小菜一碟。以下是main.js文件中的內(nèi)容。
#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 }
})
這里除了導(dǎo)入你的Hello組件的那一行之外，沒(méi)有什么新東西。然后使用構(gòu)造函數(shù)注冊(cè)該組件。最后，對(duì)于這部分，組件需要使用你輸入的組件名稱(chēng)來(lái)顯示。在這種情況下，組件是顯示名稱(chēng)。這將在你的App.vue文件中完成。
打開(kāi)src / App.vue并使其看起來(lái)像這樣。
#src/App.vue
<template>
<div id= "app" >
<display-name/>
</div>
</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>
打開(kāi)服務(wù)器，打開(kāi)http：// localhost：8080。 點(diǎn)擊按鈕，名稱(chēng)應(yīng)該改變。
我們來(lái)看看如何在本地使用一個(gè)組件。
在組件目錄中創(chuàng)建一個(gè)名為Detail.vue的文件。 這個(gè)組件不會(huì)做任何特殊的事情 - 它將被用在Hello組件中。
使你的Detail.vue文件就像這樣。
#src/components/Detail.vue
<template>
<div class="hello">
<p>This component is imported locally.</p>
</div>
</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組件中使用它，可以像導(dǎo)入Hello組件一樣將其導(dǎo)入。 接下來(lái)，把它注冊(cè)，但這次你不需要使用Vue.component（）構(gòu)造函數(shù)。
你可以使用導(dǎo)出內(nèi)的組件對(duì)象進(jìn)行注冊(cè)。將用作元素標(biāo)記的組件的名稱(chēng)必須作為值傳遞給對(duì)象。 完成后，你現(xiàn)在可以使用元素標(biāo)記來(lái)輸出組件。
為了理解這一點(diǎn)，Hello組件應(yīng)該長(zhǎng)這樣：
#src/components/Hello.vue
<template>
<div 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/>
</div>
</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>
刷新頁(yè)面以查看新頁(yè)面。
范圍組件樣式
Vue.js允許你為組件提供全局和本地樣式。是什么意思呢？在某些情況下，你希望組件中的某些元素與另一個(gè)組件中的對(duì)應(yīng)元素的樣式不同。Vue.js能夠幫助你。
一個(gè)很好的例子是你剛剛建立的小應(yīng)用程序。App.vue中的樣式是全局的; 這怎么可能？ 打開(kāi)你的App.vue，風(fēng)格部分看起來(lái)像這樣。
<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不同，看起來(lái)像這樣。
<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 添加到樣式標(biāo)簽是造成這個(gè)差別的原因。 嘗試通過(guò)刪除 scoped 來(lái)編輯一種組件樣式，你會(huì)看到這是如何運(yùn)作的。
結(jié)論
雖然這個(gè)文章有點(diǎn)長(zhǎng)，但是我相信你會(huì)喜歡它。
現(xiàn)在你知道如何有效地使用組件，并且了解如何在現(xiàn)有應(yīng)用程序中構(gòu)建組件。在使用vue-cli時(shí)，你還可以在本地和全局范圍內(nèi)創(chuàng)建和使用組件。當(dāng)你想為一個(gè)組件使用特定的風(fēng)格時(shí)，你已經(jīng)看到了如何使用scoped來(lái)做到這一點(diǎn)。
你現(xiàn)在可以繼續(xù)構(gòu)建使用組件的復(fù)雜Vue.js應(yīng)用程序。了解Vue.js允許你重用代碼，你的頁(yè)眉，頁(yè)腳，登錄面板和搜索欄可以用作組件。
總結(jié)
以上所述是小編給大家介紹的Vue.js中的組件，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- Vue 組件注冊(cè)全解析
- Vue組件生命周期運(yùn)行原理解析
- Vue實(shí)現(xiàn)圖片輪播組件思路及實(shí)例解析
- Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析
- VUE注冊(cè)全局組件和局部組件過(guò)程解析
- vue 使用高德地圖vue-amap組件過(guò)程解析
- 微信小程序動(dòng)畫(huà)組件使用解析，類(lèi)似vue，且更強(qiáng)大
- 解析vue路由異步組件和懶加載案例
- Vue中強(qiáng)制組件重新渲染的正確方法
- vuex中遇到的坑,vuex數(shù)據(jù)改變,組件中頁(yè)面不渲染操作
- Vue切換Tab動(dòng)態(tài)渲染組件的操作
- vue內(nèi)置組件component--通過(guò)is屬性動(dòng)態(tài)渲染組件操作
- Vue強(qiáng)制組件重新渲染的方法討論
- vue組件是如何解析及渲染的？
相關(guān)文章
使用vue-infinite-scroll實(shí)現(xiàn)無(wú)限滾動(dòng)效果
vue-infinite-scroll插件可以無(wú)限滾動(dòng)實(shí)現(xiàn)加載更多，其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。這篇文章主要介紹了用vue-infinite-scroll實(shí)現(xiàn)無(wú)限滾動(dòng)效果,需要的朋友可以參考下2018-06-06
vue中img src 動(dòng)態(tài)加載本地json的圖片路徑寫(xiě)法
這篇文章主要介紹了vue中的img src 動(dòng)態(tài)加載本地json的圖片路徑寫(xiě)法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細(xì)介紹了vue源碼之首次渲染過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
Vue?3中的Hooks函數(shù)是一種用于在組件中共享可復(fù)用邏輯的方式，簡(jiǎn)單來(lái)說(shuō)，就是將單獨(dú)功能的js代碼抽離出來(lái)，?加工成公共函數(shù)，從而達(dá)到邏輯復(fù)用，下面小編就來(lái)和大家聊聊Hooks函數(shù)的使用及封裝思想吧2023-06-06
vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)ToDoList簡(jiǎn)單實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽(tīng)物理返回操作
這篇文章主要介紹了vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽(tīng)物理返回操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
關(guān)于vue-admin-element中的動(dòng)態(tài)加載路由
這篇文章主要介紹了關(guān)于vue-admin-element的動(dòng)態(tài)加載路由，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue前端項(xiàng)目打包成Docker鏡像并運(yùn)行的實(shí)現(xiàn)
這篇文章主要介紹了vue前端項(xiàng)目打包成Docker鏡像并運(yùn)行的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中實(shí)現(xiàn)先請(qǐng)求數(shù)據(jù)再渲染dom分享
下面小編就為大家分享一篇vue中實(shí)現(xiàn)先請(qǐng)求數(shù)據(jù)再渲染dom分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vuejs 切換導(dǎo)航條高亮(路由菜單高亮)的方法示例
這篇文章主要介紹了vuejs 切換導(dǎo)航條高亮路由高亮的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05