vuejs 的使用

<div class='box'>
    <p>{{msg}}</p>
    <p>{{name}}</p>
</div>
//創(chuàng)建一個(gè)控制器
new Vue({
    //選擇器澳淑，控制器要去控制哪個(gè)標(biāo)簽比原，給哪個(gè)標(biāo)簽當(dāng)中提供數(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 標(biāo)簽杠巡，則會(huì)被解析 <p v-html = 'msg'></p>
• 顯示標(biāo)簽 <p v-show='true'>123</p> 如果另一個(gè)標(biāo)簽與此標(biāo)簽相反的顯示隱藏則用<p v-else>456</p>
• <p v-pre>{{msg}}</p> 不會(huì)解析直接原樣輸出
• <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> 第二個(gè)參數(shù)變?yōu)橄聵?biāo)，第一個(gè)參數(shù)為值
• <p v-if='true'>123</p> 標(biāo)簽存在與否氢拥，相反的用 v-else 屬性
• vuejs 中沒有templateUrl蚌铜，所以模版都寫在<template></template> 標(biāo)簽中
• <input type='text' v-model='name'> 雙向綁定

// new Vue() 會(huì)返回當(dāng)前的控制器，使用返回值的控制器可以直接調(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() 會(huì)返回當(dāng)前的控制器嫩海，使用返回的控制器可以直接調(diào)用里面的屬性冬殃。
        data:{
            age:10,
        },
        methods:{
            modify:function (agr) {
                this.age = agr;
            }
        }

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


</script>

<div @click = 'show'>
    <button @keydow='modify($event)'>點(diǎn)擊</button>
    //給指令鍵注冊(cè)事件
    <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>

• 綁定控制器時(shí)，不建議綁定到 body\html 上叁怪，在 vue2.0當(dāng)中這么做會(huì)報(bào)錯(cuò)审葬；在 vue2.0 里，所有的內(nèi)置過濾器都被刪除了奕谭，以壓縮框架體積涣觉，但是可以自定義過濾器

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

自定義指令

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

Vue.directive('red',function(){
    //在自定義指令當(dāng)中可以拿到指令標(biāo)簽
    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>

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

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

 new Vue({
        el:'#app',
        data:{
            num:3,
            price : 10,
        },
        methods:{
            count(){
                this.total;       //會(huì)自動(dòng)調(diào)用get方法
                this.total = 10;  //會(huì)自動(dòng)調(diào)用set方法把10傳給set方法
            }
        },
        computed:{ //當(dāng)中聲明都是計(jì)算屬性
                    //在每一個(gè)計(jì)算屬性當(dāng)中有兩個(gè)方法，get方法與set方法
                    //get與set方法是自己調(diào)用的方法血柳。
                    //get方法調(diào)用時(shí)機(jī)：當(dāng)使用 this.total時(shí)會(huì)調(diào)用get方法  return的值官册，就是定義屬性的值。
                    //想要獲取屬性時(shí)难捌，會(huì)自動(dòng)調(diào)用get方法
                    /*----------------------------*/
                    //set方法調(diào)用時(shí)機(jī)
                    //給該屬性賦值是會(huì)自動(dòng)調(diào)用set方法  this.total = 100;  會(huì)自動(dòng)調(diào)用set 并且會(huì)把賦的值傳給set的參數(shù)膝宁。
                    //在set方法當(dāng)中，不能再使用.屬性=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ù)：在某個(gè)特定時(shí)期會(huì)自動(dòng)調(diào)用相應(yīng)的方法栖榨。
            alert('實(shí)例已經(jīng)創(chuàng)建');        //生命周期：從生到死的過程昆汹。
        },
        beforeCompile:function(){
            alert('編譯之前');
        },
        compiled:function(){
            alert('編譯之后');
        },
        ready:function(){
            alert('準(zhǔn)備插入到文檔中');
        },
        beforeDestroy:function(){
            alert('銷毀之前');
        },
        destroyed:function(){
            alert('銷毀之后');
        }
    });

全局組件

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

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

局部組件

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

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

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

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

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

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

組件的模版

    new Vue({
        el:'#app',
        components:{
            xmg:{
                template:'#temp1'  //不能使用templateUrl 來引用模板文件
                                     //Vue考慮到性能性能原因。
                                     //因?yàn)闉g覽器不能訪問文件挤聘。angular當(dāng)中使用url來訪問一個(gè)文件轰枝，
                                    // 它是發(fā)送了一個(gè)Ajax請(qǐng)求,拿到請(qǐng)求結(jié)果，插入到文檔當(dāng)中组去。
            }
        }
    })

動(dòng)態(tài)組件

<div id="app">
    <button @click="change">切換</button>
    <!--在屬性前面加上":" 會(huì)解析后面的內(nèi)容 到控制器當(dāng)中查找有沒有這個(gè)屬性-->
    <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">',
                    //在使用組件時(shí)，外部可以傳遞一個(gè)值進(jìn)來
                    //<childcom :msg="name"></childcom>
                    //父數(shù)據(jù)的變化會(huì)影響子數(shù)據(jù)變化
                    //子數(shù)據(jù)變化不會(huì)影響父數(shù)據(jù)變化
                    //傳遞數(shù)據(jù)的時(shí)候如果加上 .sync 表示雙向綁定，互相影響
                    // <childcom :msg.sync="name"></childcom>
                    props:['msg']
                }
            }
        }
    }
});