vue
官網(wǎng)? https://cn.vuejs.org/
下載
1.X
2.X
優(yōu)點(diǎn)
mvvm的框架
angular
上手比較麻煩
用在pc端多
google支持
ng-XXX
所有的屬性方法放在$scope
vue
上手簡單,易學(xué)
小巧垂攘,pc,移動都好
全球的使用量比angular高很多
華人個人開發(fā)
v-XXX
他的屬性和方法都在json壁酬,他都是new出來的
共同點(diǎn):都不兼容低版本
使用
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 表單元素產(chǎn)生數(shù)據(jù)
radio on off
checkbox true false
v-for="v in arr/json" v-->value
v-for="(k,v) in arr/json" v-->value
數(shù)組:$index? json:$key
事件:
v-on:click="add()"
v-on:mouseover
簡寫:@click="add()"
事件對象 $event
組織默認(rèn)行為 ev.preventDefault();
簡寫: @contextmenu.prevent
阻止冒泡:ev.cancelBubble=true;
event.stopPropagation()
簡寫:@click.stop
鍵盤事件:ev.keyCode
簡寫:@keyup.13
@keyup.enter
@keyup.left
傳參:順序不能亂
屬性里面直接用參數(shù)會報錯匕荸,但是能出來
v-bind
vue里面屬性都是用v-bind來綁定的
v-bind:src="這里面寫的數(shù)據(jù)不用模板"
簡寫? :src推薦
:class
1爹谭、data:{
msg:'red'
}
:class="msg"
2、data:{
a:'red',
b:'border',
c:'margin'
}
:class="[a,b,c]"? //a b c 都是數(shù)據(jù)
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}"
頁面渲染
非轉(zhuǎn)譯輸出
{{}}? 數(shù)據(jù)更新模板就變化
{{*}} 數(shù)據(jù)只綁定一次,初始化的時候是什么就是什么
{{{}}} HTML轉(zhuǎn)譯輸出
過濾器
|過濾器名稱 參數(shù)
{{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('網(wǎng)絡(luò)鏈接失敗')
})
JSONP:
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
this.$http.jsonp('url',{params:{wd:'a'},jsonp:'cb'}).then(function(res){
},function(){
})