Vue.js要点记录

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

.....