vue
官网 https://cn.vuejs.org/
下载
1.X
2.X
优点
mvvm的框架
angular
上手比较麻烦
用在pc端多
google支持
ng-XXX
所有的属性方法放在$scope
vue
上手简单，易学
小巧，pc，移动都好
全球的使用量比angular高很多
华人个人开发
v-XXX
他的属性和方法都在json，他都是new出来的
共同点：都不兼容低版本
使用
var app=angular.module('模块名称',[]);
app.controller('控制器的名称',function($scope,$http){
$scope,$http 名称不能变，但是顺序能变
$scope挂属性和方法
})
var vue=new Vue({ //可以new多个，就想ng里面控制器一样
el:'.box', //控制范围 选择器
data:{ //是挂属性的
msg:'abc'
}，
methods:{ //是挂方法的
add:function(){
}
}
});
注：el 和 data写死的必须这么写
选择器 只能选择一个
指令：
v-model 表单元素产生数据
radio on off
checkbox true false
v-for="v in arr/json" v-->value
v-for="(k,v) in arr/json" v-->value
数组:$index json:$key
事件：
v-on:click="add()"
v-on:mouseover
简写：@click="add()"
事件对象 $event
组织默认行为 ev.preventDefault();
简写: @contextmenu.prevent
阻止冒泡：ev.cancelBubble=true;
event.stopPropagation()
简写：@click.stop
键盘事件：ev.keyCode
简写：@keyup.13
@keyup.enter
@keyup.left
传参：顺序不能乱
属性里面直接用参数会报错，但是能出来
v-bind
vue里面属性都是用v-bind来绑定的
v-bind:src="这里面写的数据不用模板"
简写 :src推荐
:class
1、data:{
msg:'red'
}
:class="msg"
2、data:{
a:'red',
b:'border',
c:'margin'
}
:class="[a,b,c]" //a b c 都是数据
3、data:{
a:true,
b:false
}
:class="{red:a,border:b}"
4、data:{
json:{red:true,border:false}
}
:class="json"
:style
data:{
a:{
width:'100px'
},
b:{
height:'100px'
}
}
:style=[a,b]
data:{
a:100,
b:'red'
}
:style="{height:a+'px',background:b}"
页面渲染
非转译输出
{{}} 数据更新模板就变化
{{*}} 数据只绑定一次,初始化的时候是什么就是什么
{{{}}} HTML转译输出
过滤器
|过滤器名称 参数
{{msg|currency '￥'} 钱
{{data1|uppercase}}
{{data2|lowercase}}
{{data3|capitalize}}
|过滤器名称 |过滤器名称 |过滤器名称.....
交互
ng $http
vue
1、下载vue-resource.js
npm cnpm bower
2、引入
XHR
this.$http.post('a.txt').then(function(res){
this.msg=res.data;
},function(){
alert('网络链接失败')
})
JSONP:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
this.$http.jsonp('url',{params:{wd:'a'},jsonp:'cb'}).then(function(res){
},function(){
})
