本篇文章和大家了解一下vue組件的組成部分有幾個。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。
創(chuàng)新互聯(lián)公司是專業(yè)的壽光網(wǎng)站建設(shè)公司,壽光接單;提供網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行壽光網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
vue組件由3部分組成:1、template,設(shè)置組件的模板結(jié)構(gòu);2、script,設(shè)置組件的JavaScript行為;3、style,設(shè)置組件的樣式。每個組件中必須包含template模板結(jié)構(gòu),而script行為和style樣式是可選的組成部分;“”是vue提供的容器標簽,只起到包裹性質(zhì)的作用,它不會被渲染為真正的DOM元素。”是vue提供的容器標簽,只起到包裹性質(zhì)的作用,它不會被渲染為真正的DOM元素。
vue 是一個完全支持組件化開發(fā)的框架。vue 中規(guī)定組件的后綴名是 .vue。之前接觸到的 App.vue 文件本質(zhì) 上就是一個 vue 的組件。每個 .vue 組件都由 3 部分構(gòu)成,分別是:
template -> 組件的模板結(jié)構(gòu)
script -> 組件的 JavaScript 行為
style -> 組件的樣式
其中,每個組件中必須包含 template 模板結(jié)構(gòu),而 script 行為和 style 樣式是可選的組成部分。vue 規(guī)定:每個組件對應(yīng)的模板結(jié)構(gòu),需要定義到 節(jié)點中。
生成一個隨機數(shù)字: {{ (Math. random() * 10). toFixed(2) }}
我在黑馬程序員學(xué)習vue. js
template>這是App根組件
這是副標題
但是,在 vue 3.x 的版本中, 中支持定義多個根節(jié)點:
這是App根組件
這是副標題
組件的 script 節(jié)點
vue 規(guī)定:組件內(nèi)的
script 中的 name 節(jié)點
可以通過 name 節(jié)點為當前組件定義一個名稱,代碼如下:
在使用 vue-devtools 進行項目調(diào)試的時候,自定義的組件名稱可以清晰的區(qū)分每個組件:
script 中的data節(jié)點
vue 組件渲染期間需要用到的數(shù)據(jù),可以定義在data 節(jié)點中:
其中組件中的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)的
其中
以上就是vue組件的組成部分有幾個的簡略介紹,當然詳細使用上面的不同還得要大家自己使用過才領(lǐng)會。如果想了解更多,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦!