美文网首页
2020-02-14

2020-02-14

作者: 我是萌哒哒小羊 | 来源:发表于2020-02-14 18:36 被阅读0次

    组件创建的方法3

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        </head>
        <body>
            <!-- 在被控制的#app外面,使用template元素,定义组件的HTML模板结构 -->
            <div id="app">
                <mycom3></mycom3>
                <login></login>
                
            </div>
            
            <template id="tmp1">
                <div>
                    <h1>这是通过template元素,在外部定义的组件结构,这个方式,有代码的只能提示高亮</h1>
                </div>
            </template>
            
            <template id="tmp2">
                <div>
                    <h1>这里使用的是私有组件</h1>
                </div>
            </template>
            <script type="text/javascript">
                
                Vue.component('mycom3',{
                    template:'#tmp1'
                })
                
                var vm = new Vue({
                    el:'#app',
                    data:{},
                    methods:{},
                    components:{
                        login:{
                            template:'#tmp2'
                        }
                    }
                })
            </script>
        </body>
    </html>
    

    相关文章

      网友评论

          本文标题:2020-02-14

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