官網(wǎng):https://cn.vuejs.org/
-------------------------------------------
vue讀音: 類似于View
-------------------------------------------
vue到底是什么?
一個mvvm框架(庫)幌甘、和angular類似潮售，比較容易上手、小巧
-------------------------------------------
mvc:
?????????? mvp
?????????? mvvm
?????????? mv*
?????????? Mvx
-------------------------------------------
vue和angular區(qū)別?
vue——????????? 1）簡單锅风、易學(xué)
?????????????????????? 2）指令以v-xxx
?????????????????????? 3）一片html代碼配合上json酥诽，在new出來vue實(shí)例
?????????????????????? 4）個人維護(hù)項(xiàng)目
?????????????????????? 5）適合:移動端項(xiàng)目,小巧
?????????????????????? 6）vue的發(fā)展勢頭很猛，github上start數(shù)量已經(jīng)超越angular
angular——??? 1）上手難
?????????????????? ? ? 2）指令以ng-xxx
?????????????????????? 3）所有屬性和方法都掛到$scope身上
?????????????????????? 4）angular由google維護(hù)
?????????????????????? 5）合適: pc端項(xiàng)目
vue和angular共同點(diǎn):不兼容低版本IE(8以下)
-------------------------------------------
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:
html:
{{msg}}
// 實(shí)例化一個Vue對象
var?c =?new Vue({
// el:"選擇器"：是固定的皱埠，可以是id選擇器肮帐、類選擇器、標(biāo)簽選擇器
固定的??????el:'#box',
// data:表示數(shù)據(jù)也是固定的
data:{?// 存儲數(shù)據(jù)
????msg:'welcome vue'
}
});
// 實(shí)例化一個vue對象边器，可以沒有名字new Vue({????// el:"選擇器"：是固定的????el:"#box",????// data：表示數(shù)據(jù)也是固定的????data:{????????msg:"welcome vue"????}});
-------------------------------------------
data里面存儲數(shù)據(jù):
// 實(shí)例化一個vue對象训枢，可以沒有名字new Vue({????// el:"選擇器"：是固定的????el:"body", // 標(biāo)簽選擇器????// data：表示數(shù)據(jù)也是固定的，string忘巧、number肮砾、boolean、array袋坑、json????data:{????????msg:"welcome vue",????????msg2:12,????????msg3:true,????????arr:["apple","banana","orange","pear"],????????json:{a:"apple",b:"banana",c:"orange"}????}});
Html:
<input type="text" v-model="msg"/><input type="text" v-model="msg"/><br />{{msg}}<br />{{msg2}}<br />{{msg3}}<br />{{arr}}<br/>{{json}}
-------------------------------------------
常用指令:
angular:
?ng-model ??ng-controller
?ng-repeat
?ng-click
?ng-show?
$scope.show=function(){}
指令:擴(kuò)展html標(biāo)簽功能,屬性
數(shù)據(jù):
v-model:產(chǎn)生數(shù)據(jù),一般表單元素(input) 雙向數(shù)據(jù)綁定
數(shù)據(jù)更新模板自動更新
循環(huán):
v-for="name in arr"
{{name}}?
?{{$index}}
v-for="name in json"
{{name}} ?
{{$index}}?
{{$key}}
v-for="(k,v) in json"
{{k}}
{{v}}
{{$index}}
{{$key}}
<li v-for="value in arr">???? {{value}} li>
事件:
v-on:click="函數(shù)"
v-on:click="a=false"
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);
????}
}
});
顯示隱藏:
v-show=“true/false”
v-show=“myData.length == 0”
-----------------------------------------
關(guān)于this的問題:
methods:{????add:function(){????????/* 因?yàn)槲覀儗?shí)例化了一個vue對象仗处，因此this就是我們實(shí)例化的這個對象，而arr,json都是這個對象的屬性因此我們可以this.屬性*/????????this.arr.push("tomato");????}}
bootstrap+vue簡易留言板(todolist):
bootstrap: css框架 跟jqueryMobile一樣
只需要給標(biāo)簽賦予class枣宫，角色
依賴jquery
----------------------------------------
事件:???
v-on:click/mouseover......
簡寫的:
@click="" 推薦
事件對象:
@click="show($event)"
methods:{???? show:function(ev){???????? alert(ev.clientX);??? ?}???}
@click="show($event)"?// 只傳一個參數(shù)$event
methods:{???? show:function(ev,b){???????? alert(ev.clientX);???????? alert(b);??? ?}???}
@click="show($event,12)"?//傳兩個參數(shù)$event和其他參數(shù)婆誓，可以互換位置
事件冒泡:
Html:
<div @click="show2()">???? <input type="button" value="按鈕" @click="show()"/>???div>
阻止冒泡:?
??// JS原生阻止事件冒泡
[if !supportLists]a)?[endif]. ev.cancelBubble=true;???
[if !supportLists]b)?[endif]. @click.stop推薦
默認(rèn)行為(默認(rèn)事件):
Html:
<input type="button" value="按鈕" @contextmenu="show()"/>
阻止默認(rèn)行為:
? // JS原生阻止瀏覽器默認(rèn)行為
[if !supportLists]a)?[endif]. ev.preventDefault();??
b). @contextmenu.prevent 推薦
鍵盤:
@keydown $event ?ev.keyCode??// JS原生鍵碼
@keyup
常用鍵:
回車
//當(dāng)按下回車時才會觸發(fā)這個事件
a). @keyup.13
b). @keyup.enter
上、下也颤、左洋幻、右鍵
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down
.....
@keydown.up.prevent="changeUp()"
----------------------------------------
屬性:
v-bind:src=""
width/height/title....
簡寫:
:src="" 推薦
注：自定義屬性也可以使用v-bind進(jìn)行綁定，也可以使用”:”簡寫
Vue：
new Vue({????el:"#box",????data:{????????url:"../../../img/瓢蟲1.png",????????w:"100px",????????t:"這是一張美麗的的圖片"????}});
Html：
<img :src="url" alt="" :width="w" :title="t"/>
-----------------------------------------
class和style:
:class="" v-bind:class=""
:style="" v-bind:style=""
:class="{grey:$index == now}"
:class="[red]" // red是data里的數(shù)據(jù)????data:{????????red:"red" // 字符串是類名????}
:class="[red,blue]"?// red和blue是data里面的數(shù)據(jù)????data:{????????red:"red" // 字符串是類名
??blue:"blue" // 字符串是類名????}
:class="{red:true, blue:false}"?// red?blue是類名
:class="{red:a, blue:b}"?// red是類名 true/false也可以給數(shù)據(jù)????data:{????????a:true,????????b:false????}
:class="json"?// json是data里面的數(shù)據(jù)
data:{
json:{red:a, blue:false}
}
----------------------------------------
style:
:style="[c]"?// c是data里面的數(shù)據(jù)
data:{???? c:{color:"red"} // c一定是一個json }
:style="[c,d]"?// c和d是data里面的數(shù)據(jù)
data:{???? c:{color:"red"}, // c一定是一個json???? d:{backgroundColor:"blue"} // d一定是一個json翅娶，復(fù)合屬性采用駝峰命名法 }
注意:復(fù)合樣式文留，采用駝峰命名法
:style="{color:’red’}"?// red是類名 注意：red要加引號
:style="json"?// json是data里面的數(shù)據(jù)
data:{?????? json:{??????? color:"red",??????? backgroundColor:"blue"?? ? } }
注：style里面一定是json
-----------------------------------------
模板:
{{msg}} 數(shù)據(jù)更新模板變化
{{*msg}} 數(shù)據(jù)只綁定一次
{{{msg}}} HTML轉(zhuǎn)意輸出h1-h6等標(biāo)簽會被解析
-----------------------------------------
過濾器:->過濾模板數(shù)據(jù)
系統(tǒng)提供一些過濾器:
{{msg| filterA}}
{{msg| filterA | filterB}}?// 多個過濾器
eg:{{'WELCOME'|lowercase|capitalize}}
uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize
currency 錢?eg:{{12|currency}}
{{msg| filterA參數(shù)}}?eg:{{12|currency “￥”}} ?{{12|currency “rmb”}}
....
-----------------------------------------
交互:
?$http （ajax）
vue本身不支持交互，如果vue想做交互
引入: vue-resource.js竭沫，引入resource相當(dāng)于給vue實(shí)例添加了一個方法或?qū)ο?/p>
get/post/jsonp(“url請求的路徑”燥翅，{傳遞給后臺的數(shù)據(jù)}，{options配置})
then(function(){},function(){})蜕提，一個是成功執(zhí)行的森书，一個是失敗執(zhí)行的
res是個對象
get:
獲取一個普通文本數(shù)據(jù):
this.$http.get('aa.txt').then(function(res){
????alert(res.data);??// 成功返回數(shù)據(jù)
},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?// 模擬json數(shù)據(jù)，使用post必須用
}).then(function(res){
????alert(res.data);
},function(res){
????alert(res.status);
});
jsonp:獲取本域之外的一些數(shù)據(jù)
??https://sug.so.#/suggest?callback=suggest_so&word=a
??https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=jshow
360：
this.$http.jsonp("https://sug.so.#/suggest",{???? word:"a" // 其實(shí)就是我們搜索的關(guān)鍵字 }).then(function(res){ // res是個對象??? ?alert(res.data.s); },function(res){???? alert(res.status); });
百度：
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
????wd:'a'?// 其實(shí)就是我們搜索的關(guān)鍵字
},{
????jsonp:'cb' //callback名字，默認(rèn)名字就是"callback"
// vue中jsonp默認(rèn)名稱是callback如果不是一定要改
}).then(function(res){
????alert(res.data.s);
},function(res){
????alert(res.status);
});
https://www.baidu.com/s?wd=s
