欢迎使用CSDN-markdown编辑器

vue学习（五）-vue2.0

组件模板的变化

    // 1.0时候的试用方法
    <template>
        <h3>我是组件</h3>
        <strong>我是加粗标签</strong>
    </template>

    // 2.0时候的使用方法 必须要有一个根标签包裹着，否则出错
    <template id="aaa">
            <div>
                <h3>我是组件</h3>
                <strong>我是加粗标签</strong>
            </div>
    </template>

组件模板的使用发生了变化，2.0之使用组件必须要有跟标签包裹着

具体示例代码如下：

    // 1.0做法
    <div id="box">
        <module></module>
    </div>
    <template id="bbb">
        <h1>模板1!{{msg}}</h1><br>
        <h2>模板1!{{msg}}</h2><br>
    </template>
    <script src="vue.1.0.js"></script>
    <script>
        Vue.component('module',{
            template: '#bbb',
            data(){
                return {
                    msg: '模板！'
                }
            }
        })
        new Vue({
            el: '#box',
            data: {
                msg: 'Vue'
            }
        })
    </script>


    // 2.0做法
    <div id="box">
        <module></module>
    </div>
    <template id="bbb">
        <div>
            <h1>模板1!{{msg}}</h1><br>
            <h2>模板1!{{msg}}</h2><br>
        </div>
    </template>
    <script src="vue.2.0.js"></script>
    <script>
        Vue.component('module',{
            template: '#bbb',
            data(){
                return {
                    msg: '模板！'
                }
            }
        })
        new Vue({
            el: '#box',
            data: {
                msg: 'Vue'
            }
        })
    </script>

如果没有跟标签包裹，报错提示

组件定义有了变化

在1.0的时候，定义组件的形式是通过 Vue.extend({template,data,methods...}) 然后在通过Vue.component的方式来实现组件。
在2.0这种方式也仍然可以使用，但是建议不再使用。因为有了更简单的方式；

    <div id="box">
        <module></module>
    </div>
    <template id="zujian">
        <div>
            <h1>This is vue2.0 zujianModel.</h1>
            <strong>vue2.0</strong>
            <i>{{msg}}</i>
        </div>
    </template>
    <script src="vue.2.0.js"></script>
    <script>
        // vue2.0的做法
        var Home = {
            template: '#zujian',
            data(){
                return {
                    msg: 'msgData'
                }
            }
        }
        Vue.component('module',Home);
        new Vue({
            el: '#box',
            data: {
                msg: 'Vue'
            }
        })
    </script>

生命周期的改变

之前:
    init    
    created
    beforeCompile
    compiled
    ready       √   ->     mounted
    beforeDestroy   
    destroyed
现在:
    beforeCreate    组件实例刚刚被创建,属性都没有
    created 实例已经创建完成，属性已经绑定
    beforeMount 模板编译之前
    mounted 模板编译之后，代替之前ready  *
    beforeUpdate    组件更新之前
    updated 组件更新完毕  *
    beforeDestroy   组件销毁前
    destroyed   组件销毁后

    window.onload=function(){
        new Vue({
            el:'#box',
            data:{
                msg:'welcome vue2.0'
            },
            methods:{
                update(){
                    this.msg='大家好';
                },
                destroy(){
                    this.$destroy();
                }
            },
            beforeCreate(){
                console.log('组件实例刚刚被创建');
            },
            created(){
                console.log('实例已经创建完成');
            },
            beforeMount(){
                console.log('模板编译之前');
            },
            mounted(){
                console.log('模板编译完成');
            },
            beforeUpdate(){
                console.log('组件更新之前');
            },
            updated(){
                console.log('组件更新完毕');
            },
            beforeDestroy(){
                console.log('组件销毁之前');
            },
            destroyed(){
                console.log('组件销毁之后');
            }
        });