vue-组件

最新推荐文章于 2023-06-12 09:56:25 发布

shijiaolong0

最新推荐文章于 2023-06-12 09:56:25 发布

阅读量94

点赞数 1

分类专栏： vue 文章标签： vue-组件

本文链接：https://blog.csdn.net/shijiaolong0/article/details/87812318

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>-->
    <script src="lib/vue.min.js"></script>
    <link rel="stylesheet" href="lib/bootstrap.min.css"/>
    <script src="lib/moment-with-locales.min.js"></script>
</head>
<body>
    <div id="app">
        <!--使用组件，直接把组件的名称以html标签的形式引入到页面中,注意命名-->
        <my-com1></my-com1>
        <my-com2></my-com2>
        <my-com3></my-com3>
        <component-private></component-private>
        <com></com>
    </div>
    <!--app外部定义模板-->
    <template id="temp">
        <!--必须用div包裹，否则无法显示-->
        <div>
            <h3>使用Vue创建组件的方式3：有代码提示</h3>
            <button class="btn btn-info" @click="increment" >加1</button>
            {{count}}
        </div>
    </template>
<script>
    //1.创建组件方式1:Vue.extend
    var com1 = Vue.extend({
        // template展示要显示的html
        template:'<h3>使用Vue.extend创建的组件</h3>' 
    })
   Vue.component('myCom1',com1);
    //创建组件方式2:Vue.component('组件名称',组件模板对象)
   Vue.component('my-com2',{
       template:'<h3>使用Vue.component创建的组件----{{msg}}</h3>',
       //组件可以有自己的data,但是必须是个方法，里面必须返回对象
       data:function(){
           return {
               msg:'这是组件自己的data数据'
           }
       }
   });
   //创建组件方式3：
   Vue.component('my-com3',{
       template:'#temp',
        data:function(){
           return {
               count:0
           }
       },
       methods:{
           increment:function(){
               this.count++;
           }
       }
   });
   //创建组件方式4：
   var com = {
       template:'<h3>使用Vue创建组件的方式4</h3>'
   }
    var app = new Vue({
        el:"#app",
        data:function(){
            return {

            }
        },
        methods:{

        },
        components:{
            //定义私有组件
            'component-private':{
                 template:'<h3>私有组件</h3>'
            },
            com
        }
    });
</script>
</body>
</html>

shijiaolong0

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-组件

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;!--&lt;script src="https://cdn.bootcss
复制链接

扫一扫