本篇文章和大家了解一下vue組件的組成部分有幾個。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

創(chuàng)新互聯(lián)公司是專業(yè)的壽光網(wǎng)站建設公司，壽光接單;提供網(wǎng)站制作、成都網(wǎng)站建設,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行壽光網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

vue組件由3部分組成：1、template，設置組件的模板結(jié)構；2、script，設置組件的JavaScript行為；3、style，設置組件的樣式。每個組件中必須包含template模板結(jié)構，而script行為和style樣式是可選的組成部分；“<template>”是vue提供的容器標簽，只起到包裹性質(zhì)的作用，它不會被渲染為真正的DOM元素。

vue 是一個完全支持組件化開發(fā)的框架。vue 中規(guī)定組件的后綴名是 .vue。之前接觸到的 App.vue 文件本質(zhì) 上就是一個 vue 的組件。每個 .vue 組件都由 3 部分構成，分別是：

• template -> 組件的模板結(jié)構

• script -> 組件的 JavaScript 行為

• style -> 組件的樣式

其中，每個組件中必須包含 template 模板結(jié)構，而 script 行為和 style 樣式是可選的組成部分。vue 規(guī)定：每個組件對應的模板結(jié)構，需要定義到 <template> 節(jié)點中。

<template>
<!-- 當前組件的DOM結(jié)構，需要定義到template 標簽的內(nèi)部
</ template>

注意：<template> 是 vue 提供的容器標簽，只起到包裹性質(zhì)的作用，它不會被渲染為真正的 DOM 元素。

在 template 中使用指令

在組件的 <template> 節(jié)點中，支持使用前面所學的指令語法，來輔助開發(fā)者渲染當前組件的 DOM 結(jié)構。代碼示例如下：

<template>
<h2>這是App根組件</h2>
<!--使用{{ }}插值表達式-->
<p>生成一個隨機數(shù)字: {{ (Math. random() * 10). toFixed(2) }}</p>
<!-- 使用v-bind 屬性綁定-->
<p :title="new Date(). tol ocaleTimeString()">我在黑馬程序員學習vue. js</p>
<!--屬性v-on事件綁定
<button @click=”showInfo">按鈕</button>
</template>

在 template 中定義根節(jié)點

在 vue 2.x 的版本中，<template> 節(jié)點內(nèi)的 DOM 結(jié)構僅支持單個根節(jié)點：

<template> 
<!-- vue 2.x 中，template 節(jié)點內(nèi)的所有元素，最外層"必須有“唯一的根節(jié)點進行包裹，否則報錯-->
<div>
<h2>這是App根組件</h2>
<h3>這是副標題</h3>
</div> 
</ template>

但是，在 vue 3.x 的版本中，<template> 中支持定義多個根節(jié)點：

<template>
<!--這是包含多個根節(jié)點的template 結(jié)構，因為h2標簽和h3標簽外層沒有包裹性質(zhì)的根元素-->
<h2>這是App根組件</h2>
<h3>這是副標題</h3>
</template>

組件的 script 節(jié)點

vue 規(guī)定：組件內(nèi)的 <script> 節(jié)點是可選的，開發(fā)者可以在 < script> 節(jié)點中封裝組件的 JavaScript 業(yè)務邏輯。< script > 節(jié)點的基本結(jié)構如下：

<script>
//今后，組件相關的data 數(shù)據(jù)、methods 方法等，
//都需要定義到export default 所導出的對象中。
export default {}
</script>

script 中的 name 節(jié)點

可以通過 name 節(jié)點為當前組件定義一個名稱，代碼如下：

<script>
export default {
// name 屬性指向的是當前組件的名稱(建議:每個單詞的首字母大寫)
name: 'MyApp'，
}
</script>

在使用 vue-devtools 進行項目調(diào)試的時候，自定義的組件名稱可以清晰的區(qū)分每個組件：

script 中的data節(jié)點

vue 組件渲染期間需要用到的數(shù)據(jù)，可以定義在data 節(jié)點中：

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

其中組件中的data 必須是函數(shù)，vue 規(guī)定：組件中的data 必須是一個函數(shù)，不能直接指向一個數(shù)據(jù)對象。因此在組件中定義data 數(shù)據(jù)節(jié)點時，下面的方式是錯誤的：

data: { //組件中，不能直接讓data 指向一個數(shù)據(jù)對象(會報錯)
count: 0
}

script 中的methods節(jié)點

組件中的事件處理函數(shù)，必須定義到methods 節(jié)點中，示例代碼如下：

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

組件的style 節(jié)點

vue 規(guī)定：組件內(nèi)的<style> 節(jié)點是可選的，開發(fā)者可以在<style> 節(jié)點中編寫樣式美化當前組件的UI 結(jié)構。<script > 節(jié)點的基本結(jié)構如下：

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

其中<style> <="" font="">標簽上的lang="css" 屬性是可選的，它表示所使用的樣式語言。默認只支持普通的css 語法，可選值還有l(wèi)ess、scss 等。

多學一招：讓style 中支持less 語法

如果希望使用less 語法編寫組件的style 樣式，可以按照如下兩個步驟進行配置：

①運行npm install less -D 命令安裝依賴包，從而提供less 語法的編譯支持

②在<style> <="" font="">標簽上添加lang="less" 屬性，即可使用less 語法編寫組件的樣式

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

以上就是vue組件的組成部分有幾個的簡略介紹，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！

本文標題：vue組件的組成部分有幾個
分享鏈接：http://chinadenli.net/article6/gehpog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、做網(wǎng)站、面包屑導航、網(wǎng)站營銷、微信公眾號、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)