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 (推荐)
事件对象：
默认行为（默认事件）
