美文网首页
Vue中创建组件

Vue中创建组件

作者: ___大鱼___ | 来源:发表于2018-11-08 15:43 被阅读6次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
    
    <!-- 如果要使用组件, 直接把组件的名称, 以HTML标签的形式显示出来即可
    如何定义的模板名为驼峰命名中有大写 如 codDocker 则需要用cod-docker来展示, 否则页面不会展示
    -->
    <mycom1></mycom1>
    
    
    
    
        </div>
    
    
        <script>
            // 使用Vue.extend 来创建全局的Vue组件
        var com1 = Vue.extend({
           template: '<h3>我是你大哥你服不服</h3>'  // 通过 template 属性, 指定了组件需要展示的HTML结构
        });
    
        // 使用 Vue.component('组件的名称', 要展示的组件)
        Vue.component('mycom1', com1)
    
    
            var app = new Vue({
                el: '#app',
                data:{
    
    
                },
                methods: {
    
                },
                created: function () {
    
                },
                mounted: function () {
    
                }
            })
    
        </script>
    </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:Vue中创建组件

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