此文章只做vue特性記錄，方便與API索引學(xué)習(xí)

組件component

• 組件模板template內(nèi)不能直接放多標(biāo)簽的片段代碼，必須要有個(gè)元素包裹所有的元素

<template id='id'>
  <div>//必須有的包裹元素
    //other html...
  </div>
</template>

• 組件定義Vue.extend定義方式改變，不推薦繼續(xù)使用
  1.0此方法繼續(xù)可用:

Vue.component('compt-name', {
    data(){},
    methods:{},
    template:
})

2.0簡介用法: (全局)

<template id='id'>
  <div>//必須有的包裹元素
    //other html...
  </div>
</template>
var Comp = {
    template: '#id'
}
new Vue({
    el: '#box',
    data: {},
})
Vue.component('my-comp', Comp);
<div id='box'>
    <my-comp></my-comp>
</div>

2.0簡介用法: (局部)

var Comp = {
    template: '#id'
}
new Vue({
    el: '#box',
    data: {},
    components: {
        'my-comp': Comp
    }
})

生命周期

new Vue({
    el: '#id',
    data: {},
    beforeCreate(){ console.log('實(shí)例剛創(chuàng)建但是沒data') },
    created(){ console.log('實(shí)例創(chuàng)建有data，DOM未創(chuàng)建') },
    beforeMount(){ console.log('模板編譯(掛載)之前') },
    mounted(){ console.log(''模板編譯(掛載)完成) },//同1.0ready()
     //組件更新的生命周期在執(zhí)行方法更新數(shù)據(jù)時(shí)執(zhí)行
    beforeUpdate(){ console.log('組件更新之前') },
    updated(){ console.log('組件更新完畢') }
    //組件 銷毀
    beforeDestroy(){},
    destroyed(){}
})

v-for循環(huán)

<ul>
    <li v-for='(val, idx) in arr'>{{val}}, {{idx}}</li>
</ul>

<ul>
    <li v-for='(val, key) in json'>{{val}}, {{key}}</li>
</ul>

鍵盤指令

Vue.config.keyCodes.ctrl = 17;
<input type='text' @keyup.ctrl="fn()">

過濾器

• 內(nèi)置過濾器全部刪除，推薦lodash工具庫+自己封裝實(shí)現(xiàn)

Vue.filter('todo', function(in, a, b) {
    return in + 'out';
})
<div>{{msg | todo('1', '2')}}</div>

組件的通信

• 子組件取父組件數(shù)據(jù)仍然使用props,但是2.0禁止原先子組件修改父組件的數(shù)據(jù)的方式，2.0在此做了限制。

data:{ obj: {a:'1', b:'2'} }//父組件傳給子組件數(shù)據(jù)必須是對(duì)象
props:['myData']//子組件定義myData取得父組件data中的obj對(duì)象數(shù)據(jù)
<child :myData="obj"></child>//子組件模板使用props來的父組件數(shù)據(jù)
this.myData.a = '10'//子組件可以修改myData.a來同步修改父組件obj.a的數(shù)據(jù)，修改了子組件的this.myData.a也同時(shí)修改了父組件myData.a的數(shù)據(jù)

• 單一事件管理組件通信 vuex原理
  • 定義一個(gè)事件中心var Event = new Vue()
    發(fā)送數(shù)據(jù)的組件Event.$emit(‘event name’, data);
    接受數(shù)據(jù)的組件Event.$on('event name', function(data){}).bind(this)
    范例

    <script>
        //準(zhǔn)備一個(gè)空的實(shí)例對(duì)象
        var Event=new Vue();

        var A={
            template:`
                <div>
                    <span>我是A組件</span> -> {{a}}
                    <input type="button" value="把A數(shù)據(jù)給C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('a-msg',this.a);
                }
            },
            data(){
                return {
                    a:'我是a數(shù)據(jù)'
                }
            }
        };
        var B={
            template:`
                <div>
                    <span>我是B組件</span> -> {{a}}
                    <input type="button" value="把B數(shù)據(jù)給C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('b-msg',this.a);
                }
            },
            data(){
                return {
                    a:'我是b數(shù)據(jù)'
                }
            }
        };
        var C={
            template:`
                <div>
                    <h3>我是C組件</h3>
                    <span>接收過來的A的數(shù)據(jù)為: {{a}}</span>
                    <br>
                    <span>接收過來的B的數(shù)據(jù)為: {}</span>
                </div>
            `,
            data(){
                return {
                    a:'',
                    b:''
                }
            },
            mounted(){
                //var _this=this;
                //接收A組件的數(shù)據(jù)
                Event.$on('a-msg',function(a){
                    this.a=a;
                }.bind(this));

                //接收B組件的數(shù)據(jù)
                Event.$on('b-msg',function(a){
                    this.b=a;
                }.bind(this));
            }
        };
        window.onload=function(){
            new Vue({
                el:'#box',
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>
</body>