初識vue.jsphp
讀音:同view,視圖的意思html
vue究竟是什麼:一個mvvm框架(庫),和angular相似,比較容易上手、小巧vue
mvc思想:module層(數據)和view層(視圖)分離,由數據驅動視圖,相似的有ios
mvp,mvvm,mv*,mvx等git
官網:http://cn.vuejs.org/github
手冊:http://cn.vuejs.org/api/ajax
vue和angular的區別json
vue----簡單,易學axios
指令以v-xxx的形式api
它是一片html代碼(view層),配合上json數據(module層),而後再new出vue實例(vm層即controller)組成
是有我的維護的項目
適合:移動端項目,小巧靈活
vue的發展勢頭很猛,github上start數量已經超越angular
angular----上手困難,學習成本高
指令以 ng-xxx的形式
全部屬性和方法都掛到$scope身上
angular由google維護
合適: 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(){}
vue:
指令: 擴展html標籤功能,(其實就是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」
事件
v-on:click/mouseover......
簡寫的:
@click="" 推薦
事件對象:
@click="show($event)"
事件冒泡:
阻止冒泡:
a). ev.cancelBubble=true;
b). @click.stop 推薦
默認行爲(默認事件):
阻止默認行爲:
a). ev.preventDefault();
b). @contextmenu.prevent 推薦
鍵盤:
@keydown $event ev.keyCode
@keyup
經常使用鍵:
回車
a). @keyup.13
b). @keyup.enter
上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
屬性
v-bind:src="" width/height/title.... 簡寫: :src="" 推薦 <img src="{{url}}" alt=""> 效果能出來,可是會報一個404錯誤 <img v-bind:src="url" alt=""> 效果能夠出來,不會發404請求(推薦使用bind動態綁定)
class和style:
:class="" v-bind:class="" //能夠跟單個類
:style="" v-bind:style=""
:class="[red]" //red是數據,能夠跟數組
:class="[red,b,c,d]"
:class="{red:a, blue:false}" //a是數據,能夠跟對象
:class="json" //能夠跟總體一個json數據
data:{
json:{red:a, blue:false}
}
--------------------------
style:
:style="[c]"
:style="[c,d]"
注意: 複合樣式,採用駝峯命名法
:style="json"
模板
{{msg}} 數據更新模板變化
{{*msg}} 數據只綁定一次
{{{msg}}} HTML轉義輸出html標籤
過濾器:過濾模板數據
系統提供一下過濾器:
{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize
currency 錢
{{msg| filterA 參數}} (參數以空格分開)
....
交互
全局調用http和實例調用http
(全局使用)Vue.http.get....../ (實例使用)this.$http.get... $http (相似於jq中的ajax功能)
若是vue想作交互 引入: vue-resouce (vue2.0已不維護,推薦使用axios) get: 獲取一個普通文本數據: this.$http.get('aa.txt').then(function(res){ alert(res.data); },function(res){ alert(res.status); }); 給服務發送數據:√ 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名字,默認名字就是"callback" }).then(function(res){ alert(res.data.s); },function(res){ alert(res.status); });
this.$http.get()/post()/jsonp()
this.$http({ url:地址 data:給後臺提交數據, method:'get'/post/jsonp jsonp:'cb' //cbName });