1. 初識vue
(1) vue到底是什么?
一個mvvm框架(庫)、和angular類似? ? 比較容易上手、小巧mvc:mvp? ? ? ? mvvm? ? ? ? mv*? ? ? ? mvx? ? 官網(wǎng):http://cn.vuejs.org/? ? 手冊：http://cn.vuejs.org/api/
(2) vue和angular區(qū)別?
vue——簡單、易學
指令以 v-xxx一片html代碼配合上json，在new出來vue實例
個人維護項目
適合: 移動端項目,小巧
vue的發(fā)展勢頭很猛，github上start數(shù)量已經(jīng)超越angular
angular——上手難
指令以 ng-xxx所有屬性和方法都掛到$scope身上
angular由google維護
合適: pc端項目
共同點: 不兼容低版本IE
(3) vue基本雛形:
angular展示一條基本數(shù)據(jù):varapp=angular.module('app',[]);
app.controller('xxx',function($scope){//C$scope.msg='welcome'})
html:
div ng-controller="xxx"{{msg}}
vue展示一條基本數(shù)據(jù):
html:
{{msg}}
varc=newVue({
el:'#box',//選擇器? class tagNamedata:{
msg:'welcome vue'}
});
(4) 常用指令:
1) 雙向數(shù)據(jù)綁定
v-model 一般表單元素(input)2) 循環(huán):
v-for="name in array"{{$index}}
v-for="name in json"{{$index}} {{$key}}
v-for="(key,value) in json"3) 事件:
v-on:click="函數(shù)名"http://==>函數(shù)名后面不用加圓括號v-on:click/mouseout/mouseover/dblclick/mousedown.....newVue({
el:'#box',
data:{//數(shù)據(jù)arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){//方法alert(1);
}
}
});
4) 顯示隱藏:
v-show=“true/false”
5) 事件:
v-on:click/mouseover......
簡寫形式:
@click=""http:// 推薦事件對象:
@click="show($event)"事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;ev.
b). @click.stop 推薦
默認行為(默認事件):
阻止默認行為:
a). ev.preventDefault();
b). @contextmenu.prevent? ? 推薦
鍵盤:
@keydown? ? $event ev.keyCode
@keyup
常用鍵:
回車
a). @keyup.13b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....?
