vue25---vue2.0变化

组件模版:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        {{msg}}
    </div>
</body>
</html>






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue1.0.js"></script>
    <script>
        Vue.component('my-aaa',{//组件这种写法
            template:'<h3>我是组件</h3><strong>我是加粗标签</strong>'
        });

        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
        {{msg}}
    </div>
</body>
</html>







<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        Vue.component('my-aaa',{//全局
            template:'#aaa'
        });

        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                }
            });
        };
    </script>
</head>
<body>
    <template id="aaa">
        <div>
            <h3>我是组件</h3>
            <strong>我是加粗标签</strong>
        </div>
    </template>
    <div id="box">
        <my-aaa></my-aaa>
        {{msg}}
    </div>
</body>
</html>

组件定义方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        var Home={  //这是2.0组件
            template:'#aaa'
        };  //Vue.extend()

        Vue.component('my-aaa',Home);//全局


        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                }
            });
        };
    </script>
</head>
<body>
    <template id="aaa">
        <div>
            <h3>我是组件</h3>
            <strong>我是加粗标签</strong>
        </div>
    </template>
    <div id="box">
        <my-aaa></my-aaa>
        {{msg}}
    </div>
</body>
</html>






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        var Home={  //这是2.0组件
            template:'#aaa'
        };  //Vue.extend()



        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                },
                components:{//局部
                    'aaa':Home
                }
            });
        };
    </script>
</head>
<body>
    <template id="aaa">
        <div>
            <h3>我是组件</h3>
            <strong>我是加粗标签</strong>
        </div>
    </template>
    <div id="box">
        <aaa></aaa>
        {{msg}}
    </div>
</body>
</html>

声明周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能社——http://www.zhinengshe.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                },
                methods:{
                    update(){
                        this.msg='大家好';
                    },
                    destroy(){
                        this.$destroy();//this是new Vue对象
                    }
                },
                beforeCreate(){
                    console.log('组件实例刚刚被创建');
                },
                created(){
                    console.log('实例已经创建完成');
                },
                beforeMount(){
                    console.log('模板编译之前');
                },
                mounted(){
                    console.log('模板编译完成');
                },
                beforeUpdate(){
                    console.log('组件更新之前');
                },
                updated(){
                    console.log('组件更新完毕');
                },
                beforeDestroy(){
                    console.log('组件销毁之前');
                },
                destroyed(){
                    console.log('组件销毁之后');
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="更新数据" @click="update">
        <input type="button" value="销毁组件" @click="destroy">
        {{msg}}
    </div>
</body>
</html>

 

vue2.0:
    bower info vue

    http://vuejs.org/
到了2.0以后,有哪些变化?

1. 在每个组件模板,不在支持片段代码
    组件中模板:
        之前:
            <template>
                <h3>我是组件</h3><strong>我是加粗标签</strong>
            </template>
        现在:  必须有根元素,包裹住所有的代码
            <template id="aaa">
                    <div>
                        <h3>我是组件</h3>
                        <strong>我是加粗标签</strong>
                    </div>
            </template>
            
2. 关于组件定义
    Vue.extend    这种方式,在2.0里面有,但是有一些改动,这种写法,即使能用,咱也不用——--------废弃
    
    Vue.component(组件名称,{    在2.0继续能用
        data(){}
        methods:{}
        template:
    });

    2.0推出一个组件,简洁定义方式:
    var Home={
        template:''        ->   Vue.extend()
    };
    
3. 生命周期
    之前:
        init    
        created
        beforeCompile
        compiled
        ready        √    ->     mounted
        beforeDestroy    
        destroyed
    现在:    (创建----编译-----更新------销毁)
        beforeCreate    组件实例刚刚被创建,属性都没有
        created    实例已经创建完成,属性已经绑定
        beforeMount    模板编译之前
        mounted    模板编译之后,代替之前ready  *
        beforeUpdate    组件更新之前
        updated    组件更新完毕    *
        beforeDestroy    组件销毁前
        destroyed    组件销毁后

 

posted @ 2017-06-11 17:15  无天666  阅读(261)  评论(0编辑  收藏  举报