vue組件學(xué)習(xí)

這是跟著高陽老師學(xué)習(xí)vue的課堂筆記辞槐，之前的都沒做筆記。??粘室。
高陽老師的官網(wǎng)是一起學(xué)js榄檬，本來想發(fā)到老師創(chuàng)建的社區(qū)的，發(fā)現(xiàn)已經(jīng)有人已經(jīng)發(fā)了筆記了衔统。我就不去發(fā)了鹿榜。感興趣的可以去學(xué)習(xí)。社區(qū)很好锦爵，高陽老師也是超級(jí)棒舱殿。

正文

vue的核心庫，解決了數(shù)據(jù)和視圖綁定問題险掀。

組件是vue強(qiáng)大功能之一沪袭。

vue的組件和 HTML中的便簽不是一個(gè)層面的東西了。這里的組件是對(duì)原始的HTML元素進(jìn)行封裝樟氢，來拓展它的能力冈绊。在較高層面上，組件是自定義的元素埠啃。vue.js的編輯器為它添加了特殊功能死宣。這些功能是原始的HTML不具備的。

在有些情況下碴开，組件也可以表現(xiàn)為用 is 特性進(jìn)行了擴(kuò)展的原生 HTML 元素毅该。

也就是說，與原生的HTML元素相比叹螟，元素增加了is特性鹃骂。

<div>
  <xu> xxx </xu>
</div>

<xu>非原生的標(biāo)簽，但是并沒有影響顯示罢绽，說明解析是容錯(cuò)的。在解析的時(shí)候也沒有什么問題静盅。

但是在某些情況下良价，比如在列表中寝殴，默認(rèn)的非原生的標(biāo)簽不能正常的顯示。

<table>
  <my-row>...</my-row>
</table>

<my-row>是不能被解析成 tr來使HTML顯示成我們希望的樣子明垢，

is特性(is what 是什么)蚣常，是表現(xiàn)為某種標(biāo)簽樣式的特性，比如下面示例痊银，is='my-row' 告訴瀏覽器 my-row標(biāo)簽作為一個(gè)tr標(biāo)簽使用抵蚊。

<table>
  <tr is="my-row"></tr>
</table>

is的那就話就是仿佛在說這個(gè)元素是什么什么你先按這個(gè)解析。后續(xù)vue再偷天換日溯革。

以下三種贞绳，HTML可以正常解析，可以不使用is屬性致稀。

<script type="text/x-template">
JavaScript內(nèi)聯(lián)模板字符串
.vue組件

所有的vue組件同時(shí)也都是vue的實(shí)例冈闭。他們可以接受相同的選項(xiàng)對(duì)象，并提供相同的聲明周期鉤子抖单。

一個(gè)組件是具備自己的聲明周期的萎攒，
一個(gè)有自己的數(shù)據(jù)和方法，(注意矛绘，組件中的data必須是個(gè)函數(shù),不能是obj耍休，但是這個(gè)函數(shù)必須返回一個(gè)obj，最終data值其實(shí)還是個(gè)obj)
組件和其他的組件是隔離的货矮。是不能調(diào)用其他組件的數(shù)據(jù)和方法的羹应。

他們之間需要通過一些方法來通信。

組件的創(chuàng)建方式：

創(chuàng)建全局組件：

Vue.component('name',option_obj)次屠；

全局組件意思是所有的vue實(shí)例都可以訪問园匹，

全局組件是vue中是不常用的，要盡量避免使用全局組件劫灶。

組件創(chuàng)建(或者注冊(cè))之后裸违，便可以作為自定義標(biāo)簽在HTML中使用。

局部組件

不用全局創(chuàng)建本昏，通過某個(gè)Vue對(duì)象的components選項(xiàng)實(shí)現(xiàn)供汛。

new Vue({
  components : {
    ...
  }
});

除非所有的頁面都能用到的組件，否則不要定義為全局組件涌穆。

在vue選項(xiàng)對(duì)象中定義的組件怔昨，僅供該vue實(shí)例使用。

組件組合

組件可以組合宿稀，組件套組件趁舀。形成新的組件。

使用屬性prop傳遞數(shù)據(jù)

往組件里面塞數(shù)據(jù)祝沸，必須通過屬性傳遞矮烹。v-bind:message="message"

Vue.component('child', {
  // declare the props
  props: ['message'],
  // like data, the prop can be used inside templates and
  // is also made available in the vm as this.message
  template: '<span>{{ message }}</span>'
})

v-bind:message 可以縮寫成 :message

駝峰命名和短橫線命名

在vue中越庇，組件的名稱請(qǐng)使用短橫線方式。寫HTML時(shí)的習(xí)慣就是短橫線奉狈，而JavaScript中命名變量是習(xí)慣駝峰式命名的卤唉。

。仁期。桑驱。。

高階的HTML開發(fā)者可以都使用駝峰命名跛蛋。因?yàn)楦唠A的vue開發(fā)者熬的，不care HTML，HTML不是占主要部分问芬，JavaScript占據(jù)主導(dǎo)地位悦析。

v-指令后面的雙引號(hào) 是表達(dá)式 ,不是v指定就是一個(gè)字符串常量。不會(huì)當(dāng)做js表達(dá)式計(jì)算

vue組件的數(shù)據(jù)流是單向的此衅，只允許父組件向子組件傳遞數(shù)據(jù)强戴，不允許組內(nèi)部的數(shù)據(jù)向父組件傳遞數(shù)據(jù)。否則就很亂挡鞍，數(shù)據(jù)會(huì)變得不可控骑歹。

正確的方式是，要保證數(shù)據(jù)的變化是可控的墨微，是可跟蹤的道媚。推薦的使用方式是：

1，定義一個(gè)局部變量翘县，并用prop的值初始化

2.定義一個(gè)計(jì)算屬性最域，數(shù)據(jù)來自屬性 prop 的值

屬性prop驗(yàn)證

要指定驗(yàn)證規(guī)則，使用字符串是不可以的锈麸，要使用對(duì)象形式的镀脂。還可以設(shè)置一些可選項(xiàng)。

Vue.component('user-info',{
  props:  {
    name:{
      type:String,
      required:true,
      default:'xiaoming'
    }
  }
})忘伞；

抄代碼

處理粘貼過來HTML代碼
- 刪除不需要的
- 腦子里要想一下大概長什么樣子薄翅，需要什么數(shù)據(jù)，把HTML代碼修改成想要的模樣氓奈。
創(chuàng)建vue實(shí)例翘魄，進(jìn)行數(shù)據(jù)綁定，事件綁定等舀奶。

使用立即執(zhí)行函數(shù)暑竟。快速構(gòu)建測試數(shù)據(jù)伪节。使用for循環(huán)構(gòu)建數(shù)據(jù)并返回光羞。

老師的搭建界面樣式都很6绩鸣，是因?yàn)槔蠋熁〞r(shí)間研究Bootstrap了怀大。把一件東西搞熟了纱兑，用習(xí)慣了，就搞的快了化借。

案例點(diǎn)：

V-for 是可以傳入index的潜慎，需要使用括號(hào)

v-for= "(item,index) in menues"

避免使用硬編碼，維護(hù)起來太麻煩蓖康。

數(shù)據(jù)層面和服務(wù)器保持一致铐炫，可以減少很多判斷，減少bug蒜焊。

關(guān)于vue組件化的一些思考：

1.如何把代碼抽離成組件倒信？

2.數(shù)據(jù)是如何傳遞給組件的？

3.組件之間是如何傳遞數(shù)據(jù)的泳梆？

4.組件之間的事件是如何傳遞的鳖悠？

vue-cli是全新的前端開發(fā)方式。從原始的前端快放方式优妙，轉(zhuǎn)變成全新的方式乘综。