Vue.js 2.0 由淺入深,第一天 day01
### Vue.js 五天 *湯小洋*
## 一、 Vue.js簡介
### 1. Vue.js是什麽
**Vue.js**也稱為Vue,讀音/vju:/,類似view,錯誤讀音v-u-e
版本:v1.0 v2.0
+ 是一個構建用戶界面的框架
+ 是一個輕量級MVVM(Model-View-ViewModel)框架,和angular、react類似,其實就是所謂的數據雙向綁定
+ 數據驅動+組件化的前端開發(核心思想)
+ 通過簡單的API實現**響應式的數據綁定**和**組合的視圖組件**
+ 更容易上手、小巧
參考:[官網](https://cn.vuejs.org/)
### 2.vue和angular的區別
#### 2.1 angular
+ 上手較難
+ 指令以ng-xxx開頭
+ 所有屬性和方法都存儲在$scope中
+ 由google維護
#### 2.2 vue
+ 簡單、易學、更輕量
+ 指令以v-xxx開頭
+ HTML代碼+JSON數據,再創建一個vue實例
+ 由個人維護:**尤雨溪**,華人,目前就職於阿裏巴巴,2014.2開源了vue.js庫
![尤雨溪](https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=d49c7e60ee1190ef15f69a8daf72f673/4afbfbedab64034f29596c8ba6c379310b551da2.jpg)
共同點:`都不兼容低版本IE`
對比:GitHub上vue的stars數量大約是angular的兩倍
## 二、起步
### 1. 下載核心庫vue.js
bower info vue
npm init --yes
cnpm install vue --save
版本 v2.3.4 目前最新版本(2017.6.29)
vue2.0和1.0相比,最大的變化就是引入了Virtual DOM(虛擬DOM),頁面更新效率更高,速度更快
### 2. Hello World(對比angular)
#### 2.1 angular實現
js:
let app=angular.module(‘myApp‘,[]);
app.controller(‘MyController‘,[‘$scope‘,function($scope){
$scope.msg=‘Hello World‘;
}]);
html:
<html ng-app="myApp">
<div ng-controller="MyController">
{{msg}}
</div>
</html>
#### 2.2 vue實現
js:
new Vue({
el:‘#itany‘, //指定關聯的選擇器
data:{ //存儲數據
msg:‘Hello World‘,
name:‘tom‘
}
});
html:
<div id="itany">
{{msg}}
</div>
### 3. 安裝vue-devtools插件,便於在chrome中調試vue
直接將vue-devtools解壓縮,然後將文件夾中的chrome拖放到擴展程序中
//配置是否允許vue-devtools檢查代碼,方便調試,生產環境中需要設置為false
Vue.config.devtools=false;
Vue.config.productionTip=false; //阻止vue啟動時生成生產消息
## 三、 常用指令
### 1. 什麽是指令?
用來擴展html標簽的功能
angular中常用的指令:
ng-model
ng-repeat
ng-click
ng-show/ng-hide
ng-if
### 2. vue中常用的指令
+ v-model
雙向數據綁定,一般用於表單元素
+ v-for
對數組或對象進行循環操作,使用的是v-for,不是v-repeat
註:在vue1.0中提供了隱式變量,如$index、$key
在vue2.0中去除了隱式變量,已被廢除
+ v-on
用來綁定事件,用法:v-on:事件="函數"
+ v-show/v-if
用來顯示或隱藏元素,v-show是通過display實現,v-if是每次刪除後再重新創建,與angular中類似
## 四、 練習:用戶管理
使用BootStrap+Vue.js
## 五、 事件和屬性
### 1. 事件
#### 1.1 事件簡寫
v-on:click=""
簡寫方式 @click=""
#### 1.2 事件對象$event
包含事件相關信息,如事件源、事件類型、偏移量
target、type、offsetx
#### 1.3 事件冒泡
阻止事件冒泡:
a)原生js方式,依賴於事件對象
b)vue方式,不依賴於事件對象
@click.stop
#### 1.4 事件默認行為
阻止默認行為:
a)原生js方式,依賴於事件對象
#### 1.5 鍵盤事件
回車:@keydown.13 [email protected]
上:@keydown.38 [email protected]
[email protected]/b/c...事件,可以自定義鍵盤事件,也稱為自定義鍵碼或自定義鍵位別名
#### 1.6 事件修飾符
.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.once - 只觸發一次回調。
### 2. 屬性
#### 2.1 屬性綁定和屬性的簡寫
v-bind 用於屬性綁定, v-bind:屬性=""
屬性的簡寫:
v-bind:src="" 簡寫為 :src=""
#### 2.2 class和style屬性
綁定class和style屬性時語法比較復雜:
## 六、 模板
### 1. 簡介
Vue.js使用基於HTML的模板語法,可以將DOM綁定到Vue實例中的數據
模板就是{{}},用來進行數據綁定,顯示在頁面中
也稱為Mustache語法
### 2. 數據綁定的方式
a.雙向綁定
v-model
b.單向綁定
方式1:使用兩對大括號{{}},可能會出現閃爍的問題,可以使用v-cloak解決
方式2:使用v-text、v-html
### 3. 其他指令
v-once 數據只綁定一次
v-pre 不編譯,直接原樣顯示
## 七、 過濾器
### 1. 簡介
用來過濾模型數據,在顯示之前進行數據處理和篩選
語法:{{ data | filter1(參數) | filter2(參數)}}
### 2. 關於內置過濾器
vue1.0中內置許多過濾器,如:
currency、uppercase、lowercase
limitBy
orderBy
filterBy
vue2.0中已經刪除了所有內置過濾器,全部被廢除
如何解決:
a.使用第三方工具庫,如lodash、date-fns日期格式化、accounting.js貨幣格式化等
b.使用自定義過濾器
### 3. 自定義過濾器
分類:全局過濾器、局部過濾器
#### 3.l 自定義全局過濾器
使用全局方法Vue.filter(過濾器ID,過濾器函數)
#### 3.l 自定義局部過濾器
本文出自 “12392007” 博客,請務必保留此出處http://12402007.blog.51cto.com/12392007/1950789
Vue.js 2.0 由淺入深,第一天 day01