1.1簡述Vue 概念
vue是一個構建用戶界面的框架(庫),它的目標是通過儘可能簡單的api實現響應的數據綁定和組合的視圖集合
vue自身不是一個全能框架的核心是隻關注視圖層,因此它非常容易學習，非常容易與其它庫或已有項目整合
vue在與相關工具和支持庫一起使用時, 也能完美地驅動複雜的單頁應用,在之後的課程中,我們會配合webpack來使用
1.2Vue特點
1.2.1. 響應的數據綁定/響應式編程
保持狀態和數據的同步
- Vue.js 的核心是一個響應的數據綁定系統，它讓數據與 DOM 保持同步非常簡單。在使用 jQuery 手工操作
- DOM時，我們的代碼常常是命令式的、重複的與易錯的。
- Vue.js 擁抱數據驅動的視圖概念。通俗地講，它意味着我們在普通 HTML 模板中使用特殊的語法將
- DOM“綁定”到底層數據。一旦創建了綁定，DOM 將與數據保持同步。
- 每當修改了數據，DOM 便相應地更新。這樣我們應用中的邏輯就幾乎都是直接修改數據了，不必與
DOM更新攪在一起。這讓我們的代碼更容易撰寫、理解與維護。
1.3. 爲什麼要用Vue.js
1.3.1.1. 輕量級的框架
只關注視圖層,是一個構建數據驅動的視圖集合,大小隻有幾十kb
1.3.1.2. 簡單易學
國人開發,中文文檔,不存在語言障礙,易於理解與學習
1.3.1.3. 雙向數據綁定
保留了angular的優點
在數據操作方面變得更爲簡單,極大的解放了dom操作(通過屬性綁定的形式來實現)
1.3.1.4. 組件化
保留了 react框架的優點
實現html的封裝,重用,在構建單頁面應用方面有獨特的優勢
1.3.1.5. 視圖,數據,結構分離
使得數據的更改變得非常簡單,不需要進行邏輯代碼的修改,只需要操作數據就能夠完成相關的操作
1.3.1.6. 虛擬DOM
dom操作是非常耗費性能的
不再使用原生的dom操作節點,極大解放dom操作,但具體操作的還是dom,只不過是換了另外一種方式
1.3.1.7. 運行速度更快
相比較react而言,同樣都是操作虛擬dom,就性能而言,vue存在很大的優勢(瞭解)
1.3.2. 缺點/瞭解
1.3.2.1. 支持特性
作爲一個新興的前端框架,在支持特性方面存在一些問題
瀏覽器端: 拋棄了對IE9以下版本的支持
android: 4.2 +
ios: ios 7+
1.3.2.2. 前後端混合受限
在使用後端的 模板引擎渲染的項目中,vue會受到一定的限制
vue只能和後端的模板文件混合在一起,獲取的後端數據也依賴於後端的渲染,在處理json對象和數組的時候會很麻煩
1.4. MVVM模式簡介
大致可以分爲三個部分:
M: model,模型,在這裏指的是數據模型
V: view,視圖,在這裏指的就是我們寫的頁面
VM ViewModel,是數據模型和視圖連接的紐帶(橋樑)
我們要把數據模型上面的數據綁定到視圖上,要通過這個紐帶(橋樑)來實現
1.5Vue的環境配置
兼容性提示： Vue.js 不支持 IE8 及其以下版本。
1.5.1 創建項目
- vue init webpack-simple music
進入文件夾內部 - cd music
下載依賴包 - npm install
運行該項目 - npm run dev
1.5.2. 實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之Helloworld</title>
<!--第1步：引入Vue庫-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--第2步: 通過id屬性設置視圖的入口-->
<div id="app">
<!--Vue的模板的綁定數據的方法， 類似於很多其他前端的模板，可以用兩對花括號進行綁定Vue中的數據對象的屬性 -->
{{ message }}
</div>
<script>
//第3步：創建模型數據
var modelData = {
message: 'Hello Vue!'
}
//第4步: 創建vue對象
var app = new Vue({ // 創建Vue對象。Vue的核心對象。
el: '#app', // el屬性：把當前Vue對象掛載到 div標籤上，#app是id選擇器
data: modelData// data: 是Vue對象中綁定的數據模型
});
</script>
</body>
</html>