【17】vue.js — 元件（模板）

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

使用script標籤製作模板

<!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-data></my-data>
        </div>
        <script type="x-template" id="aaa">
            <h2 @click="change">標題2 -> {{msg}}</h2>
            <ul>
                <li>1111</li>
                <li>2222</li>
                <li>3333</li>
                <li>4444</li>
            </ul>
        </script>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            components: {
                'my-data': {
                    data() {
                        return {
                            msg: 'welcome vue'
                        }
                    },
                    methods: {
                        change() {
                            this.msg = 'changed';
                        }
                    },
                    template: '#aaa'
                }
            }
        });
    </script>
</html>

使用template標籤製作模板

<!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-data></my-data>
        </div>
        <template id="aaa">
            <h1>{{msg}}</h1>
            <ul>
                <li v-for="val in arr">
                    {{val}}
                </li>
            </ul>
        </template>
    </body>
    <script>
        var vm = new Vue({
            el: '#box',
            components: {
                'my-data': {
                    data() {
                        return {
                            msg: 'welcome vue',
                            arr: ['cat','dog','sheep']
                        }
                    },
                    template: '#aaa'
                }
            }
        });
    </script>
</html>

vue定義模板

相關文章