zoukankan      html  css  js  c++  java
  • vue-3.2-组件的三种定义方式

    1. 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来需要什么样的功能,就去调用对应的组件即可;

    2. 模块化:是从代码的角度进行划分的;方便代码分层开发,保证每个模块的职能单一;

    3. 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用!

    定义组件的三种方式:

      第一种:

    <body>
    <div id="app">
        <!--如果使用组件,直接把组件的名称,以HTML标签的形式,引入到页面中,即可-->
        <mycom1></mycom1>
    </div>
    <script>
        // 1.1 使用 Vue.extend 来创建全局的 Vue 组件
        var com1 = Vue.extend({
            template:'<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性,指定了组件要展示的HTML结构
        })
    
        // 1.2 使用 Vue.component('组件的名称',创建出来的组件模板对象)
        // Vue.component('myCom1', com1)
        // 如果使用 Vue.component 定义全局组件的时候,组件名称使用了 驼峰命名,则在引用组件的时候,需要把 大写的驼峰改为小写的字母,同时,两个单词之间,使用 - 链接;
        // 如果不适用驼峰,则直接拿名称来使用即可;
        Vue.component('mycom1', com1)
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
    </body>

      第二种:

    <body>
    <div id="app">
        <mycom2></mycom2>
    </div>
    <script>
        /*注意:不论是那种方式创建出来的组件,组件的template 属性指向的模板内容,必须有且只能有唯一的一个根元素*/
        Vue.component('mycom2', {
            template:'<div><h3>这是直接使用 Vue.component 创建的组件</h3><span>span元素</span></div>' // 通过 template 属性,指定了组件要展示的HTML结构
        })
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
    </body>

      第三种:

    <body>
    <div id="app">
        <mycom3></mycom3>
    </div>
    <div id="app2">
        <mycom3></mycom3>
        <login></login>
    </div>
    <template id="tmpl">
        <div>
            <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的智能提示和高亮</h1>
            <h4>vue-template</h4>
        </div>
    </template>
    <template id="tmpl2">
        <h1>这是私有的login组件</h1>
    </template>
    <script>
        /*注意:不论是那种方式创建出来的组件,组件的template 属性指向的模板内容,必须有且只能有唯一的一个根元素*/
        Vue.component('mycom3', {
            template:'#tmpl'
        })
        var vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    
        var vm2 = new Vue({
            el:'#app2',
            data:{},
            methods:{},
            filters:{},
            components:{ // 定义实例内部私有组件
                login:{
                    template:'#tmpl2'
                }
            }
    
        })
    </script>
    </body>
  • 相关阅读:
    Write an algorithm such that if an element in an MxN matrix is 0, its entire row and column is set to 0.
    旋转二维数组
    replace empty char with new string,unsafe method和native implementation的性能比较
    判断一字符串是否可以另一字符串重新排列而成
    移除重复字符的几个算法简单比较
    也来纠结一下字符串翻转
    判断重复字符存在:更有意义一点
    程序员常去网站汇总
    sublime
    针对程序集 'SqlServerTime' 的 ALTER ASSEMBLY 失败,因为程序集 'SqlServerTime' 未获授权(PERMISSION_SET = EXTERNAL_ACCESS)
  • 原文地址:https://www.cnblogs.com/cgy-home/p/11335585.html
Copyright © 2011-2022 走看看