美文网首页
21-基础-组件-全局组件

21-基础-组件-全局组件

作者: 这是这时 | 来源:发表于2019-05-28 01:22 被阅读0次
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width,initial-scale=1.0'>
        <meta http-equiv='X-UA-Compatible' content='ie=edge'>
        <title>Document</title>
    </head>
    
    <body>
        <div id='app'>
            <spanb></spanb>
            <spanb></spanb>
            <spanb></spanb>
    
            <spana></spana>
            <spana></spana>
            <spana></spana>
        </div>
        <script src='./vue.js'></script>
        <script>
            // 两类+三步
            // 全局
            // 1. 定义 (组件名,组件选项所在对象)
            // 注意: 组件名命名,  abc childA child-a
            // 2. 写选项
            // 注意: template 一个根元素   +   data的值必须return{}的函数
            // 3. 使用
            // 自定义标签名
            // Vue.component('hhpp', {
            //     template: ` <div><p>{{msg}}</p> <a href="#">sssss师德师风阿斯蒂芬</a> </div> `,
            //     data() {
            //         return { msg: 'aabbccdd' }
            //     }
            // });
    
            Vue.component("spana", {
            template:
            `
                <div>
                    <span>{{msg}}</span>
                </div>
                `,
                data() {
                    return { msg: '我是span里面的内容' }
                },
                methods: {
    
                }
            })
    
            Vue.component('spanb', {
                template: `
                <div>
                    <span>{{msg}}</span>
                </div>
                `,
                data() {
                    return { msg: '我是数据11111' }
                },
                methods: {
                }
            })
            new Vue({
                el: '#app',
                data: {
                },
                methods: {
                }
            });
        </script>
    </body>
    
    </html>
    

    相关文章

      网友评论

          本文标题:21-基础-组件-全局组件

          本文链接:https://www.haomeiwen.com/subject/tnpltctx.html