vuejs 的使用

<div class='box'>
    <p>{{msg}}</p>
    <p>{{name}}</p>
</div>
//創(chuàng)建一個控制器
new Vue({
    //選擇器，控制器要去控制哪個標簽，給哪個標簽當中提供數(shù)據(jù)
    el:'.box'.
    //數(shù)據(jù)模型，給 el 選擇出來的內(nèi)容提供數(shù)據(jù)
    data:{
        msg:'hello world',
        name:'xmg'
    }
//另一種綁定方法
}).$mount('.box');

vuejs 的一些指令

• 不閃爍的數(shù)據(jù)綁定 <p v-text='msg'></p>
• 如果數(shù)據(jù)中有 html 標簽，則會被解析 <p v-html = 'msg'></p>
• 顯示標簽 <p v-show='true'>123</p> 如果另一個標簽與此標簽相反的顯示隱藏則用<p v-else>456</p>
• <p v-pre>{{msg}}</p> 不會解析直接原樣輸出
• <li v-for="(key,value) in course">{{key}}--{{value}}</li> 遍歷
• 上述遍歷是vue.js1.0，在 vue.js 2.0 中 <li v-for="(value,key) in course">{{value}}--{{key}}</li> 第二個參數(shù)變?yōu)橄聵?，第一個參數(shù)為值
• <p v-if='true'>123</p> 標簽存在與否，相反的用 v-else 屬性
• vuejs 中沒有templateUrl，所以模版都寫在<template></template> 標簽中
• <input type='text' v-model='name'> 雙向綁定

// new Vue() 會返回當前的控制器，使用返回值的控制器可以直接調(diào)用里面的屬性
var vue = new Vue({
    data:{
        name:'',
        age:10
    }
}).$mount('#box');

Vue.js 的事件

vuejs 中的事件指令都寫在控制器下的methods:{} 中

<div id="box">

    <p>{{age}}</p>
    <button v-on:mouseenter="modify(5)">修改年齡</button>
    <button @click="age=20">修改年齡</button>  <!--可以直接在后面操作模型的屬性-->
    <button @click="modify(20)">修改年齡</button>  <!--可以直接在后面操作模型的屬性-->

</div>

<script>

    var vue = new Vue({     //new Vue() 會返回當前的控制器，使用返回的控制器可以直接調(diào)用里面的屬性。
        data:{
            age:10,
        },
        methods:{
            modify:function (agr) {
                this.age = agr;
            }
        }

    }).$mount('#box');   //$mount(選擇器)


</script>

<div @click = 'show'>
    <button @keydow='modify($event)'>點擊</button>
    //給指令鍵注冊事件
    <input type="text" @keydow.xmg="down($event)">
</div>

<script>
    Vue.directive('on').keyCodes.xmg = 17;
    new Vue({
        data:{
            age:10
        },
        methods:{
            modify:function(e){
                this.age = 20;
                //阻止事件冒泡
                e.cancelBubble = true ;
            }.
            down:function(e){
                alert('down----' + e.keyCode);
            }
        }
    }).$mount('#box');
</script>

vue.js 過濾器

<div id="app">
    <p>{{name | uppercase | lowercase}}</p>
    <p>{{price | currency '￥'}}</p> <!-- 傳參通過空格來傳參-->
    <ul>
        <li v-for="value in curse | filterBy 'css'">{{value}}</li>
    </ul>

    <ul>
        <li v-for="value in curse | limitBy  2">{{value}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'hello',
            price : 10,
            curse:['css','js','html']
        }
    });

</script>

• 綁定控制器時，不建議綁定到 body\html 上，在 vue2.0當中這么做會報錯；在 vue2.0 里，所有的內(nèi)置過濾器都被刪除了，以壓縮框架體積，但是可以自定義過濾器

Vue.filter('xmgCurrency',function(input,a){
    return a + input;
})

自定義指令

• Vue.directive 定義的指令都是以屬性形式的 'Attribute'

Vue.directive('red',function(){
    //在自定義指令當中可以拿到指令標簽
    this.el.style.background = 'red';
})

• 自定義指令可以傳參數(shù)

Vue.directive('color',function(color){
    this.el.style.background = color;
})

• 自定義元素指令

Vue.elementDirective('xmg-red',{
    bind:function(){
        this.el.style.background = 'red';
    }
})

<p>{{name}}</p>
<p v-red>123456</p>
<p v-color=" 'green' ">77777</p>
<xmg-red>777788888</xmg-red>

計算屬性 get 方法和 set 方法的調(diào)用形式

• 點語法調(diào)用的是 get 方法
• 點等于調(diào)用的是 set 方法

 new Vue({
        el:'#app',
        data:{
            num:3,
            price : 10,
        },
        methods:{
            count(){
                this.total;       //會自動調(diào)用get方法
                this.total = 10;  //會自動調(diào)用set方法把10傳給set方法
            }
        },
        computed:{ //當中聲明都是計算屬性
                    //在每一個計算屬性當中有兩個方法，get方法與set方法
                    //get與set方法是自己調(diào)用的方法。
                    //get方法調(diào)用時機：當使用 this.total時會調(diào)用get方法  return的值，就是定義屬性的值。
                    //想要獲取屬性時，會自動調(diào)用get方法
                    /*----------------------------*/
                    //set方法調(diào)用時機
                    //給該屬性賦值是會自動調(diào)用set方法  this.total = 100;  會自動調(diào)用set 并且會把賦的值傳給set的參數(shù)。
                    //在set方法當中，不能再使用.屬性=value    this.tataol = 100;
            total:{
                get(){
                    console.log('調(diào)用了get方法'+value);
                    return this.price * this.num + 1;
                },
                set(value){
                    this.total = 20;
                }
            },
            age:{
                get(){
                    console.log('調(diào)用了get方法'+value);
                    return this.price * this.num + 1;
                },
                set(value){
                    this.total = 20;
                }
            }
        }
    });

生命周期 鉤子函數(shù)

在 vue2.0 鉤子函數(shù)有所變化

 var vue =  new Vue({
        el:'#app',
        data:{
            name:'hello',
            price : 10,
            curse:['css','js','html']
        },
        methods:{
            destroyVue:function () {
                alert(1);
                vue.$destroy();
                this.$destroy();
            }
        },
        created:function(){               //鉤子函數(shù)：在某個特定時期會自動調(diào)用相應(yīng)的方法。
            alert('實例已經(jīng)創(chuàng)建');        //生命周期：從生到死的過程。
        },
        beforeCompile:function(){
            alert('編譯之前');
        },
        compiled:function(){
            alert('編譯之后');
        },
        ready:function(){
            alert('準備插入到文檔中');
        },
        beforeDestroy:function(){
            alert('銷毀之前');
        },
        destroyed:function(){
            alert('銷毀之后');
        }
    });

全局組件

組件本質(zhì)就是模版

//創(chuàng)建了一個模版
var ext = Vue.extend({
    template:'<h1>我是組件</h1>'
});
//全局組件：在任何一個控制器當中都可以使用此組件
Vue.component('xmg',ext);

局部組件

• 局部組件：只能在自己聲明的控制器中使用，可以定義多個

var ext = Vue.extend({
    template:'<h1>我是組件</h1>'
});
new Vue({
    el:'.box1',
    data:{
        msg:'xmg'
    },
    components:{
        xmg:ext,
        gxq:{
            template:'<h1>我是 gxq</h1>'
        }
    }
})

組件綁定數(shù)據(jù)

• 當創(chuàng)建一個組件時，就是一個隔離作用域，里外數(shù)據(jù)不互通

 /*創(chuàng)建了一個模板*/
    var ext =  Vue.extend({
        template:'<h1>我是組件</h1>'
    });
    /*局部組件：只能在自己聲明的控制器當中來使用 ,可以定義多個*/
    new Vue({
       el:'.box1',
        data:{
           msg:'xmg'
        },

        components:{   //當創(chuàng)建一個組件是，就是一個隔離作用域。
            xmg:ext,
            gxq:{
                data:function () {
                  return {
                      msg:'myMsg',
                      name:'name123'
                  }
                },
                methods:{
                    show(){
                        alert('show');
                    }
                },
                template:'<h1>我是gxq組件{{msg}}----{{name}}</h1><button @click="show">點擊</button>'
            }
        }
    });

組件的模版

    new Vue({
        el:'#app',
        components:{
            xmg:{
                template:'#temp1'  //不能使用templateUrl 來引用模板文件
                                     //Vue考慮到性能性能原因。
                                     //因為瀏覽器不能訪問文件。angular當中使用url來訪問一個文件，
                                    // 它是發(fā)送了一個Ajax請求,拿到請求結(jié)果，插入到文檔當中。
            }
        }
    })

動態(tài)組件

<div id="app">
    <button @click="change">切換</button>
    <!--在屬性前面加上":" 會解析后面的內(nèi)容 到控制器當中查找有沒有這個屬性-->
    <component v-bind:is="name"></component>
    <component is="xmg"></component> <!--不去解析里面的值-->
</div>

 new Vue({
        el:'#app',
        data:{
            name:'xmg'
        },
        methods:{
            change(){
                this.name = 'xmg2';
            }
        },
        components:{
            xmg:{
                template:'<h1>xmg組件</h1>'
            },
            xmg2:{
                template:'<h1>xmg2組件</h1>'
            }  
        }
    })

• es6.0 的函數(shù)寫法

methods:{
    change(){
        this.name = 'xmg2';
    }
}

父子組件

<div id="app">

    <fathercom></fathercom>

</div>


<template id="temp1">

    <h1>xmg組件{{name}}</h1>
    <input type="text" v-model="name">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <hr>
    <!--傳遞的數(shù)據(jù)雙向綁定-->
    <childcom :msg.sync="name"></childcom>

</template>

new Vue({
    el:'#app',
    components:{
        fathercom:{
            template:'#temp1',
            data:function(){
                return {
                    name:'xmg'
                }
            },
            components:{
                //聲明子組件，聲明的子組件只能在父組件的模版中
                children:{
                    template:'<h1>我是子組件{{msg}}</h1> <input type="text" v-model="msg">',
                    //在使用組件時，外部可以傳遞一個值進來
                    //<childcom :msg="name"></childcom>
                    //父數(shù)據(jù)的變化會影響子數(shù)據(jù)變化
                    //子數(shù)據(jù)變化不會影響父數(shù)據(jù)變化
                    //傳遞數(shù)據(jù)的時候如果加上 .sync 表示雙向綁定，互相影響
                    // <childcom :msg.sync="name"></childcom>
                    props:['msg']
                }
            }
        }
    }
});