這是跟著高陽老師學(xué)習(xí)vue的課堂筆記，之前的都沒做筆記。??。
高陽老師的官網(wǎng)是一起學(xué)js，本來想發(fā)到老師創(chuàng)建的社區(qū)的，發(fā)現(xiàn)已經(jīng)有人已經(jīng)發(fā)了筆記了。我就不去發(fā)了。感興趣的可以去學(xué)習(xí)。社區(qū)很好，高陽老師也是超級棒。
正文
vue的核心庫，解決了數(shù)據(jù)和視圖綁定問題。
組件是vue強(qiáng)大功能之一。
vue的組件 和 HTML中的便簽 不是一個層面的東西了。這里的組件是對原始的HTML元素進(jìn)行封裝，來拓展它的能力。在較高層面上，組件是自定義的元素。vue.js的編輯器為它添加了特殊功能。這些功能是原始的HTML不具備的。
在有些情況下，組件也可以表現(xiàn)為用 is 特性進(jìn)行了擴(kuò)展的原生 HTML 元素。
也就是說，與原生的HTML元素相比，元素增加了is特性。
<div>
<xu> xxx </xu>
</div>
<xu>非原生的標(biāo)簽，但是并沒有影響顯示，說明解析是容錯的。在解析的時候也沒有什么問題。
但是在某些情況下，比如在列表中，默認(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)簽作為一個tr標(biāo)簽使用。
<table>
<tr is="my-row"></tr>
</table>
is的那就話就是仿佛在說 這個元素是 什么什么 你先按這個解析。后續(xù)vue再偷天換日。
以下三種，HTML可以正常解析，可以不使用is屬性。
<script type="text/x-template">- JavaScript內(nèi)聯(lián)模板字符串
-
.vue組件
所有的vue組件同時也都是vue的實例。他們可以接受相同的選項對象，并提供相同的聲明周期鉤子。
- 一個組件是具備自己的聲明周期的，
- 一個有自己的數(shù)據(jù)和方法，(注意，組件中的data必須是個函數(shù),不能是obj，但是這個函數(shù)必須返回一個obj，最終data值其實還是個obj)
- 組件和其他的組件是隔離的。是不能調(diào)用其他組件的數(shù)據(jù)和方法的。
他們之間需要通過一些方法來通信。
組件的創(chuàng)建方式：
創(chuàng)建全局組件：
Vue.component('name',option_obj)；
全局組件意思是 所有的vue實例都可以訪問，
全局組件是vue中是不常用的，要盡量避免使用全局組件。
組件創(chuàng)建(或者注冊)之后，便可以作為自定義標(biāo)簽在HTML中使用。
局部組件
不用全局創(chuàng)建，通過某個Vue對象的components選項實現(xiàn)。
new Vue({
components : {
...
}
});
除非所有的頁面都能用到的組件，否則不要定義為全局組件。
在vue選項對象中定義的組件，僅供該vue實例使用。
組件組合
組件可以組合，組件套組件。形成新的組件。
使用屬性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中，組件的名稱請使用短橫線方式。寫HTML時的習(xí)慣就是短橫線，而JavaScript中命名變量是習(xí)慣駝峰式命名的。
。。。。
高階的HTML開發(fā)者可以都使用駝峰命名。因為高階的vue開發(fā)者，不care HTML，HTML不是占主要部分，JavaScript占據(jù)主導(dǎo)地位。
v-指令 后面的雙引號 是表達(dá)式 ,不是v指定就是一個字符串常量。不會當(dāng)做js表達(dá)式計算
vue組件的數(shù)據(jù)流是單向的，只允許父組件向子組件傳遞數(shù)據(jù)，不允許組內(nèi)部的數(shù)據(jù)向父組件傳遞數(shù)據(jù)。否則就很亂，數(shù)據(jù)會變得不可控。
正確的方式是，要保證數(shù)據(jù)的變化是可控的，是可跟蹤的。推薦的使用方式是：
1，定義一個局部變量，并用prop的值初始化
2.定義一個計算屬性，數(shù)據(jù)來自 屬性 prop 的值
屬性prop驗證
要指定驗證規(guī)則，使用字符串是不可以的，要使用對象形式的。還可以設(shè)置一些可選項。
Vue.component('user-info',{
props: {
name:{
type:String,
required:true,
default:'xiaoming'
}
}
})；
抄代碼
- 處理粘貼過來HTML代碼
- 刪除不需要的
- 腦子里要想一下大概長什么樣子，需要什么數(shù)據(jù)，把HTML代碼修改成想要的模樣。
- 創(chuàng)建vue實例，進(jìn)行數(shù)據(jù)綁定，事件綁定等。
使用立即執(zhí)行函數(shù)?？焖贅?gòu)建測試數(shù)據(jù)。使用for循環(huán)構(gòu)建數(shù)據(jù)并返回。
老師的搭建界面樣式都很6，是因為老師花時間研究Bootstrap了。把一件東西搞熟了，用習(xí)慣了，就搞的快了。
案例點：
V-for 是可以傳入index的，需要使用括號
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)變成全新的方式。
