14 定义数组的两种方式

最新推荐文章于 2022-12-11 16:51:15 发布

学习总不晚

最新推荐文章于 2022-12-11 16:51:15 发布

阅读量607

点赞数

分类专栏： Vue 文章标签：定义数组的两种方式

本文链接：https://blog.csdn.net/u013472738/article/details/100185497

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文探讨了在Vue.js中定义组件的两种方式：全局组件和私有组件。全局组件可以在应用的任何地方直接使用，而私有组件则限制在特定范围内。通过在template对应的标签中引入组件，可以方便地实现页面构建。

摘要由CSDN通过智能技术生成

划重点

组件：component （全局组件、私有组件）
使用组件包含在template 对应的标签中；

关东煮

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="./lib/vue-2.6.10.js"></script>
    <style>
        h2 {
            background-color: #999;
            border-color: antiquewhite;
            color: red
        }
    </style>
</head>

<body>

    <!--  第一个 div 在Vue中的el 中的使用 -->
    <div id="app">


        <hr>
        <h2> 第一种</h2>
        <hr>

        <my-com1></my-com1>
        <mycom2></mycom2>

        <hr>
        <h2>第二种</h2>
        <hr>
        <mycomm3></mycomm3>

        <hr>
        <h2>最简化的写法</h2>
        <hr>
        <mycommm4></mycommm4>


        <hr>
        <h2>template和最外层同一级别 定义的template 的引用</h2>
        <mytemplate></mytemplate>



        <hr>
        <testcomponent></testcomponent>

    </div>



    <!-- 这个是全局的定义的组件 -->
    <!--  这里定一个 的 template 的标签 和 el中对应的id 的div是同一级别的  -->
    <template id="div_template_name">
        <div>

            <label>?
                <input type="text" style="width: 300px" value="我是template中的标签?️">
            </label>

            <h5>标签H5</h5>
        </div>
    </template>

    <!-- 这个是第二个 div 在el 中使用的 -->
    <div id="app2">
        <hr>
        <hr>
        <h2> 在第二个 el 对应的div 中 :全局中使用组件：template ；</h2>
        <h3>template和最外层同一级别 定义的template 的引用</h3>
        <mytemplate></mytemplate>

    </div>


    <!--  定义私有的组件 也是放在最外层  -->
    <template id="privatecomm">
        <div>
            <h3   style="color: aquamarine">定义私有的=局部使用的组件123458999</h3>
        </div>

    </template>
    <script>
        //定义组件的两种方式：  定义的组件：template中包含的元素只能并列一个父元素/或者一个元素 ；；；也就是说里面的标签容器只能有一个；但是这个标签容器里面有正常的使用的标签元素
        //第一种方式：
        var com1 = Vue.extend({//com1:代表定义的组件的一个属性名称
            template: '<h3> 这是使用 Vue.extend 定义的组件</h3>'
        })
        //Vue.component 中的第一个参数是：对应的 在全局使用的 组件的名称；第二个参数是：对应的定义的一个组件的引用名称 
        Vue.component('myCom1', com1);//当组件的名称是驼峰（有大写字母）的时候；那么在当做标签在使用的时候应该把大写改成小写并在这两个字母前添加一个：-  如：<my-com1></my-com1>
        Vue.component('mycom2', com1);//当组件的名称都是小写的时候；那么在使用的时候直接使用其名字即可；如：<mycom2></mycom2>

        //第二种 定义组件的方式：（可以看做是简写的方式）
        Vue.component('mycomm3', Vue.extend({
            template: '<div><h3>这个是对 Vue.compontent  直接使用 </h3><h4 >我是template中的父标签中的一个元素</h4> </div>'
        }))
        //或者  再次简化一下
        Vue.component('mycommm4', {
            template: '<div><h3>这个是对 Vue.compontent  最简化的使用 </h3><h5 >我是template中的父标签中的一个元素</h5> </div>'

        })

        //这里考虑到 标签在  template 中写的时候没有提示 ；感觉操作不方便 ，那么我们把template中要写的内容抽离出来进行引用
        Vue.component('mytemplate', {

            template: '#div_template_name'
            //这里引用的id为：div_template_name 的标签；；但是这个 template的定义需要在 总的div（id为app）的外面；也就是和 Vue中el引用的id标签是同一级别的 

        })

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
       
            },
             //上面?学习的是定义全局的使用的组件；下面第一个局部 (私有) 使用的组件 
             components: {
                    testcomponent:{//testcomponent：组件名称
                        template: '#privatecomm'//定义的id为：privatecomm 标签
                    }
                }
        })


        var vm = new Vue({
            el: '#app2',
            data: {},
            methods: {

            }
        })

    </script>
</body>

</html>