目錄
一、相關概念
1，為什麼要用框架？
2，框架和庫的區別
3，後端的mvc與前端的mvvm
二、相關操作
1，如何使用vue
（1）匯入vue包
（2）建立vue例項，我們new出來的vue就是vm
（3）在頁面中使用vue
2，解決時延顯示問題
3，v-text、v-html
4，v-bind
5，v-on 繫結事件
6，事件修飾符
7，v-model
8，使用class樣式
（1） 陣列
（2） 陣列中使用三元表示式
（3） 陣列中巢狀物件
（4） 直接使用物件
9，使用內聯樣式
10，v-for
（1）遍歷陣列
（2）遍歷陣列物件
（3）遍歷物件
11，v-for中key的使用
12,v-if
13,v-show
vue、angular、react並稱為前端三大框架，vue只關注檢視層，並且便於和第三方庫進行整合。
就是為了提公升開發效率，時間就是金錢。
提公升開發效率的發展歷程：原生js（相容性問題）——>jquery（解決相容性問題，生成dom元素的拼接問題）——>前端模板引擎（解決dom生成問題）——>vue、react、angular（解決dom過多渲染問題，提高渲染效率；雙向dom繫結；解決程式設計師不用關心dom元素，專心於業務邏輯）
框架是一套完整的解決方法；對專案的侵入性較大，如果需要換框架，則需要重新架構整個專案。
庫（外掛程式）：提供乙個小功能，對專案的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。
mvc是後端的分層開發概念
mvvm是前端檢視層的概念，檢視層分離，也就是說：mvvm把前端的檢視層，分為了 三部分 model, view , vm viewmodel
對其中幾個地方進行說明：
el表示我們new出來的vue物件控制的是頁面上的哪個區域；
data中存放的是el要用到的資料；
通過vue提供的指令就能很方便的將資料渲染到頁面上，前端vue框架不提倡我們手動去操作dom
var vm = new vue(}之類的內容，可以做如下修改，加入乙個樣式：
在修改div：
另外，預設v-text也沒有閃爍問題
data中資料存在如下資料：
message:'zhubr is a genius',
v-text使用：
如果data中的資料是html標籤：
msg2:''
輸出時想要輸出成html標籤，則需要用到如下語法：
v-bind提供了繫結屬性的功能:
data中存在：
mytitle:'這是我定義的乙個按鈕'
按鈕：這樣就可以把button的title屬性變更為mytitle中的內容了。
v-bind會將""內的內容當作表示式來執行。
注意：也可以這麼寫：
則title屬性為：這是我定義的乙個按鈕123
v-bind裡可以定義合法的表示式
v-bind的縮寫是 :
以button為例：
v-on:click="show"表示，在單擊按鈕時，呼叫show方法：
在new vue({})中新增method：
methods:
在元素中，通過屬性繫結的形式，將樣式物件應用到元素中：
3. 在 `:style` 中通過陣列，引用多個 `data` 上的樣式物件
在data上定義樣式：
data: ,
h1styleobj2:
在元素中，通過屬性繫結的形式，將樣式物件應用到元素中：
data中有乙個陣列：list:['a','b','c','d','e']
遍歷：}
要想加上索引：
索引值：}----}
list:[,,
,遍歷的語法：}
要加索引時：
}----索引值：}
要獲取list鍵值對：
list:}----索引值：}
加入索引：
}----索引值：}------}
另外，count可以記錄是第幾次迴圈
通過這個key可以指定相關新增物件的id
id:
name:
} --- }
v-if實現隱藏或者顯示：
data中資料：
flag:true,
乙個div是否顯示，可以用v-show來控制：
data中定義：
flag:false,
div中定義：
那麼這個div就不會顯示了。
v-if和v-show的區別在於，v-if裡的**完全不會顯現，而v-show相當於display:none；
v-if有較高的切換消耗，v-show有較高的渲染消耗。
如果涉及頻繁的切換，不要用v-if；但是被顯示的可能性較小，則用v-if
1 Vue 基礎指令
1 vue 指令 1 v model 主要在表單中使用，文字框 teaxare 單選 下拉 等 2 v text 文字渲染 類似 3 v show 控制dom顯示隱藏 display none,display block 4 v if 也可以控制dom 顯示隱藏，如果dom 不顯示整個dom就沒有。...
1 Vue 基礎指令
1 vue 指令 1 v model 主要在表單中使用，文字框 teaxare 單選 下拉 等 2 v text 文字渲染 類似 3 v show 控制dom顯示隱藏 display none,display block 4 v if 也可以控制dom 顯示隱藏，如果dom 不顯示整個dom就沒有。...
1 Vue 元件的使用
使用 kebab case vue.component my component name 當使用 kebab case 短橫線分隔命名 定義乙個元件時，你也必須在引用這個自定義元素時使用 kebab case，例如 使用 pascalcase vue.component mycomponentna...