vue專題1

vue:
讀音: v-u-e
view

vue究竟是什麼?
一個mvvm框架(庫)、和angular相似
比較容易上手、小巧
mvc:
mvp
mvvm
mv*
mvx
官網:http://cn.vuejs.org/
手冊： http://cn.vuejs.org/api/

vue和angular區別?
vue——簡單、易學
指令以 v-xxx
一片html代碼配合上json，在new出來vue實例
我的維護項目

適合: 移動端項目,小巧

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(){}
指令: 擴展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/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請求
-----------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""

:class="[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]"
注意: 複合樣式，採用駝峯命名法
:style="json"
-----------------------------------------
模板:
{{msg}} 數據更新模板變化
{{*msg}} 數據只綁定一次

{{{msg}}} HTML轉意輸出
-----------------------------------------
過濾器:-> 過濾模板數據
系統提供一些過濾器:

{{msg| filterA}}
{{msg| filterA | filterB}}

uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize

currency 錢

{{msg| filterA 參數}}

....
-----------------------------------------
交互:
$http （ajax）

若是vue想作交互

引入: vue-resouce

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); }); https://www.baidu.com/s?wd=s