1觉渴、插件推薦
2、框架的學(xué)習(xí)方式
學(xué)會(huì)看文檔
3.0源碼徽惋，就會(huì)多一些新的知識(shí)點(diǎn)案淋，只能看文檔
英文文檔，點(diǎn)翻譯险绘，把翻譯的結(jié)果寫(xiě)成博客
看不懂沒(méi)關(guān)系踢京，看代碼，去猜什么意思
猜不出來(lái)怎么辦宦棺，把代碼直接粘貼過(guò)來(lái)運(yùn)行一下大概也能知道是什么效果
多敲代碼
不是多抄代碼
先多思考瓣距，分析一下思路流程，然后再去寫(xiě)代碼
1.....
2.做什么
3.再做什么
多看一些博客額外學(xué)習(xí)
3代咸、Vue.js是什么
官網(wǎng)地址：https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88
Vue.js 就是一套前端開(kāi)發(fā)網(wǎng)站的框架
用了它以后蹈丸，我們以后不用再關(guān)心怎么去操作DOM,你只要關(guān)心如何獲取數(shù)據(jù)就行了
因?yàn)橛昧薞ue以后數(shù)據(jù)變了，界面DOM元素就會(huì)跟著變了
1呐芥、之前操作網(wǎng)頁(yè)的不足
2.用vue不用操作DOM
4逻杖、Vue基本使用
傳送門(mén)：https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5
導(dǎo)包
準(zhǔn)備div，最好給div加一個(gè)id思瘟，方便用vue找到它
實(shí)例化一個(gè)vue對(duì)象荸百，el:傳入div的id，data:里放所有的數(shù)據(jù)
使用步驟詳解：
實(shí)例化Vue
傳入一個(gè)對(duì)象
對(duì)象里有 el 屬性
放選擇器滨攻，代表找到一個(gè)根標(biāo)簽（不能是html和body）够话，把根標(biāo)簽里面的內(nèi)容用vue管理
對(duì)象里有 data 屬性
放數(shù)據(jù)
對(duì)象里有 methods 屬性
5蓝翰、指令
指令：其實(shí)就是vue給我們提供好的一些代碼，每個(gè)指令都有自己特有的功能實(shí)現(xiàn)
5.1?v-text指令（類似于innerText）
傳送門(mén)：https://cn.vuejs.org/v2/api/#v-text
指令：其實(shí)就是vue給我們提供好的一些代碼更鲁，每個(gè)指令都有自己特有的功能實(shí)現(xiàn)
v-text：就是把數(shù)據(jù)內(nèi)容展示到雙標(biāo)簽里面霎箍，跟{{? }}寫(xiě)法類似
區(qū)別：v-text會(huì)覆蓋雙標(biāo)簽里面原來(lái)的內(nèi)容，但是 {{ }} 不會(huì)澡为，它只是在寫(xiě){{}}填充
{{ }} 這種語(yǔ)法也可以理解為是v-text的簡(jiǎn)寫(xiě)形式，它也叫做 插值語(yǔ)法景埃，也可以叫 胡子語(yǔ)法
特點(diǎn)：會(huì)把內(nèi)容都當(dāng)做純文本來(lái)解析
5.2?v-html指令
傳送門(mén)：(https://cn.vuejs.org/v2/api/#v-html
作用跟 v-text 類似媒至，都是給雙標(biāo)簽里面改內(nèi)容
但是v-html遇到標(biāo)簽會(huì)解析成DOM元素
它沒(méi)有簡(jiǎn)寫(xiě)形式，{{ }} 永遠(yuǎn)都是v-text的簡(jiǎn)寫(xiě)
5.3 v-on指令
基本使用：https://cn.vuejs.org/v2/guide/events.html
添加事件的
v-on:事件名="要執(zhí)行的代碼"
簡(jiǎn)寫(xiě)形式： @事件名="要執(zhí)行的代碼"
事件要執(zhí)行的代碼谷徙， 如果寫(xiě)在行內(nèi)拒啰，訪問(wèn)數(shù)據(jù)不用加this
@click="count++"http://不用加this
事件是通過(guò)調(diào)用方法的形式來(lái)觸發(fā)，那么方法里面訪問(wèn)數(shù)據(jù)完慧，要加this關(guān)鍵字
v-on的修飾符
事件修飾符：(https://cn.vuejs.org/v2/api/#v-on)
.stop:阻止事件冒泡
.prevent：阻止默認(rèn)行為
.enter：按回車才觸發(fā)
5.4 v-bind指令
傳送門(mén)：https://cn.vuejs.org/v2/api/#v-bind
v-bind（辦的）
用來(lái)綁定行內(nèi)屬性的
寫(xiě)法：v-bind:屬性名=“值"
簡(jiǎn)寫(xiě)：:屬性名 = “值"
這個(gè)值可以寫(xiě)死谋旦，也可以綁定data中的屬性
它對(duì)class屬性操作時(shí)有個(gè)特殊寫(xiě)法
:class="{類名:值}"
如果值為true，加上這個(gè)類名屈尼，為false不加
5.5?v-model?表單輸入綁定 （雙向數(shù)據(jù)綁定）
傳送門(mén)：https://cn.vuejs.org/v2/guide/forms.html
可以拿到文本框輸入的內(nèi)容
數(shù)據(jù)變了册着，界面也會(huì)改變
雙向綁定：
5.6 v-for 指令
以前的循環(huán)：
v-for 指令
傳送門(mén)：https://cn.vuejs.org/v2/guide/list.html
可以根據(jù)一個(gè)數(shù)組，渲染多個(gè)這樣的標(biāo)簽
數(shù)組發(fā)生變化脾歧，標(biāo)簽也會(huì)跟著變化
語(yǔ)法：v-for="(item,index) in 數(shù)組"
先寫(xiě)的是元素甲捏，后寫(xiě)的是下標(biāo)，跟名字無(wú)關(guān)鞭执，名字可以自己隨便寫(xiě)
還可以遍歷對(duì)象司顿，只不過(guò)遍歷對(duì)象時(shí)，item是屬性值兄纺，index是屬性名
5.7 v-if,v-else-if,v-else指令
傳送門(mén)：https://cn.vuejs.org/v2/guide/conditional.html#v-show
它是按條件渲染某個(gè)元素
它只會(huì)渲染滿足條件的那個(gè)元素大溜，其他的不滿足條件的壓根不會(huì)加到dom元素里
5.8v-show指令
傳送門(mén)：https://cn.vuejs.org/v2/guide/conditional.html#v-show
它也是按條件顯示或隱藏，值為true就顯示估脆，值為false就隱藏
只不過(guò)它是通過(guò)操作元素的display來(lái)控制顯示和隱藏
元素會(huì)永遠(yuǎn)在DOM上
v-if&v-show對(duì)比
兩者對(duì)比https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
v-if會(huì)操作DOM钦奋，觸發(fā)重繪（耗性能），所以如果是頻繁的控制一個(gè)元素的顯示和隱藏就不要用v-if旁蔼，而是用v-show
如果有多個(gè)條件锨苏，但是最終只要顯示一個(gè)元素，那么用v-if要好一點(diǎn)棺聊，因?yàn)槿绻鹶-show都會(huì)渲染出來(lái)
5.9 不常用的指令 （v-cloak指令伞租、v-once指令、v-pre指令）
v-cloak指令(了解)
傳送門(mén)：https://cn.vuejs.org/v2/api/#v-cloak
v-cloak這個(gè)行內(nèi)屬性限佩，在vue加載完之前會(huì)留著葵诈，等vue加載完了后會(huì)自動(dòng)移除
所以我們可以寫(xiě)一個(gè) [v-cloak] 的樣式裸弦，作為vue加載完之前的樣式來(lái)顯示
屬性選擇器
v-once指令(了解)
傳送門(mén)：https://cn.vuejs.org/v2/api/#v-once
用v-once的元素，只有第一次顯示時(shí)會(huì)跟vue的數(shù)據(jù)關(guān)聯(lián)作喘，后面再怎么變都跟它沒(méi)有關(guān)系
v-pre指令(了解)
傳送門(mén)：https://cn.vuejs.org/v2/api/#v-pre
有的時(shí)候我們就想讓網(wǎng)站顯示成 {{ msg }}這種形式理疙，但是它會(huì)被vue解析出來(lái)
所以加一個(gè)v-pre，就會(huì)原樣顯示
6泞坦、vue實(shí)例中的this
在vue的事件里窖贤，this都是這個(gè)Vue實(shí)例
在行內(nèi)不用加this，在方法里才要加
最終編譯后贰锁，Vue中的data和methods不見(jiàn)了赃梧，但是data里的屬性和methods里面的方法，都會(huì)直接掛到這個(gè)實(shí)例里面
所以我們?cè)L問(wèn)data中的屬性只要 this.屬性 訪問(wèn)methods方法也只要 this.方法名()
案例：
計(jì)算器基本版：
計(jì)算器優(yōu)化版：
圖片切換：
小黑記事本：
天氣查查查：
