vue

vue 

1.mvvm框架     和angular类似    比较容易上手 小巧

2.官网：http://cn.vuejs.org

3.vue  angular区别：

vue 简单 易学

     指令以v-xx

     一片html代码配合上json，在new出来vue实例

    个人维护

    适合移动端项目，小巧

    vue发展势头猛，github上star数量超过angular

angular 上手难

    指令ng-xxx

    所有属性和方法都挂到$scope身上

    angular由谷歌维护

    适合用着PC端项目

共同点：

      不兼容低版本的IE

       -------------------------------------------------------------------------------------------------

vue基本雏形:
angular展示一条基本数据:
var app=angular.module('app',[]);

app.controller('xxx',function($scope){ //C
$scope.msg='welcome'
})

html:
div ng-controller="xxx"
{{msg}}
vue:
html:
<div id="box">
{{msg}}
</div>

var c=new Vue({
el:'#box', //选择器 class tagName
data:{
msg:'welcome vue'
}
});
常用指令:
angular:
ng-model ng-controller
ng-repeat
ng-click
ng-show

$scope.show=function(){}
指令: 扩展html标签功能,属性

v-model 一般表单元素(input) 双向数据绑定

循环:
v-for="name in arr"
{{$index}}

v-for="name in json"
{{$index}} {{$key}}

v-for="(k,v) in json"
事件:
v-on:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

new Vue({
el:'#box',
data:{ //数据
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){ //方法
alert(1);
}
}
});
显示隐藏:
v-show=“true/false”
bootstrap+vue简易留言板(todolist):

bootstrap: css框架 跟jqueryMobile一样
只需要给标签 赋予class，角色
依赖jquery

确认删除？和确认删除全部么?

----------------------

事件：

v-on:click   简写  @click   (推荐)

事件对象：

@click="show($event）“

 

事件冒泡：

      阻止冒泡：   

      a)ev.cancelBubble = true

      b)@click.stop (推荐)

默认行为（默认事件）

@contextmenu

阻止默认行为：

a)  ev.preventDefault();

b)  @contextmenu.prevent   (推荐)

 

键盘事件