成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue組件定義

imtianx / 1697人閱讀

摘要：組件結(jié)構(gòu)基礎(chǔ)知識(shí)屬性屬性維護(hù)一個(gè)組件內(nèi)部狀態(tài)，其余組件正常情況下不可見(jiàn)。方案選擇單文件一行的簡(jiǎn)單結(jié)構(gòu)常規(guī)的選擇前邊兩種方案解決不了時(shí)候的選擇靈活性高注意不論選擇哪一種方案，定義模板時(shí)，一定要有一個(gè)非標(biāo)簽元素作根，有且僅有一個(gè)。

簡(jiǎn)介

組件是可復(fù)用的 Vue 實(shí)例。

本質(zhì)上是一個(gè)對(duì)象，該對(duì)象包含data、computed、watch、methods、filters以及生命周期鉤子等成員屬性。

組件結(jié)構(gòu)：

{
  data(){
    return {
      //
    }
  },
  computed:{
    displayName(){
      return "";
    }
  },
  methods:{
    onClickHandler(params){
      // do something
    }
  }
}
基礎(chǔ)知識(shí) data屬性

data屬性維護(hù)一個(gè)組件內(nèi)部狀態(tài)，其余組件正常情況下不可見(jiàn)。

可以通過(guò)props傳遞給子組件；

可以通過(guò)$emit的方式傳遞給父組件；

可以通過(guò)this.$refs.ref.$data在mounted生命周期內(nèi)獲取子組件的內(nèi)部狀態(tài)；

目前不知道如何監(jiān)聽(tīng)其變化；

因?yàn)橛?jì)算屬性computed和偵聽(tīng)屬性watch只能監(jiān)聽(tīng) 響應(yīng)式依賴 的變化，而$refs非響應(yīng)式。

一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù)。

  data選項(xiàng)有兩種定義方式：
  
  一、對(duì)象形式：
  
  ```
  data:{
    //引用該組件的地方，共用一個(gè)狀態(tài)的引用，以至于，只要有一處修改了$data中的某一屬性值，其它引用該組件的地方也跟隨著改變?cè)搶傩灾担ㄆ鋵?shí)，不是跟隨，本來(lái)就是同一個(gè)指向）。
  }
  ```
  
  二、函數(shù)形式：
  
  ```
  data(){
    return {
      //引用該組件的地方，每一個(gè)組件都會(huì)獲得獨(dú)立的引用，互不干擾。
    }
  }
  ```

computed屬性 VS methods屬性 VS filter
區(qū)別 method computed filter
類型 函數(shù) 數(shù)據(jù)變量 函數(shù)
用途 作事件處理函數(shù) 作數(shù)據(jù) 作管道符
作用范圍 組建內(nèi) 組建內(nèi) 組建內(nèi)（局部注冊(cè)）、全局（全局注冊(cè)）
參數(shù) 可以帶參 不帶參（非函） 帶參
返回值 不要求 必須有 必須有
觸發(fā) 交互時(shí)觸發(fā) 在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值 傳入的數(shù)據(jù)變化時(shí)執(zhí)行

注意：

Vue中并不是所有的屬性都是響應(yīng)式的，如$refs無(wú)法監(jiān)聽(tīng)它的變動(dòng)；

組件構(gòu)建的主要區(qū)別在于模板的生成方式。

模板定義方式 template選項(xiàng) 字符串模板

以HTML標(biāo)簽結(jié)構(gòu)組成的字符串；

示例：

{
  template: "
簡(jiǎn)單示例
",
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}
id選擇器指定的模板

以id標(biāo)識(shí)的一段script標(biāo)簽包裹的HTML片段；

示例：

{
  template: "#anchored-heading-template",
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}
render

發(fā)揮JavaScript最大的編程能力，該函數(shù)接收一個(gè)createElement方法作為第一個(gè)參數(shù)用來(lái)創(chuàng)建VNode；

createElement接收三個(gè)參數(shù)：組件根節(jié)點(diǎn)類型、組件配置對(duì)象、子節(jié)點(diǎn)（官方關(guān)于組件配置對(duì)象的說(shuō)明）；

示例：

{
  render: function (createElement) {
    return createElement(
      "h" + this.level,   // tag name 標(biāo)簽名稱
      this.$slots.default // 子組件中的陣列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}
單文件組件

單文件組件將模板、邏輯、樣式在結(jié)構(gòu)上分離，保存在同一個(gè)文件中。
方案選擇
template 單文件 render
一行的簡(jiǎn)單結(jié)構(gòu) 常規(guī)的選擇 前邊兩種方案解決不了時(shí)候的選擇（靈活性高）

注意：

不論選擇哪一種方案，定義模板時(shí)，一定要有一個(gè)非template標(biāo)簽元素作根DOM，有且僅有一個(gè)。

組件注冊(cè)方式 局部注冊(cè)

以上幾種方案定義的組件本質(zhì)上都是一個(gè)對(duì)象，獲取該對(duì)象（假設(shè)變量名為T(mén)abBar），要求只在另一個(gè)組件(假設(shè)變量名為App)內(nèi)使用：

App組件的配置對(duì)象：

{
  components:{
    "tab-bar": TabBar,
  }
}

這樣就是局部注冊(cè)，該組件TabBar只能在App模板中使用，其它組件對(duì)TabBar不可見(jiàn)。

全局注冊(cè)

以上幾種方案定義的組件本質(zhì)上都是一個(gè)對(duì)象，獲取該對(duì)象（假設(shè)變量名為T(mén)abBar），要求項(xiàng)目?jī)?nèi)任何組件可使用：

一般在項(xiàng)目的入口文件（如：腳手架搭建項(xiàng)目的main.js）中：

Vue.component("tab-bar",TabBar);

這樣就是全局注冊(cè)，該組件TabBar能在整個(gè)項(xiàng)目?jī)?nèi)使用，所有組件對(duì)TabBar可見(jiàn)。

生命周期鉤子

以下用自己的語(yǔ)言將生命周期鉤子表述一下，如果有不對(duì)的地方，請(qǐng)校正：

beforeCreate

在這個(gè)時(shí)候，生命周期函數(shù)已經(jīng)準(zhǔn)備好。

組件實(shí)例已經(jīng)構(gòu)建，但本組件實(shí)例的數(shù)據(jù)、方法還沒(méi)有注入；

可以在各個(gè)生命周期內(nèi)通過(guò)組件實(shí)例this調(diào)用根實(shí)例上注入的$router、$store等對(duì)象。

可以在本生命周期內(nèi)進(jìn)行數(shù)據(jù)初始化；

created

在這個(gè)時(shí)候，當(dāng)前組件實(shí)例this上的屬性（$data、props、$methods...）已經(jīng)注入綁定，可以調(diào)用本實(shí)例上的成員屬性；

beforeMount

在進(jìn)入本生命周期之前，會(huì)進(jìn)行以下判斷：

是否有el選項(xiàng)（指定掛載目標(biāo)）：

有el選項(xiàng)的是根實(shí)例；

沒(méi)有el選項(xiàng)的是非根實(shí)例（默認(rèn)掛載元素為組件調(diào)用的位置）；

是否有template選項(xiàng)：

有template選項(xiàng)的是內(nèi)聯(lián)模板；

沒(méi)有template選項(xiàng)的是單文件組件；

個(gè)人覺(jué)得，還有render選項(xiàng)的判斷；

最終這些模板都會(huì)轉(zhuǎn)換為render函數(shù)進(jìn)行渲染?。?！

這個(gè)生命周期在解析模板，不知道有什么實(shí)際用途。

mounted

在本生命周期之前，已經(jīng)將模板渲染為真實(shí)DOM，其中vm.$el為組件實(shí)例的根DOM元素；

本生命周期是初始化第三方插件的場(chǎng)所；

必要時(shí)候，可以在本生命周期內(nèi)對(duì)DOM進(jìn)行操作；

本生命周期是獲取this.$refs.ref的場(chǎng)所；

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96589.html

相關(guān)文章

  • vue總結(jié)系列--組件化

    摘要：觸發(fā)事件可以攜帶數(shù)據(jù)，這些數(shù)據(jù)被用于傳遞給綁定了事件的其它組件的回調(diào)函數(shù)上，進(jìn)而被傳遞給其它組件。父組件可以在回調(diào)函數(shù)里做任何事情，頗有靈活性。一般情況下，父組件會(huì)在回調(diào)函數(shù)中更新自己的狀態(tài)數(shù)據(jù)。 上一篇博文梳理了vue的數(shù)據(jù)驅(qū)動(dòng)和響應(yīng)式相關(guān)的特性，這一篇博文就來(lái)梳理vue的一個(gè)很重要的特性，組件化。自定義組件之于vue，其意義不亞于函數(shù)之于C，java之類的編程語(yǔ)言。函數(shù)是計(jì)算機(jī)科學(xué)...

    cuieney 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記3

    摘要：主要當(dāng)作屬性來(lái)使用方法表示一個(gè)具體的操作，主要書(shū)寫(xiě)業(yè)務(wù)邏輯一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。Vue.js - Day3 定義Vue組件 什么是組件： 組件的出現(xiàn)，就是為了拆分Vue實(shí)例的代碼量的，能夠讓我們以不同的組件，來(lái)劃分不同的功能模塊，將來(lái)我們需要什么樣的功能，就可以去調(diào)用對(duì)應(yīng)的組件即可； 組件化和模塊化的不同： 模塊化： 是從代碼邏輯的角度進(jìn)行劃分的；方便代碼分層開(kāi)...

    番茄西紅柿 評(píng)論0 收藏0

  • vue組件

    摘要：構(gòu)造器有一個(gè)選項(xiàng)對(duì)象，選項(xiàng)對(duì)象的屬性用于定義組件要渲染的。使用注冊(cè)組件時(shí)，需要提供個(gè)參數(shù)，第個(gè)參數(shù)時(shí)組件的標(biāo)簽，第個(gè)參數(shù)是組件構(gòu)造器。方法內(nèi)部會(huì)調(diào)用組件構(gòu)造器，創(chuàng)建一個(gè)組件實(shí)例。 什么叫組件： 有結(jié)構(gòu)HTML 有樣式CSS 有交互（效果） 行為 信號(hào)量存數(shù)據(jù) 組件的行為可以定制？ 通過(guò)屬性設(shè)置 在Vue中有什么樣的組件(組件進(jìn)行分類)： 實(shí)現(xiàn)基本功能的基礎(chǔ)的組件（最小的元素） 可復(fù)...

    tianlai 評(píng)論0 收藏0

  • Vue-組件詳解

    摘要：除了監(jiān)聽(tīng)事件外，還可以用于組件之間的自定義事件。它僅僅作為一個(gè)直接訪問(wèn)子組件的應(yīng)急方案，應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用。將和合并成，會(huì)自動(dòng)去判斷是普通標(biāo)簽還是組件。子組件這里的狀態(tài)綁定的是父組件的數(shù)據(jù)。 查看原文站點(diǎn)，更多擴(kuò)展內(nèi)容及更佳閱讀體驗(yàn)！ 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-com...

    dadong 評(píng)論0 收藏0

  • Vue.js-組件詳解

    摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過(guò)來(lái)訪問(wèn)指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...

    jeffrey_up 評(píng)論0 收藏0

  • 認(rèn)識(shí)Vue組件

    摘要：認(rèn)識(shí)組件組件是強(qiáng)大的功能之一。注意，所有的組件同時(shí)也都是的實(shí)例，可接受相同的選項(xiàng)對(duì)象。組件全局注冊(cè)時(shí)通過(guò)方式注冊(cè)?？紤]到會(huì)出現(xiàn)禁止使用的場(chǎng)景，需要禁止和啟用組件的功能，所以需要。同樣也是先在子組件的選項(xiàng)中定義好傳遞過(guò)來(lái)的數(shù)據(jù)。 前言 Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架（官方說(shuō)明）。通俗點(diǎn)來(lái)說(shuō)，Vue.js是一個(gè)輕量級(jí)的，易上手易使用的，便捷，靈活性強(qiáng)的前端MVVM框架。簡(jiǎn)潔的A...

    xumenger 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<