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

来源：互联网发布：软件需求说明书编辑：程序博客网时间：2024/05/21 21:45

使用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定义模板

阅读全文

0 0