什麼是Vue
是目前最火的前端框架，React是最流行的一個前端框架 (React除了開發網站，還可以開發手機App，Vue語法也可以用戶進行手機App開發的，需要藉助於Weex)
vue.js是前端主流框架之一，和Angular.js、React.js一起，並稱爲前端主流三大框架！
vue.js，不僅容易上手，還便於與第三方你庫或既有項目整合。
前端主要工作，主要負責mvc中的v這一層；主要工作是和界面打交道；
爲什麼要學習流行框架
- 企業爲了提高開發效率：在企業中，時間就是效率，效率就是金錢；
- 提高開發效率的歷程：原生js --jquery之類的類庫—前端模板引擎—Angular.js/Vue.js
- 在Vue中，一個核心的概念，就是讓用戶不再操作DOM元素，解放了用戶的雙手，讓程序員可以更多 的時間去關注業務邏輯；
框架和庫的區別
- 框架：是一套完整的解決方案；對項目的侵入性較大，項目如果需要換框架，則需要重新架構整個項目。
- 庫（插件）：提供某一個小功能，對項目的侵入性較小，如果開某個庫無法完成某些需求可以很容易切換到其它庫實現需求
MVC和MVVM的區別
- MVC是後端分層開發的概念
- MVVM是前端視圖層的概念，主要關注於視圖層分離，也就是說：MVVM把前端視圖層，分餵了三部分Model，VIew，VM ViewModel
![在這裏插入圖片描述]()
前端中的MVVM思想
-
MVVM是前端視圖層的概念
- MVVM是前端視圖層的分層開發思想，主要把每個頁面，分成了M，V，VM，其中VM是MVVM的核心思想，VM是M和V之間的調度者。
- M：保存的是每個頁面中單獨的數據(後端返回的數據)
- V：頁面中的html代碼
- VM：分割了M和V
- M和V互不可見，若要進行交互，必須通過VM
-
前端中使用MVVM，主要是爲了我們更方便開發，因爲MVVM提供了數據的雙向綁定(由VM提供)
Vue中實現MVVM的基本代碼
<body>
<!-- 將來new的Vue實例會控制這個元素中的所有內容 -->
<!-- Vue 實例所控制的這個元素區域,就是我們的 view層 -->
<div id="app">
<p>{{msg}}</p>
</div>
</body>
<script src="vue-2.4.0.js"></script>
<script>
/* 當我們導入包之後,在瀏覽器的內存中，就多了一個Vue構造函數 */
/* 創建一個vue的實例 也就是VM */
var vm = new Vue({
// el:表示當前new 的這個Vue實例,要控制頁面上的哪個區域
el: '#app',
data: {// data 屬性中存放的是el中要用到的數據,也就是Model
// 通過Vue提供的指令，很方便的就能把數據渲染到頁面上
msg: '歡迎學習Vue'
// 前端的Vue之類的框架,不提倡我們去手動操作DOM元素了
}
});
</script>
Vue指令
-
v-cloak
用於解決網速過慢導致的插值表達式閃爍的問題 -
v-text
與插值表達式的作用一樣，用於渲染數據- 默認v-text是沒有閃爍問題的
- 標籤中，插值表達式{{ data }}的前後可以放任意內容，而使用v-text指令後，標籤裏其它內容都不會被解析
-
v-html
用於渲染含有html代碼的數據 -
v-bind
將數據與屬性的值綁定
縮寫：title=‘msg’ -
v-on
用來綁定事件的
縮寫@click:‘show’ -
v-model
用來實現數據的雙向綁定，只能運用在表單元素中，與表單中的value值雙向綁定。而v-bind只能實現M->V的單向綁定。 -
v-for
該指令可以用來遍歷數組、對象、或者數字迭代v-for使用注意事項- 在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果v-for有問題,必須在使用v-for的同時，指定唯一的字符串/數字 類型的 :key值
-
v-if 和v-show的區別
- 使用v-if時，每次都將刪除或創建元素，而使用v-show，只是將元素設置爲display：none/block。
- v-if有較高的性能消耗，而v-show有較高的初始渲染消耗。
- 如果元素涉及到頻繁的切換，最好不好使用v-if，推薦使用v-show
- 如果元素可能永遠或者很少會顯示出來被用戶看到，則推薦使用v-if
事件修飾符
- .stop 阻止冒泡
- .prevent 阻止默認事件
- .capture 添加事件監聽器時使用事件捕獲模式
- .self 只當事件在該元素本身（比如不是子元素）觸發時觸發回調
- .once 事件只觸發一次
.self只會阻止自己身上冒泡行爲的觸發，並不會真正阻止冒泡行爲
Vue.js與JavaScript和jQuery的不同之處
-
在我們使用JavaScript或jQuery時，做的最多的事情就是操作DOM、綁定事件等這些。比如在制定DOM中插入一個元素，並給它綁定一個點擊事件：
if(showBtn){ var btn = $('<button>Click me</button>'); btn.on('click',function(){ console.log('Clicked!'); }); $('#app').append(btn); }這樣的操作讓我們的視圖代碼和業務邏輯緊耦合正在一起，隨着功能不斷增加，直接操作DOM會使得代碼越來越難以維護。
而Vue.js通過MVVM的模式拆分爲視圖與數據兩部分，並將其分離。因此，我們只需要關心數據部分即可，DOM的事情Vue會幫我們自動搞定，例如上面的示例可以使用Vue.js改寫爲：
<body> <div id="myApp"> <button v-if="showBtn" v-on:click="handleClick">Click me</button> </div> <script> new Vue({ el: '#myApp', data: { showBtn: true }, methods: { handleClick: function(){ console.log('Clicked!'); } } }); </script> </body>
總結：
Vue.js是一個構建 數據驅動 的web界面的漸進式框架，它的目標是通過儘可能簡單的API來實現響應的 數據綁定 和組合的 視圖組件核心是一個響應的 數據綁定系統。
Vue.js的4個特性：
- 輕量級的框架
- 雙向數據綁定
- 指令
- 組件化
關於漸進式的理解：
不管是單頁面還是多頁面。首先都是通過聲明式渲染聲明每個字段，這是基本要求。 我們通常會把公共的頭部和尾部抽出來，做成組件。 這時候就需要使用組件系統。
單頁面應用程序往往是需要路由，這個時候需要把vue的 vue-router 拉進來做路由，如果我們做的項目足夠複雜，大量的使用組件而難以去管理組件的狀態，這個時候我們使用 vue-resource（vue-resource是集中來管理我們的狀態的）。項目完成後需要構建工具來build我們的系統，提高我們的效果，最後形成完整的項目。
