首頁(yè)技術(shù)文章正文

vue組件由哪幾部分構(gòu)成?

更新時(shí)間:2021-10-25 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

vue 是一個(gè)完全支持組件化開(kāi)發(fā)的框架。vue 中規(guī)定組件的后綴名是 .vue。之前接觸到的 App.vue 文件本質(zhì) 上就是一個(gè) vue 的組件。每個(gè) .vue 組件都由 3 部分構(gòu)成,分別是:
? template -> 組件的模板結(jié)構(gòu)
? script -> 組件的 JavaScript 行為
? style -> 組件的樣式
其中,每個(gè)組件中必須包含 template 模板結(jié)構(gòu),而 script 行為和 style 樣式是可選的組成部分。vue 規(guī)定:每個(gè)組件對(duì)應(yīng)的模板結(jié)構(gòu),需要定義到 <template> 節(jié)點(diǎn)中。

<template>
<!-- 當(dāng)前組件的DOM結(jié)構(gòu),需要定義到template 標(biāo)簽的內(nèi)部
</ template>
注意:<template> 是 vue 提供的容器標(biāo)簽,只起到包裹性質(zhì)的作用,它不會(huì)被渲染為真正的 DOM 元素。

在 template 中使用指令
在組件的 <template> 節(jié)點(diǎn)中,支持使用前面所學(xué)的指令語(yǔ)法,來(lái)輔助開(kāi)發(fā)者渲染當(dāng)前組件的 DOM 結(jié)構(gòu)。代碼示例如下:
<template>
<h1>這是App根組件</h1>
<!--使用{{ }}插值表達(dá)式-->
<p>生成一個(gè)隨機(jī)數(shù)字: {{ (Math. random() * 10). toFixed(2) }}</p>
<!-- 使用v-bind 屬性綁定-->
<p :title="new Date(). tol ocaleTimeString()">我在黑馬程序員學(xué)習(xí)vue. js</p>
<!--屬性v-on事件綁定
<button @click=”showInfo">按鈕</button>
</template>
在 template 中定義根節(jié)點(diǎn)
在 vue 2.x 的版本中,<template> 節(jié)點(diǎn)內(nèi)的 DOM 結(jié)構(gòu)僅支持單個(gè)根節(jié)點(diǎn):
<template> 
<!-- vue 2.x 中,template 節(jié)點(diǎn)內(nèi)的所有元素,最外層"必須有“唯一的根節(jié)點(diǎn)進(jìn)行包裹,否則報(bào)錯(cuò)-->
<div>
<h1>這是App根組件</h1>
<h2>這是副標(biāo)題</h2>
</div> 
</ template>
但是,在 vue 3.x 的版本中,<template> 中支持定義多個(gè)根節(jié)點(diǎn):
stemplate>
<!--這是包含多個(gè)根節(jié)點(diǎn)的template 結(jié)構(gòu),因?yàn)閔1標(biāo)簽和h2標(biāo)簽外層沒(méi)有包裹性質(zhì)的根元素-->
<h1>這是App根組件</h1>
<h2>這是副標(biāo)題</h2>
</template>
組件的 script 節(jié)點(diǎn)
vue 規(guī)定:組件內(nèi)的 <script> 節(jié)點(diǎn)是可選的,開(kāi)發(fā)者可以在 < script> 節(jié)點(diǎn)中封裝組件的 JavaScript 業(yè)務(wù)邏輯。< script > 節(jié)點(diǎn)的基本結(jié)構(gòu)如下:
<script>
//今后,組件相關(guān)的data 數(shù)據(jù)、methods 方法等,
//都需要定義到export default 所導(dǎo)出的對(duì)象中。
export default {}
</script>
script 中的 name 節(jié)點(diǎn)
可以通過(guò) name 節(jié)點(diǎn)為當(dāng)前組件定義一個(gè)名稱,代碼如下:
<script>
export default {
// name 屬性指向的是當(dāng)前組件的名稱(建議:每個(gè)單詞的首字母大寫(xiě))
name: 'MyApp',
}
</script>
在使用 vue-devtools 進(jìn)行項(xiàng)目調(diào)試的時(shí)候,自定義的組件名稱可以清晰的區(qū)分每個(gè)組件:

vue組件的構(gòu)成部分

script 中的data節(jié)點(diǎn)
vue 組件渲染期間需要用到的數(shù)據(jù),可以定義在data 節(jié)點(diǎn)中:

<script>
export default {
//組件的名稱
name:
'MyApp',
//組件的數(shù)據(jù)(data方法中return出去的對(duì)象,就是當(dāng)前組件渲染期間需要用到的數(shù)據(jù)對(duì)象)
data() {
return {
username: '哇哈哈 ',
}
 },
 }
</script>

其中組件中的data 必須是函數(shù),vue 規(guī)定:組件中的data 必須是一個(gè)函數(shù),不能直接指向一個(gè)數(shù)據(jù)對(duì)象。因此在組件中定義data 數(shù)據(jù)節(jié)點(diǎn)時(shí),下面的方式是錯(cuò)誤的:

data: { //組件中,不能直接讓data 指向一個(gè)數(shù)據(jù)對(duì)象(會(huì)報(bào)錯(cuò))
count: 0
}

script 中的methods節(jié)點(diǎn)
組件中的事件處理函數(shù),必須定義到methods 節(jié)點(diǎn)中,示例代碼如下:

export default {
name :' MyApp', //組件的名稱
data() { //組件的數(shù)據(jù)
return {
count: 0,
}
},
methods: {    //處理函數(shù)
addCount() { 
this . count++
},
},
}

組件的style 節(jié)點(diǎn)
vue 規(guī)定:組件內(nèi)的<style> 節(jié)點(diǎn)是可選的,開(kāi)發(fā)者可以在<style> 節(jié)點(diǎn)中編寫(xiě)樣式美化當(dāng)前組件的UI 結(jié)構(gòu)。<script > 節(jié)點(diǎn)的基本結(jié)構(gòu)如下:

<style>
h1{
font -weight: normal;
</style>

其中<style> <="" font="">標(biāo)簽上的lang="css" 屬性是可選的,它表示所使用的樣式語(yǔ)言。默認(rèn)只支持普通的css 語(yǔ)法,可選值還有l(wèi)ess、scss 等。
多學(xué)一招:讓style 中支持less 語(yǔ)法
如果希望使用less 語(yǔ)法編寫(xiě)組件的style 樣式,可以按照如下兩個(gè)步驟進(jìn)行配置:
①運(yùn)行npm install less -D 命令安裝依賴包,從而提供less 語(yǔ)法的編譯支持
②在<style> <="" font="">標(biāo)簽上添加lang="less" 屬性,即可使用less 語(yǔ)法編寫(xiě)組件的樣式

<style>
h1{
font-weight: normal;
i  {
color: red;
font-style: normal;
}
</style>





猜你喜歡:

Vue中如何監(jiān)控某個(gè)屬性值的變化?

Vue3中Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的優(yōu)勢(shì)?

Vue.js 3.0教程:1小時(shí)從入門(mén)到實(shí)戰(zhàn)開(kāi)發(fā)

黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!