Vue1.0學習小結1

目錄

  1. 什么是Vue?
  2. 常用指令
  3. 事件
  4. 屬性
  5. class和style
  6. 過濾器
  7. 數據交互
1. 什么是Vue?

vue是一個mvvm框架(庫)，它和angular類似，但相對比較容易上手、小巧。具體詳情可以查閱vue官網

//vue雛形 el綁定元素，可以理解是angular的controll層，data放初始化數據。
//vm實例是全局，可能通過類似vm.$el/vm.$data來獲取它的屬性
//js
window.onload=function(){
//第一種方式，利用el來綁定
var vm=new Vue({
     el:'#box',
     data:{
        msg:'welcome vue'
     }
 });
 //第二種方式，利用$mount來掛載
 var vm=new Vue({
    data:{
       msg:'welcome vue'
    }
 }).$mount('#box');  // 手動掛載 vm.$mount('#box'); 
 };
 //html
 <div id="box">
    {{msg}}
 </div>
2. 常用指令

2.1 v-model 一般表單元素(input) 雙向綁定，可顯示文本/數組/對象，但對象會直接顯示成[object Object]。
注意正常綁定模型是使用{{msg}}，如果接口返回過慢，可能會導致閃爍會先顯示出大括號。為了避免這種情況可以用1、屬性v-text="msg"等價于{{msg}}，2、增加個自定義屬性v-cloak，把顯示區域設為display:none。
其次它有{{msg}}和{{{msg}}}的用法
1、如果是加多一個號，使用{{*msg}}代表只綁定賦值一次，后來模型怎么變也不我的事
2、如果在最外層包多一層大括號，代表html轉意輸出。 可以這么理解{{msg}}綁定的是像jQuery的text()，而{{{msg}}}綁定的是像jQuery的html()，屬性v-html="msg"等價于{{{msg}}}

<input type="text" v-model="msg">
<input type="text" v-model="msg">
<br>
{{msg}}
<br>
{{*msg}}
<br>
{{{msg}}}

2.2 v-for 主要用做循環數組和JSON對象，數組v-for="name in arr"和對象v-for="name in json"都有{{$index}}，對象v-for="(k,v) in json"有{{$key}}。

//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{
            arr:['apple','banana','orange','pear'],
            json:{a:'apple',b:'banana',c:'orange'}
        }
    });
};
//html
<div id="box">
    <ul>
        <li v-for="value in arr">
            {{value}}   {{$index}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="value in json">
            {{value}}   {{$index}}  {{$key}}
        </li>
    </ul>
    <hr>
    <ul>
        <li v-for="(k,v) in json">
            {{k}}   {{v}}   {{$index}}  {{$key}}
        </li>
    </ul>
</div>

2.3 v-show="true/false" 顯示與隱藏，默認dom元素不寫表示true

//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{ //數據
            a:true
        }
    });
};
//html
<div id="box">
    <input type="button" value="按鈕" v-on:click="a=false">
    <div style="width:100px; height:100px; background: red" v-show="a">
    </div>
</div>

注意這里如果用v-for有重復數據的話，需要使用track-by="$index"，綁定不同的序號。例如

<ul>
    <li v-for="val in arr" track-by="$index">
        {{val}}
    </li>
</ul>

自定義指令，不推薦使用元素指令，如想實現類似建議用組件的方式來。注意必須以v-開頭，可以帶參數

<span v-red>
    asdfasd
</span>
Vue.directive('red',function(){
    this.el.style.background='red';
});
//帶參數
<span v-red="a">
    asdfasd
</span>
Vue.directive('red',function(color){
     this.el.style.background=color;
 });
 window.onload=function(){
    var vm=new Vue({
         el:'#box',
         data:{
             a:'blue'
         }
     });
 };
 //元素指令
 <div id="box">
    <zns-red>asdfasdf</zns-red>
</div>
 Vue.elementDirective('zns-red',{
     bind:function(){
         this.el.style.background='red';
     }
 });
3. 事件

v-on:click="函數" 這里的函數調用可以直接寫函數名稱，不需要寫括號()；v-on可以理解為像jQuery一樣用on綁定事件類型，注意事件需要寫在methods里面去定義：v-on:click/mouseout/mouseover/dblclick/mousedown..... 它可以簡寫為@click=""推薦

//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{ //數據
            arr:['apple','banana','orange','pear'],
            json:{a:'apple',b:'banana',c:'orange'}
        },
        methods:{
            show:function(){
                alert(1);
            }
        }
    });
};
//html
<div id="box">
    <input type="button" value="按鈕" v-on:click="show()">
</div>

事件調用可以使用$event參數，它可以當作當前target來使用，例如可以用它來阻止事件冒泡/默認行為等
1、阻止冒泡: a). ev.cancelBubble=true;b). @click.stop 推薦
2、阻止默認行為:a). ev.preventDefault(); b). @contextmenu.prevent 推薦
3、鍵盤值事件 例如 a). @keyup.13 b). @keyup.enter 都是回車事件

  • 方向鍵的上、下、左、右
  • @keyup/keydown.left
  • @keyup/keydown.right
  • @keyup/keydown.up
  • @keyup/keydown.down
//冒泡事件
//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{
        },
        methods:{
            show:function(ev){
                alert(1);
                ev.cancelBubble=true;
            },
            show1:function(){
                alert(1);
            },
            show2:function(){
                alert(2);
            }
        }
    });
};
//html
<div id="box">
    <div @click="show2()">
        <input type="button" value="按鈕" @click="show($event)">
        <input type="button" value="按鈕" @click.stop="show()">
    </div>
</div>

//默認行為
//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{
        },
        methods:{
            show:function(ev){
                alert(1);
                ev.preventDefault();
            },
             show:function(){
                alert(1);
            }
        }
    });
};
//html
<div id="box">
    <input type="button" value="按鈕" @contextmenu="show($event)">
    <input type="button" value="按鈕" @contextmenu.prevent="show()">
    <input type="text" @keyup.enter="show()">  <!-- 你按了回車鍵 -->
</div>
4. 屬性

vue綁定屬性用v-bind: 例如v-bind:src="" ，其它width/height/title....也是。它可以簡寫成:src="" 推薦

//兩種方式顯示圖片，建議用它推薦的屬性綁定方式
//js
window.onload=function(){
    new Vue({
        el:'#box',
        data:{
            url:'https://www.baidu.com/img/bd_logo1.png',
            w:'200px',
            t:'這是一張美麗的圖片'
        }
    });
};
//html
<div id="box">
    ![]({{url}})  <!-- 效果能出來，但是會報一個vue warning警告 -->
    ![](url)
</div>
5. class和style

class和style也是屬性，所以它們綁定的方式跟前面我們講的綁定圖片src類似，例如:class=""等價于v-bind:class="" 或者:style=""等價于v-bind:style="" 。:style和:class都可以接受數組和JSON，不過需要注意的是復合樣式，采用駝峰命名法。

//head :class接受數組
<style>
    .red{
        color: red;
    }
    .blue{
        background: blue;
    }
</style>
<script>
    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                red:'red',
                blue:'blue',
                a:true,
                b:false,
                json:{
                    red:true,
                    blue:true
                },
                style:{
                    color:'red',
                    backgroundColor:'gray'
                }
            }
        });
    };
</script>
//html
<div id="box">
    <strong :class="[red,blue]">文字...</strong>
    <strong :class="{red:true,blue:true}">文字...</strong>
    <strong :class="{red:a,blue:b}">文字...</strong>
    <strong :class="json">文字...</strong>
    <strong :style="style">文字...</strong>
</div>
6. 過濾器

過濾模板數據，系統提供一些過濾器。
a、例如capitalize/lowercase/uppercase/currency/json。 格式參考：{{msg| filterA | filterB}}或{{msg| filterA 參數}}，例如capitalize是首字母大寫，lowercase是全部小寫，uppercase是全部大寫，currency是轉換成錢單位顯示，json是顯示obj對象數據，而不是[object Object]
b、debounce配合事件，延遲執行，單位是毫秒
c、limitBy作用是限制顯示幾個，limitBy可以帶參數，第一個參數代表要取幾個，第二個參數代表從哪里開始，前邊算或者結尾都可以，用法類似substring。注意序號是從0開始算。
d、filterBy 過濾數據，有點類似搜索引擎做的事。filterBy ‘誰’過濾條件顯示對應的數據
e、orderBy 排序 orderBy 1/-1 1代表正序 -1代表倒序
f、自定義過濾器，可以帶參數

<div id="box">
    {{'welcome' | uppercase}}
    {{'WELCOME' | lowercase}}
    {{'WELCOME' | lowercase | capitalize}}
    {{12 | currency}}
    {{12 | currency '￥'}}
    {{obj | json}}
</div>
<input type="text" @keyup="show | debounce 2000"> //代表show事件延遲兩秒執行

data數據為 arr:[1,2,3,4,5]
 <li v-for="val in arr | limitBy 2">  //限制默認顯示兩個
     {{val}}
 </li>
 <li v-for="val in arr | limitBy 2 arr.length-2"> //限制顯示從后面倒數兩位的兩個
    {{val}}
 </li>
 
 data數據為arr:['width','height','background','orange'],    a:''
 <input type="text" v-model="a">
 <ul>
    <li v-for="val in arr | filterBy a">
        {{val}}
    </li>
 </ul>
 
 <li v-for="val in arr | orderBy -1">  //倒序
    {{val}}
 </li>
 
 //自定義過濾器，不帶參數
 <div id="box">   
    {{a | toDou}}
</div>
Vue.filter('toDou',function(input){
    return input<10?'0'+input:''+input;
});
//自定義過濾器，帶參數
<div id="box">
    {{a | toDou 1 2}}
</div>
Vue.filter('toDou',function(input,a,b){
    alert(a+','+b);
    return input<10?'0'+input:''+input;
});
//雙向過濾
 <div id="box">
    <input type="text" v-model="msg | filterHtml">
    <br>
    {{{msg}}}
</div>
Vue.filter('filterHtml',{
    read:function(input){ //model-view
        return input.replace(/<[^<]+>/g,'');
    },
    write:function(val){ //view -> model
        console.log(val);
        return val;
    }
});
7. 數據交互

數據交互請求需要用到vue-resource ，this.$http有幾種方式方向，例如get/post/jsonp等

<script>
    window.onload=function(){
        new Vue({
            el:'body',
            data:{
            },
            methods:{
                get:function(){
                    this.$http.get('get.php',{
                        a:1,
                        b:2
                    }).then(function(res){
                        alert(res.data);
                    },function(res){
                        alert(res.status);
                    });
                },
                post:function(){
                    this.$http.post('post.php',{
                        a:1,
                        b:20
                    },{
                        emulateJSON:true   //post需要設置請求頭
                    }).then(function(res){
                        alert(res.data);
                    },function(res){
                        alert(res.status);
                    });
                },
                getJSONP1:function(){
                    this.$http.jsonp('https://sug.so.360.cn/suggest',{
                        word:'a'
                    }).then(function(res){
                        alert(res.data.s);
                    },function(res){
                        alert(res.status);
                    });
                },
                getJSONP2:function(){
                    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);
                    });
                },
                getPageData:function(n){
                    this.$http({
                        url:URL,
                        data:{
                            act:'get',
                            page:n
                        }
                    }).then(function(res){
                        console.log(res.data);
                    });
                }
            }
        });
    };
</script>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性：var data = { a:...
    云之外閱讀 2,245評論 0贊 6
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容，還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,081評論 0贊 29
  • 基本格式 以json的形式、將數據(支持所有格式)掛載在vue的data上、方法掛載在vue的methods上。 ...
    kirito_song閱讀 791評論 0贊 21
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本，Vue即被注冊為全局變量，可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,107評論 4贊 129
  • vue 2.0 漸進式框架 MVC 單向通信 > m:model 數據層 保存數據 > v:view視圖層 用戶界...
    web前端ling閱讀 756評論 0贊 0