vue： 一個mvvm框架（庫），和angular相似
比價容易上手，小巧
----------------------------------------------------------------
vue與angular 的區別：
vue——簡單，易學
指令以v-xxx;
一片html代碼，配合上json，再new出來vue示例
是個人維護項目
適合：移動端項目，小巧
vue的發展的勢頭很猛（github上）
angular——上手比較難
指令以ng-xxx;
所有的屬性和方法都掛到$scope身上
angular由Google維護
適合pc端的項目
vue與angular的共同點：都不兼容低版本的IE(IE8以下不兼容）
----------------------------------------------------------------------
vue里的常見指令：
指令是指：擴展了html標簽功能，
angular的指令：ng-model ng-controller
1）v-model: 一般用於表單元素（input） 雙向數據綁定
2）v-for(循環)：
v-for='name in arr' {{name}} {{$index}}
v-for='name in json' {{$key}} {{name}} {{$index}}
關於循環的補充：
v-for="value in data"
但是在某些情況下循環會有重復的數據，v-for循環中重復數據默認是不能重復添加的
解決這個問題需要使用track-by="索引"即可
如：在下面的例子中如果沒有track-by="$index"，當第一單擊按鈕時能夠push進去數據，
從而使視圖也更新，但是當第二次再點擊按鈕時，就不能更再添加數據了，
所以要使用track-by="$index"來添加重復數據
<div id="box">
<input type="button" value="按鈕" @click="add">
<ul>
<li v-for="val in arr" track-by="$index">{{val}}</li>
</ul>
</div>
var vm = new Vue({
data:{
arr:['apple','pear','banana']
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
}).$mount('#box');
注：track-by="$index/uid" 索引可以是$index也可以是數據庫的id等
3）v-text指令：可以防止花括號出現
在我們數據加載的過程中，由於數據加載需要一些時間，常常會出現模板{{}}閃現的不好體驗，
而用v-text指令代替{{}}可以很好的解決這個問題。
使用模板的寫法：<span>{{msg}}</span>
使用v-text指令的寫法：<span v-text="msg"></span> 可以防止花括號出現
4）v-html指令：是一個轉義指令，當我們的數據或者用戶輸入中，含有標簽等可以轉義的字符，
v-html就可以將里面的標簽進行轉義，不會原樣輸出，造成一些不好的用戶體驗。
a) <span v-html="msg"></span> --->v-html進行轉義和防止花括號出現
b) {{{msg}}} <span>{{{msg}}}</span> --->另一種對數據進行轉義的方法，與v-html的轉義效果相同
補充：防止花括號閃爍的另外一種方法：
當訪問響應慢時用戶有時會看到花括號的標記，這時為最外層div加上v-cloak屬性，
再為v-cloak屬性寫一個display:none的樣式，防止看到花括號的出現
v-cloak：一般用在比較大的段落
<style>
/*css屬性選擇器*/
[v-cloak]{
display: none;
}
</style>
<div class="reply" v-for="item in msgData" v-cloak>
<p class="replyContent">{{item.content}}</p>
<p class="operation">
<span class="replyTime">{{item.time|date}}</span>
<span class="handle">
<a href="javascript:;" class="top">{{item.acc}}</a>
<a href="javascript:;" class="down_icon">{{item.ref}}</a>
<a href="javascript:;" class="cut">刪除</a>
</span>
</p>
</div>
5）自定義指令:
a)自定義屬性指令：
Vue里面通過Vue.directive自定義屬性
Vue.directive('名稱',function(參數){ //默認調用的是bind,可以簡寫,
//操作;
//(this.el -->原生的DOM元素)
});
<div v-red="參數"></div> //可傳參,參數可來自於vue里的data
指令名稱：v-red -->red
*注意:指令名稱必須以v-開頭
示例1：自定義指令,改變背景色
<div id="box">
<span v-red="msg">11111111111</span>
</div>
<script type="text/javascript">
Vue.directive('red',function(){ //dom里面是v-red,這里是red
this.el.style.background='red';
});
var vm = new Vue({
el:'#box',
data:{
msg:'welcome'
}
});
</script>
示例2：自定義指令,完成拖拽:
<div id="box">
<div class="box2" :style="{width: 100px;height: 100px;background: blue;position: absolute;right: 0;top: 0;}" v-drag></div>
</div>
<script type="text/javascript">
Vue.directive('drag',function(){ //以下是完成拖拽效果的代碼
var odDiv=this.el;
odDiv.onmousedown=function(ev){
var disX=ev.clientX-odDiv.offsetLeft;
var disY=ev.clientY-odDiv.offsetTop;
document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
odDiv.style.left=l+'px';
odDiv.style.top=t+'px';
};
document.onmouseup=function(ev){
document.onmousemove=null;
document.onmouseup=null;
};
};
});
var vm = new Vue({
el:'#box',
data:{
}
});
</script>
b)自定義元素指令:(用的很少,了解即可)
Vue1.0通過Vue.elementDirective自定義元素指令
Vue.elementDirective('元素名稱',{
bind:function(){ //這里不再遵循上面自定義屬性指令的簡寫方式
//javascript語句;
}
});
示例：自定義元素指令
css:
zns-red{
width: 100px;
height: 100px;
background: #ccc;
display: block;
}
html代碼:
<div id="box">
<zns-red></zns-red>
</div>
vue代碼:
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
var vm = new Vue({
el:'#box',
data:{
}
});
--------------------------------------------------------------------------------
事件:
1）基本的事件：v-on:click='show()' 推薦使用 @click='show()'
還有v-onmouseover v-onkeyup/down 等等
2）顯示隱藏事件：v-show="false/true"
3）事件對象：@click="show($event,12)" //$event 包含了這個事件的所有的方法
例：methods：{
show:function(ev,b){ //可傳一個參數，也可傳兩個參數，但是順序不能弄顛倒
alert(ev.client.X)
}
}
4）事件冒泡：
阻止冒泡：在內層阻止，和事件對象$event一起使用
@click="show($event)"
methods：{
show:function(ev){ //可傳一個參數，也可傳兩個參數，但是順序不能弄顛倒
alert(ev.client.X);
ev.cancelBubble=true;
//ev.stopPropagation();
}
}
推薦使用：@click.stop="show($event)"
5）默認行為(事件)：
阻止默認行為：a) ev.preventDefault();
b) @contextmenu.prevent 推薦使用
6）鍵盤事件：@keydown/keyup $event ev.keycode(捕獲任何一個鍵的鍵碼)
常用鍵： 回車：a) if(ev.keycode)==13
b) @keyup.13="show()";
c) @keyup.enter="show()" 推薦使用
上、下、左、右
@keyup/keydown.left="show()"
@keyup/keydown.right="show()"
@keyup/keydown.up="show()"
@keyup/keydown.down="show()"
7）自定義鍵盤事件(鍵盤上的按鍵vue沒有全部封裝)
上面介紹的事件vue封裝了：
@keydown.up/down
@keyup.up/down
@keydown.enter
@keydown.a/b/c........
有些鍵盤按鍵vue並沒有完全封裝：
@keydown.ctrl沒有封裝:
<input type="text" @keydown.ctrl="show()">
@keydown.17封裝了(ctrl的鍵碼為17)
<input type="text" @keydown.17="show()">
自定義鍵盤事件:
Vue.directive('on').keyCodes.ctrl=17;
<input type="text" @keydown.ctrl="show()">
<input type="text" @keydown.ctrl="show() |debounce 2000"> //延遲輸出
------------------------------------------------------------------------------------
綁定屬性：用v-bind綁定屬性 v-bind:src="url" :width/height/src/title="wd"
1）不同綁定屬性方法的優缺點：
<img src="{{url}}" alt=""> 效果能出來，但是在控制台會報一個404的錯誤
<img v-bind:src="url" alt=""> 效果能出來，不會出現404的錯誤
<img :src="url" alt=""> 推薦使用簡寫
2）特殊屬性：class和style
1) :class="[red,b]" []括住，表示red和b都是data里的數據
2) :class="{red:true,blue:false}" {}括住，表示red和blue是class
:class="{red:a,blue:b}" red和blue的值可以是true或false，也可以是數據
3) :class="json"
data:{
json:{red:true,blue:false}
}
a) :style="[c]"
b) :style="[c,d]" 注意：復合樣式采用駝峰命名法例如backgroundColor
c) :style="json"
-------------------------------------------------------------------
模板：
{{msg}} 數據更新，模板也更新
{{*msg}} 這個數據不會被綁定，數據更新時，模板不會更新
{{{msg}}} html轉義輸出
---------------------------------------------------------------------
Vue1.0常見的過濾器-->過濾模板數據
1）系統提供的一些過濾器
{{msg|filterA}} {{msg|filterA|filterB}}
{{'welcome'|uppercase}} 小寫轉換成大寫
{{'WELCOME'|lowercase}} 大寫轉換成小寫
{{'welcome'|capitalize}} 首字母轉換成大寫
{{a|json}} json過濾器,使json對象能夠顯示出來
{{'WELCOME'|uppercase|capitalize}} 多個過濾器同時使用
錢的標志：{{12|currency}} --->$12.00
傳參：{{12|currency "￥"}} ----> ￥12.00
2）與事件配合使用的過濾器
debounce -->配合事件使用，表示延遲
<input type="text" @keyup="add|debounce 2000">
3）與數據配合使用的過濾器
a)limitBy -->限制幾個數據，可接受兩個參數
limitBy(取幾個 從第幾個開始取) 默認從0開始取,一般與數組結合使用
<li v-for="val in arr | limitBy 2">{{val}}</li> //顯示兩條數據1,2
<li v-for="val in arr | limitBy 2 1">{{val}}</li> //顯示兩條數據2,3
<li v-for="val in arr | limitBy 2 arr.length-2">{{val}}</li> //顯示兩條數據4,5
data:{
arr:[1,2,3,4,5]
}
b)filterBy -->過濾數據
filterBy接受的參數既可以是數據，也可以是變量
<li v-for="val in arr | filterBy 'o'">{{val}}</li> //顯示含有'o'的數據
<input type="text" v-model="arr"> //顯示含有文本框中內容的數據
<li v-for="val in arr | filterBy a">{{val}}</li>
data:{
arr:['with','height','background','oppo'],
a:''
}
c)orderBy -->對數據進行排序
<li v-for="val in arr | orderBy 1">{{val}}</li> //按正序進行排序
<li v-for="val in arr | orderBy -1">{{val}}</li> //按倒序進行排序
<input type="text" v-model="arr"> //按文本框中輸入內容進行排序(輸入1或-1)
<li v-for="val in arr | orderBy a">{{val}}</li>
data:{
arr:['with','height','background','oppo'],
a:''
}
4）自定義過濾器
如何自定義過濾器？
Vue.filter('名稱',function(input){ //默認接收的第一個參數是input，是輸入的意思
return 操作
});
示例1：
<div id="box">{{a | toDoch}}</div>
<script>
Vue.filter('toDoch',function(input){ //默認接收的第一個參數是input，是輸入的意思
return input<10?'0'+input:''+input;
});
var vm = new Vue({
el:'#box',
data:{
a:9
}
});
</script>
示例2：時間轉化器：
<div id="box">
{{a |date}}
</div>
<script type="text/javascript">
Vue.filter('date',function(input){ //自定義時間過濾器
var odate=new Date(input);
return odate.getFullYear()+'-'+(odate.getMonth()+1)+'-'+odate.getDate()+' '+
odate.getHours()+':'+odate.getMinutes()+':'+odate.getSeconds();
});
var vm = new Vue({
data:{
a:Date.now() //獲取一個時間戳
}
}).$mount('#box');
</script>
示例3：過濾html標記
需要用-->雙向過濾器(用的比較少)
數據-->視圖 model-->view
視圖-->數據 view-->model
<div id="box">
<input type="text" v-model="msg | filterHtml">
<br/>
<span v-html="msg"></span>
</div>
Vue.filter('filterHtml',{
read:function(input){ //view-->model
return input.replace(/<[^<]+>/g,''); //正則表達式，將html標簽替換成空
},
write:function(input){ //model-->view
return input.replace(/<[^<]+>/g,'');
}
});
var vm = new Vue({
el:'#box',
data:{
msg:'<strong>welcome</strong>'
}
});