1. 初识vue
(1) vue到底是什么?
一个mvvm框架(库)、和angular类似 比较容易上手、小巧mvc:mvp mvvm mv* mvx 官网:http://cn.vuejs.org/ 手册：http://cn.vuejs.org/api/
(2) vue和angular区别?
vue——简单、易学
指令以 v-xxx一片html代码配合上json，在new出来vue实例
个人维护项目
适合: 移动端项目,小巧
vue的发展势头很猛，github上start数量已经超越angular
angular——上手难
指令以 ng-xxx所有属性和方法都挂到$scope身上
angular由google维护
合适: pc端项目
共同点: 不兼容低版本IE
(3) vue基本雏形:
angular展示一条基本数据:varapp=angular.module('app',[]);
app.controller('xxx',function($scope){//C$scope.msg='welcome'})
html:
div ng-controller="xxx"{{msg}}
vue展示一条基本数据:
html:
{{msg}}
varc=newVue({
el:'#box',//选择器 class tagNamedata:{
msg:'welcome vue'}
});
(4) 常用指令:
1) 双向数据绑定
v-model 一般表单元素(input)2) 循环:
v-for="name in array"{{$index}}
v-for="name in json"{{$index}} {{$key}}
v-for="(key,value) in json"3) 事件:
v-on:click="函数名"//==>函数名后面不用加圆括号v-on:click/mouseout/mouseover/dblclick/mousedown.....newVue({
el:'#box',
data:{//数据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=""// 推荐事件对象:
@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
.....
