1、插件推薦
2、框架的學習方式
學會看文檔
3.0源碼，就會多一些新的知識點，只能看文檔
英文文檔，點翻譯，把翻譯的結(jié)果寫成博客
看不懂沒關(guān)系，看代碼，去猜什么意思
猜不出來怎么辦，把代碼直接粘貼過來運行一下大概也能知道是什么效果
多敲代碼
不是多抄代碼
先多思考，分析一下思路流程，然后再去寫代碼
1.....
2.做什么
3.再做什么
多看一些博客額外學習
3、Vue.js是什么
官網(wǎng)地址：https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88
Vue.js 就是一套前端開發(fā)網(wǎng)站的框架
用了它以后，我們以后不用再關(guān)心怎么去操作DOM,你只要關(guān)心如何獲取數(shù)據(jù)就行了
因為用了Vue以后數(shù)據(jù)變了，界面DOM元素就會跟著變了
1、之前操作網(wǎng)頁的不足
2.用vue不用操作DOM
4、Vue基本使用
傳送門：https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5
導包
準備div，最好給div加一個id，方便用vue找到它
實例化一個vue對象，el:傳入div的id，data:里放所有的數(shù)據(jù)
使用步驟詳解：
實例化Vue
傳入一個對象
對象里有 el 屬性
放選擇器，代表找到一個根標簽（不能是html和body），把根標簽里面的內(nèi)容用vue管理
對象里有 data 屬性
放數(shù)據(jù)
對象里有 methods 屬性
5、指令
指令：其實就是vue給我們提供好的一些代碼，每個指令都有自己特有的功能實現(xiàn)
5.1?v-text指令（類似于innerText）
傳送門：https://cn.vuejs.org/v2/api/#v-text
指令：其實就是vue給我們提供好的一些代碼，每個指令都有自己特有的功能實現(xiàn)
v-text：就是把數(shù)據(jù)內(nèi)容展示到雙標簽里面，跟{{? }}寫法類似
區(qū)別：v-text會覆蓋雙標簽里面原來的內(nèi)容，但是 {{ }} 不會，它只是在寫{{}}填充
{{ }} 這種語法也可以理解為是v-text的簡寫形式，它也叫做 插值語法，也可以叫 胡子語法
特點：會把內(nèi)容都當做純文本來解析
5.2?v-html指令
傳送門：(https://cn.vuejs.org/v2/api/#v-html
作用跟 v-text 類似，都是給雙標簽里面改內(nèi)容
但是v-html遇到標簽會解析成DOM元素
它沒有簡寫形式，{{ }} 永遠都是v-text的簡寫
5.3 v-on指令
基本使用：https://cn.vuejs.org/v2/guide/events.html
添加事件的
v-on:事件名="要執(zhí)行的代碼"
簡寫形式： @事件名="要執(zhí)行的代碼"
事件要執(zhí)行的代碼， 如果寫在行內(nèi)，訪問數(shù)據(jù)不用加this
@click="count++"http://不用加this
事件是通過調(diào)用方法的形式來觸發(fā)，那么方法里面訪問數(shù)據(jù)，要加this關(guān)鍵字
v-on的修飾符
事件修飾符：(https://cn.vuejs.org/v2/api/#v-on)
.stop:阻止事件冒泡
.prevent：阻止默認行為
.enter：按回車才觸發(fā)
5.4 v-bind指令
傳送門：https://cn.vuejs.org/v2/api/#v-bind
v-bind（辦的）
用來綁定行內(nèi)屬性的
寫法：v-bind:屬性名=“值"
簡寫：:屬性名 = “值"
這個值可以寫死，也可以綁定data中的屬性
它對class屬性操作時有個特殊寫法
:class="{類名:值}"
如果值為true，加上這個類名，為false不加
5.5?v-model?表單輸入綁定 （雙向數(shù)據(jù)綁定）
傳送門：https://cn.vuejs.org/v2/guide/forms.html
可以拿到文本框輸入的內(nèi)容
數(shù)據(jù)變了，界面也會改變
雙向綁定：
5.6 v-for 指令
以前的循環(huán)：
v-for 指令
傳送門：https://cn.vuejs.org/v2/guide/list.html
可以根據(jù)一個數(shù)組，渲染多個這樣的標簽
數(shù)組發(fā)生變化，標簽也會跟著變化
語法：v-for="(item,index) in 數(shù)組"
先寫的是元素，后寫的是下標，跟名字無關(guān)，名字可以自己隨便寫
還可以遍歷對象，只不過遍歷對象時，item是屬性值，index是屬性名
5.7 v-if,v-else-if,v-else指令
傳送門：https://cn.vuejs.org/v2/guide/conditional.html#v-show
它是按條件渲染某個元素
它只會渲染滿足條件的那個元素，其他的不滿足條件的壓根不會加到dom元素里
5.8v-show指令
傳送門：https://cn.vuejs.org/v2/guide/conditional.html#v-show
它也是按條件顯示或隱藏，值為true就顯示，值為false就隱藏
只不過它是通過操作元素的display來控制顯示和隱藏
元素會永遠在DOM上
v-if&v-show對比
兩者對比https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
v-if會操作DOM，觸發(fā)重繪（耗性能），所以如果是頻繁的控制一個元素的顯示和隱藏就不要用v-if，而是用v-show
如果有多個條件，但是最終只要顯示一個元素，那么用v-if要好一點，因為如果v-show都會渲染出來
5.9 不常用的指令 （v-cloak指令、v-once指令、v-pre指令）
v-cloak指令(了解)
傳送門：https://cn.vuejs.org/v2/api/#v-cloak
v-cloak這個行內(nèi)屬性，在vue加載完之前會留著，等vue加載完了后會自動移除
所以我們可以寫一個 [v-cloak] 的樣式，作為vue加載完之前的樣式來顯示
屬性選擇器
v-once指令(了解)
傳送門：https://cn.vuejs.org/v2/api/#v-once
用v-once的元素，只有第一次顯示時會跟vue的數(shù)據(jù)關(guān)聯(lián)，后面再怎么變都跟它沒有關(guān)系
v-pre指令(了解)
傳送門：https://cn.vuejs.org/v2/api/#v-pre
有的時候我們就想讓網(wǎng)站顯示成 {{ msg }}這種形式，但是它會被vue解析出來
所以加一個v-pre，就會原樣顯示
6、vue實例中的this
在vue的事件里，this都是這個Vue實例
在行內(nèi)不用加this，在方法里才要加
最終編譯后，Vue中的data和methods不見了，但是data里的屬性和methods里面的方法，都會直接掛到這個實例里面
所以我們訪問data中的屬性只要 this.屬性 訪問methods方法也只要 this.方法名()
案例：
計算器基本版：
計算器優(yōu)化版：
圖片切換：
小黑記事本：
天氣查查查：
