【16】vue.js — 元件

有心部落格發表於2017-09-08
Vue.js元件

全域性元件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa></aaa>
        </div>
    </body>
    <script>
        var Aaa = Vue.extend({
            template: '<h3>{{msg}}</h3>',
            //元件裡放資料data必須是函式形式且返回的是JSON物件格式
            data() {
                return {
                    msg: '我是標題2'
                }
            }
        });
        //自定義元件
        Vue.component('aaa',Aaa);
        //vue必須得渲染下
        var vm = new Vue({
            el: '#box'
        });
    </script>
</html>

區域性元件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa></aaa>
        </div>
    </body>
    <script>
        var Aaa = Vue.extend({
            template: '<h3>{{msg}}</h3>',
            data() {
                return {
                    msg: '我是標題2'
                }
            }
        });
        var vm = new Vue({
            el: '#box',
            //區域性元件
            components: {
                aaa: Aaa        //使用aaa標籤將會插入上面的標籤
            }
        });
    </script>
</html>

元件的另一種玩法

全域性元件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <my-aaa></my-aaa>
        </div>
    </body>
    <script>
        var Aaa = Vue.component('my-aaa',{
            template: '<strong>好</strong>'
        });
        var vm = new Vue({
            el: '#box'
        });
    </script>
</html>

區域性元件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <my-aaa></my-aaa>
        </div>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            components: {
                'my-aaa': {
                    data() {
                        //返回資料
                        return {
                            msg: 'welcome vue'
                        }
                    },
                    methods: {
                        change() {
                            this.msg = 'changes';
                        }
                    },
                    template: '<h2 @click="change">標題2->{{msg}}</h2>'
                }
            }
        });
    </script>
</html>

相關文章