组件component

组件模板template内不能直接放多标签的片段代码，必须要有个元素包裹所有的元素

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

组件定义Vue.extend定义方式改变，不推荐继续使用
1.0此方法继续可用:

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('实例刚创建但是没data') },
    created(){ console.log('实例创建有data，DOM未创建') },
    beforeMount(){ console.log('模板编译(挂载)之前') },
    mounted(){ console.log(''模板编译(挂载)完成) },//同1.0ready()
     //组件更新的生命周期在执行方法更新数据时执行
    beforeUpdate(){ console.log('组件更新之前') },
    updated(){ console.log('组件更新完毕') }
    //组件 销毁
    beforeDestroy(){},
    destroyed(){}
})

v-for循环

<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()">

过滤器

内置过滤器全部删除，推荐lodash工具库+自己封装实现

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

组件的通信

子组件取父组件数据仍然使用props,但是2.0禁止原先子组件修改父组件的数据的方式，2.0在此做了限制。

data:{ obj: {a:'1', b:'2'} }//父组件传给子组件数据必须是对象
props:['myData']//子组件定义myData取得父组件data中的obj对象数据
<child :myData="obj"></child>//子组件模板使用props来的父组件数据
this.myData.a = '10'//子组件可以修改myData.a来同步修改父组件obj.a的数据，修改了子组件的this.myData.a也同时修改了父组件myData.a的数据

单一事件管理组件通信 vuex原理
- 定义一个事件中心var Event = new Vue()
  发送数据的组件Event.$emit(‘event name’, data);
  接受数据的组件Event.$on('event name', function(data){}).bind(this)
  范例

    <script>
        //准备一个空的实例对象
        var Event=new Vue();

        var A={
            template:`
                <div>
                    <span>我是A组件</span> -> {{a}}
                    <input type="button" value="把A数据给C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('a-msg',this.a);
                }
            },
            data(){
                return {
                    a:'我是a数据'
                }
            }
        };
        var B={
            template:`
                <div>
                    <span>我是B组件</span> -> {{a}}
                    <input type="button" value="把B数据给C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('b-msg',this.a);
                }
            },
            data(){
                return {
                    a:'我是b数据'
                }
            }
        };
        var C={
            template:`
                <div>
                    <h3>我是C组件</h3>
                    <span>接收过来的A的数据为: {{a}}</span>
                    <br>
                    <span>接收过来的B的数据为: {{b}}</span>
                </div>
            `,
            data(){
                return {
                    a:'',
                    b:''
                }
            },
            mounted(){
                //var _this=this;
                //接收A组件的数据
                Event.$on('a-msg',function(a){
                    this.a=a;
                }.bind(this));

                //接收B组件的数据
                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>