vue01
vue到底是什么?
一個(gè)mvvm框架(庫(kù))、和angular類似,比較容易上手、小巧
官網(wǎng):http://cn.vuejs.org/
手冊(cè)： http://cn.vuejs.org/api/
vue和angular區(qū)別?
vue——簡(jiǎn)單、易學(xué)
指令以 v-xxx
一片html代碼配合上json，在new出來(lái)vue實(shí)例
個(gè)人維護(hù)項(xiàng)目
適合: 移動(dòng)端項(xiàng)目,小巧
vue的發(fā)展勢(shì)頭很猛，github上start數(shù)量已經(jīng)超越angular
angular——上手難
指令以 ng-xxx
所有屬性和方法都掛到$scope身上
angular由google維護(hù)
合適: pc端項(xiàng)目
共同點(diǎn): 不兼容低版本IE
vue基本雛形:
-
angular展示一條基本數(shù)據(jù):
var app=angular.module('app',[]);app.controller('xxx',function($scope){ //C $scope.msg='welcome' }) html: div ng-controller="xxx" {{msg}} -
vue展示一條基本數(shù)據(jù):
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(){}指令: 擴(kuò)展html標(biāo)簽功能,屬性
vue
v-model 一般表單元素(input) 雙向數(shù)據(jù)綁定
-
循環(huán):v-for
v-for="name in arr"
{{$index}}
v-for="name in json"
{{$index}} {{$key}}
v-for="(k,v) in json"
事件:v-on
v-on:click="函數(shù)"--->簡(jiǎn)寫(xiě):@click=""
v-on:click/mouseout/mouseover/dblclick/mousedown.....
new Vue({
el:'#box',
data:{ //數(shù)據(jù)
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){ //方法
alert(1);
}
}
});
事件對(duì)象$event
@click="show($event)"
-
vue1.0
事件冒泡: 阻止冒泡: a). ev.cancelBubble=true; b). @click.stop 推薦 默認(rèn)行為(默認(rèn)事件): 阻止默認(rèn)行為: a). ev.preventDefault(); b). @contextmenu.prevent 推薦 鍵盤(pán): @keydown $event ev.keyCode @keyup 常用鍵: 回車 a). @keyup.13 b). @keyup.enter 上、下、左、右 @keyup/keydown.left @keyup/keydown.right @keyup/keydown.up @keyup/keydown.down
顯示隱藏:v-show
v-show=“true/false”
屬性綁定:v-bind
v-bind:src="" 簡(jiǎn)寫(xiě)為:src=""
 效果能出來(lái)，但是會(huì)報(bào)一個(gè)404錯(cuò)誤
 效果可以出來(lái)，不會(huì)發(fā)404請(qǐng)求
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="[red]" red是數(shù)據(jù) red:'red'
:class="[red,b,c,d]"
:class="{red:a, blue:false}"
:class="json"
data:{
json:{red:a, blue:false}
}
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 復(fù)合樣式，采用駝峰命名法
:style="json"
模板:
{{msg}} 數(shù)據(jù)更新模板變化
{{*msg}} 數(shù)據(jù)只綁定一次,數(shù)據(jù)更新模板不變化
{{{msg}}} HTML轉(zhuǎn)意輸出,可以msg解析數(shù)據(jù)中標(biāo)簽
過(guò)濾器:過(guò)濾模板數(shù)據(jù)
vue1.0系統(tǒng)提供一些過(guò)濾器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize
currency 錢(qián)(不傳參默認(rèn)$)
{{12|currency '￥' }}
angular----{{12|currency '￥' }}
{{msg| filterA 參數(shù)}}
交互:
如果vue1.0想做交互,需要引入: vue-resouce.js
在組件內(nèi)的方法里寫(xiě)入:
get:
獲取一個(gè)普通文本數(shù)據(jù):
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
給服務(wù)發(fā)送數(shù)據(jù):√
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
post:
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
jsonp:
https://sug.so.360.cn/suggest?callback=suggest_so&word=a
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb' //callback名字，默認(rèn)名字就是"callback"
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
百度下拉列表案例
window.onload=function(){
new Vue({
el:'body',
data:{
myData:[],
t1:'',
now:-1
},
methods:{
get:function(ev){
if(ev.keyCode==38 || ev.keyCode==40)return;
if(ev.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.t1);
this.t1='';
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){
});
},
changeDown:function(){
this.now++;
if(this.now==this.myData.length)this.now=-1;
this.t1=this.myData[this.now];
},
changeUp:function(){
this.now--;
if(this.now==-2)this.now=this.myData.length-1;
this.t1=this.myData[this.now];
}
}
});
};
//html代碼
<div id="box">
<input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<li v-for="value in myData" :class="{gray:$index==now}">
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暫無(wú)數(shù)據(jù)...</p>
</div>