组件化与模块化的区别

　　什么是组件：组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块

，将来我们需要什么功能，就可以去调用对应的组件即可

　　组件化与模块化的不同：

　　　　模块化：是从代码逻辑的角度进行分析，方便代码分层开发，保证每个功能模块的只能单一　　

　　　　组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用。

<!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.4.0.js"></script>

</head>

<body>

    <div class="app">

        <!-- 引用组件的名称 -->

        <login></login>

        <login2></login2>

        <login3></login3>

        <hr>

        <login6></login6>

    </div>

    <!-- 注意 这里的id是必须的，不要在实例控制中的divcalss app 中去写template -->

    <template id="login3">

            <div>

                <h2>我是第三种方式创建出来的</h2>

            </div>

    </template>

<!-- Vue实例 -->

    <script>

        // Component 组件的创建

        // 注意  template 中的容器 只能有一个父元素，不能包含两个 你可以用一个div包裹

        // 第一种创建全局组件

        // extend是注册组件函数，他返回一个对象

       var comobj= Vue.extend({

            template:"<h1>我是全局组件</h1>"

        })

        // component函数提交组件，第一个参数为组件的名称，第二个参数是一个注册组件的对象

        Vue.component("login",comobj)   

        // 第二种创建方式

        // component 中直接写上一个模板对象

        Vue.component('login2',{template:'<h1>我是第二种v创建出来的组件</h1>'});

        // 第三种创建的方式 首先在元素中创建一个template模板

        Vue.component('login3',{template:'#login3'})

    var vm=new Vue({

        el:'.app',

        data:{},

        // 定义私有组件 和全局差不多 组件名称和对象，也可以使用template模板来创建

        components:{

            login6:{template:'#login3'}

        }

    })

    </script>

</body>

</html>

组件的引用可以使用组件的名字直接引用 也可以使用Vue给我们提供的的元素

Vue 提供了component，来展示对应名称的组件

component是一个占位符，:is属性可以用来指定要展示的组件名称

<compnent :is="comName" ></component>

    <div class="app">

        <login></login>

        <login2></login2>

        <!-- 使用component 占位符来展示组件 -->

        <!-- 注意 :is 是绑定的属性，需要在实例的data中绑定的 组件的名称是字符串 -->

        <!-- 其中 他还提供了 mode属性来切换动画的先进先出的问题  -->

        <component :is="login='login'" mode="out-in"></component>

    </div>

Vue组件component创建及使用的更多相关文章

  1. vue - 组件的创建

    组件的创建 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例中使 ...

  2. 二、Vue组件(component)：组件的相互引用、通过props实现父子组件互传值

    一.组件各部分说明及互相引用 1.一个vue组件由三个部分组成 Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 1.1 组件的基本引用代码 ...

  3. 怎样创建并使用 vue 组件 (component) ?

    组件化开发 需要使用到组件, 围绕组件, Vue 提供了一系列功能方法, 这里仅记录组件的 最简单 的使用方法. 1. 通过 Vue.component(tagName, options) 注册一个 ...

  4. [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick

    思路: 1. 组件的好处,重用性 2. 组件对的slot用法 3. 子如何调用父的数据 4. 子如何触发父的方法执行 5. 父如何触发子的方法执行 6. 如何创建组件和销毁自建--如何缓存避免每次切换 ...

  5. vue组件component没效果

    如果实在不知道问题所在,你就看看你的component的命名是不是驼峰命名

  6. [vue]webpack&vue组件工程化实践

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  7. [vue]组件最佳实战

    [vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...

  8. vue组件大集合 component

    vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...

  9. vue组件创建的三种方式

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...

随机推荐

  1. sorry, unimplemented: non-trivial designated initializers not supported

    将C语言转换为C++代码时,发生如下错误 sorry, unimplemented: non-trivial designated initializers not supported. 查找原因,是 ...

  2. Python利用ctypes实现按引用传参

    C的代码 void test_cref(char *a, int *b, char *data) { , sizeof(char)); strcpy(p, "cute"); a[] ...

  3. android多图选择器 图片/视频 单选or多选，以及视频录制。

    PictureSelector 最近项目中用到多图选择上传的需求,考虑到android机型众多问题就自己花时间写了一个,测试了大概60款机型,出现过一些问题也都一一修复了,基本上稳定了特分享出来,界面 ...

  4. 123457123456#1#----com.MC.CarWashKidsGames234----前拼后广--洗车游戏mc-mc1111

    com.MC.CarWashKidsGames234----前拼后广--洗车游戏mc-mc1111

  5. MySQL 8中使用全文检索示例

    首先建议张册测试用的表test,并使用fulltext说明将title和body两列的数据加入全文检索的索引列中: drop table if exists test; create table te ...

  6. 原生JavaScript常用本地浏览器存储方法一(方法类型)

    有时需要将网页中的一些数据保存在浏览器端.好处就是当下次访问页面时,直接就可以从本地读取数据,不需要再次向服务器请求数据.目前常用的有以下几种方法: 1.cookie cookie会随着每次HTTP请 ...

  7. MultiDesk远程桌面连接

    MultiDesk 是一个选项卡(TAB标签)方式的远程桌面连接 (Terminal Services Client),可以管理组远程桌面连接,更改连接端口. 功能特性 绿色软件,只有一个很小的可执行 ...

  8. git的使用学习（二）git的操作使用

    1.创建版本库 什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都 ...

  9. RabbitMQ官方教程三 Publish/Subscribe(GOLANG语言实现)

    RabbitMQ官方教程三 Publish/Subscribe(GOLANG语言实现) 在上一个教程中,我们创建了一个工作队列. 工作队列背后的假设是,每个任务都恰好交付给一个worker处理. 在这 ...

  10. 最新 博盾习言java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿. 博盾习言等10家互联网公司的校招Offer,因为某些自身原因最终选择了 博盾习言.6.7月主要是做系统复习.项目复盘.Le ...