在學習vue之前，我們應瞭解一下什麼是vue.js？ 什麼是Vue.js? Vue.js是目前最後一個前端框架，React是最流行的一個前端框架（react除了開髮網站，還可以開發手機App，Vue語法也是可以進行手機App，還需要藉助 weex） Vue.js是前端的主流框架之一，和angular ...
在學習vue之前，我們應瞭解一下什麼是vue.js？
什麼是Vue.js?
Vue.js是目前最後一個前端框架，React是最流行的一個前端框架（react除了開髮網站，還可以開發手機App，Vue語法也是可以進行手機App，還需要藉助 weex）
Vue.js是前端的主流框架之一，和angular、react.js一起，併成為前端三大主流框架
Vue.js是一套構建用戶界面的框架，只關註視圖層，它不僅易於上手，還便於第三方庫即有項目整合（Vue有配置的第三方類庫，可以整合起來做大型項目的開發）
前端的主要工作：主要負責MVC中的V這一層，主要工作就是和界面打交道，來製作頁面效果
Node（後端）中的mvc與前端mvvm之間的區別：
mvc是後端的分層開發概念
mvvm是前端視圖層的概念，主要關註於視圖層分離，也就是說：mvvm把前端的視圖層，分為三部分：model，view，vm viewmodel
Vue
vue返回的是一個對象
vue是一個mvvm的框架，（面試官常問的），angular是mvc的框架
Vue是vue的實例，這個實例存在電腦中，主要乾倆大事：1、綁定事件；2、dom檢測
Vuejs是封裝的一個類，參數是options對象
Vue全家桶包括：vuex、vue-router、vue-resource還有構建工具 vue-cli
但是vue-resource 現在不使用了，用的是axios
最常用的屬性是：
el:"" 指定vue所操作的dom範圍，屬性值是你獲取的節點
data 就是vue的model，是存放數據的，屬性值是一個對象或者是一個函數，在組件中的data是一個函數
methods 是vue中的事件方法，
vue的基本內容：
Vue的渲染：
指令式渲染：
v-html，v-text 採用{{}}語法==>插值運算
v-html：它可以加標簽，它會解析成html
v-text：不能加標簽，如果加了，它會當作字元串展示出來
插值表達式：
{{ data中的數據 }}
v-text與插值表達式的區別：
預設v-text沒有閃爍的問題的，而插值表達式有閃爍問題
v-text 會覆蓋元素中原本的內容，但是插值表達式只會替換自己的這個占位符，不會把整個元素的內容清空
v-html 與 v-text的區別：
v-html會解析html格式
v-text與插值表達式會把內容當做文本來解析
v-html 和 v-text都會覆蓋元素中原有的內容
v-cloak
v-cloak 能夠解決 插值表達式閃爍的問題
併在css中設置：
[v-cloak]{
display: none;
}
讓所有設置 v-cloak 的元素隱藏，當載入完畢之後，元素身上的 v-cloak 就會消失
條件指令：v-if
v-if="a"
後面的值如果是true節點就顯示，false就隱藏
v-show=""
改變css中的display
後面的值如果是true，節點就顯示，false就隱藏
v-if與v-show的區別：
v-if是對節點的刪除和添加，v-show是堆display屬性值none和block的切換
v-if與v-show的區別及使用場景：
共同點：都是動態顯示DOM元素
不同點：
v-if：
v-if 是動態的向DOM樹內添加或刪除DOM元素
v-if 切換一個局部編譯/卸載的過程，切換時合適銷毀和重建內部事件監聽和子組件
v-if是懶惰性的，初始條件 = false，什麼也不做，只有在條件第一次 = true時，才開始局部編譯
v-show 是在任何條件下（首次條件是否為著真）都會被編譯，然後緩存，而且DOM元素保留
v-if有更高的切換消耗
使用場景：
v-if 適合運營條件不大可能改變
v-show
v-show有更高的初始化渲染消耗
v-show只是簡單的基於css切換
v-show是通過設置DOM元素的display實現控制顯隱的
使用場景：
v-show 適合頻繁切換
迴圈指令：v-for=""
* 值是一個數組 (item,index) in 數組名
* 值是一個對象 (value,key) in 對象名 value是屬性值，key是屬性
在v-for中key的使用註意事項：
v-for 迴圈的時候，key屬性只能使用 number 或string，且是惟一的
key在使用的時候，必須使用 v-bind 屬性綁定的形式，指定key的值
動態屬性：v-bind:class="a"
可以簡寫 :class="a" v-bind可以省略
節點上綁定事件：
v-on:click="fn" 可簡寫：@click="fn"
事件方法寫在methods中
v-on 監聽事件
v-on:click="事件名"
縮寫@click="事件名"
v-model 數據綁定
可以在表單中使用v-model實現數據雙向綁定
text類型中的文本都是字元串，v-model中的值相同
覆選框 v-model中的值是boolean
單選框 v-model中值是value
v-model實現的原理：
angular是mvc模式，ng-model是靠臟值檢測
vue靠的是數據劫持和發佈者訂閱者模式
數據劫持：
Object.definePropery() 這個方法
* 生成對象的方法 字面量 var obj={}/new Object()
* Object.definePropery() 給一個對象定義新屬性或修改一個對象的屬性
* object.getOwnPropertyDescriptor() 返回關於一個對象某個屬性的描述符，
第一個參數是目標對象，第二個參數是 對象的某個屬性
var obj={age:12}
console.log(object.getOwnPropertyDescriptor(obj,'age'))
返回屬性的意思：
configurable 配置選項，值為true代表這個屬性可刪除
enumerable 值為true 代表可枚舉 可以使用 for in 遍歷
value 這個屬性的值
writeable 代表這個屬性可以更改
如果有了set和get屬性就不能有writeable 和 value屬性
常見的修飾符：
.lazy v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步
<input v-model.lazy="msg" >
.number 自動將用戶的輸入值轉為數值類型
<input v-model.number="age" type="number">
.trim 自動過濾用戶輸入的首尾空白字元
<input v-model.trim="msg">
vue的事件修飾符
vue.js為 v-on 提供了事件修飾符
.stop 阻止maop
.prevent 阻止預設事件
.captur 添加事件監聽器時使用事件捕獲模式
.self 只當事件在該元素本身（比如不是子元素）觸發是觸發回調
.once 事件值觸發一次
事件修飾符是可以串聯的：
.stop和.self的區別：
.stop阻止事件冒泡
.self只會阻止自己身上冒泡行為的觸發，並不會真正阻止 冒泡行為
