什麼是Vue.js
- Vue.js是目前最火的一個前端框架，React是最流行的一個前端框架，（React除了可以開發網站，還可以開發手機APP,Vue語法也是可以進行手機APP開發的，需要藉助week）；
- Vue.js是前端的主流框架之一和Angular.js、react.js，成爲前端的三大主流框架；
- Vue.js是一套構建用戶界面的框架，只關注視圖層，他不僅易於上手，還便於與第三方庫或既有項目整合。（Vue有配套的第三方類庫，可以整合起來做大型項目的開發）；
- 前端的主要工作，負責MVC中v這一層，主要工作就是和界面打交道
爲什麼要學習流行框架
- 提高企業的開發效率；
- 提高開發效率的發展歷程：
- 原生JS（考慮兼容性等，開發效率慢）
- jQuery等類庫（解決了兼容性，隨着項目的加重，字符串拼接很複雜，渲染頁面不方便）
- 前端模板引擎（方便了渲染頁面）
[ {id: 1,name:"z1"}, {id: 3,name:"z2"}, {id: 2,name:"z3"}, {id: 4,name:"z4"}, ] - angular.js、Vue.js (幫我們減少不必要的DOM操作，提高渲染效率；雙向數據綁定的感念，通過框架提供的指令，前端只需要關心數據的業務邏輯，不需要關心DOM是如何渲染的)；
- 在Vue中，一個核心的概念，就是讓用戶不在操作DOM，解放雙手，讓程序員可以更多的時間去關注業務邏輯；
框架和庫的區別
- 框架：對項目的侵入性很大，項目如果需要更換框架，則需要重新構架整個項目；但是功能非常完善，是一套完整的解決方案；
- 庫（插件）：提供一個小功能，對項目的侵入性比較小，用某個庫完成某些需求，可以很容易的切換其他的庫（插件）實現需求；
- 從jQuery–zepto
- 從EJS – art-template
node（後端）中的MVC與前端中的MVVM之間的區別
- MVC是後端的分層開發概念
- M:是model層，處理數據
- V：視圖層，前端頁面
- C：業務邏輯層，
- MVVM是前端視圖層的感念
- 主要把每個頁面分成了M、V、VM，其中VM是是MVVM的思想核心，因爲VM是M和V之間的調度者
- M：保存的是每個頁面中的單獨的數據
- V：就是每個頁面中的HTML代碼結構
- VM: 他是一個調度者，分割了M和V，每當V層想要獲取或者保存數據的時候都要由VM做中間的處理
- 前端頁面中使用MVVM的思想，主要是爲了讓我們的開發更加方便，因爲MVVM提供了數據的雙向綁定；
- 注意：數據的雙向綁定是由VM提供的；
Vue.js基本代碼和MVVM之間的對應關係
見webstorm：day1-01-03
Vue指令之v-on的縮寫和事件修飾符
事件修飾符：
- .stop阻止冒泡
- .prevent阻止默認事件
- .capture添加事件傾聽器時使用事件捕獲方式
- .self只當事件在該元素本身（比如不是子元素）觸發時出發回調
- .once事件只觸發一次
day1- 04
Vue指令之v-model和雙向數據綁定
day1-05
簡易計算器案例
day1-06
vue中使用內聯樣式
- 直接在元素上通過“：style”的形式，書寫樣式對象day-08
- 將樣式對象，定義到‘data’中，並直接引用到‘style’中 day-07
vue指令中v-for和key屬性
- 注意：一定要給 :key=“someting” 屬性
vue指令之 v-if 和v-show
- 一般來說，v-if有更高的切換消耗而v-show 有更高的初始渲染消耗，因此，如果需要頻繁切換v-show 較好，如果在運行時條件不大可能改變用v-if較好；
第一天總結
- MVC和MVVM的區別
- MVC： 站在整個項目的角度考慮
- MVVM： 只考慮前端頁面分爲：M,V,VM,核心就是VM
- 學習了vue中最基本的代碼結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app"> </div>
<script>
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
});
</script>
</body>
</html>
- 基本指令
- 插值表達式{{msg}}
- v-cloak
- v-text
- v-html
- v-bind 縮寫 ：
- v-on 縮寫：@
- v-model
- v-for
- v-if
- 事件修飾符
- .stop 阻止冒泡
- .prevent 阻止默認行爲
- .capture
- .self 在自己身上執行
- .once 只執行一次
- VM 的指令
- el: 指定要控制的區域
- data： 是個對象，指定了控制的區域內要用到的數據
- methods：是個對象，自定義一些方法、函數
- 在VM實例中，如果要訪問data上的數據，或者訪問methods中的方法，必須帶this
- 在v-for中，要記得使用key屬性（只接受string/number）
- v-model 只能應用於表單元素
- 在vue中綁定樣式的兩種方式
- v-bind：class
- v-bind: style