zoukankan      html  css  js  c++  java
  • 组件化和模块化

    <!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>Title</title>
    <script src="js/vue-2.4.0.js"></script>
    </head>
    <body>
    <!--
    组件:就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分功能模块

    模块化:从代码逻辑的角度进行划分的,方便代码分层开发,保证每个功能模块的职能单一
    组件化:从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用
    -->

    <!--创建组件的方式-->
    <div id="app">
    <!--驼峰命名-->
    <!--<my-com1></my-com1>-->

    <!--不使用驼峰命名-->
    <!--<mycom1></mycom1>-->

    <!--第3种创建方式-->
    <mycom3></mycom3>
    </div>

    <template id="temp1">
    <div>
    <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
    <h4>123456</h4>
    </div>
    </template>

    <script>
    //创建组件的方式1:================================================
    //1:使用Vue.extend 来创建全局的Vue组件
    // const com1=Vue.extend({
    // //通过 template 属性,指定了组件要展示的HTML结构
    // template:'<h3>这是使用 Vue.extend 来创建的组件</h3>'
    // });
    //2:使用Vue.component('组件的名称',创建出来的组件模板对象)
    // Vue.component('myCom1',com1);
    //如果使用 Vue.component 定义全局组件的时候,组件名称使用了驼峰命名法,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时两个单词之间使用 - 连接
    //如果不使用驼峰命名,则直接拿名称来使用
    // Vue.component('mycom1',com1);

    //简写:s
    // Vue.component('mycom1',Vue.extend({
    // template:'<h3>这是使用 Vue.extend 来创建的组件</h3>'
    // }));


    //创建组件的方式2:================================================
    // Vue.component('mycom1',{
    // //注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
    // template:'<div><h3>这是使用 Vue.component 来创建的组件</h3><span>123</span></div>'
    // });


    //创建组件的方式3:================================================
    Vue.component('mycom3',{
    template:'#temp1'
    });


    //3种创建组件都需要创建vue 实例
    const vm=new Vue({
    el:'#app',
    data:{},
    methods:{}
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    Linux基础命令---arch
    JSON漫谈
    django中外键关联表的查询随笔
    <django中render_to_response的可选参数和使用方法>
    有趣的Redis:缓存被我写满了,该怎么办?
    2020全球C++及系统软件技术大会成功落下帷幕
    AWS 宣布创建 Elasticsearch 和 Kibana 分支
    Flutter开发指南之理论篇:Dart语法05(单线程模型,事件循环模型,Isolate)
    自定义注解!绝对是程序员装逼的利器!!
    Java8 Stream
  • 原文地址:https://www.cnblogs.com/lujieting/p/10447959.html
Copyright © 2011-2022 走看看