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>
  • 相关阅读:
    流程图如何画
    flex布局
    css函数
    常用的Array相关的属性和方法
    判断一个字符串中出现次数最多的字符,统计这个次数
    css溢出滚动条及去除滚动条的方法
    vue生命周期
    css中添加屏幕自适应方法(rem)
    vue-cli中配置屏幕自适应(px2rem)
    关于解决项目运行时出现的缓存问题
  • 原文地址:https://www.cnblogs.com/lujieting/p/10447959.html
Copyright © 2011-2022 走看看