Vue 认识组件化

组件化开发

什么是组件化

  • 如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。
  • 但如果,我们讲一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了

组件化思想

  • 组件化是Vue.js中的重要思想

    • 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用
    • 任何的应用都会被抽象成一颗组件树
  • 组件化思想的应用:
    • 有了组件化的思想,我们在之后的开发中就要充分的利用它
    • 尽可能的将页面拆分成一个个小的、可复用的组件
    • 这样让我们的代码更加方便组织和管理,并且扩展性也更强

注册组件的基本步骤

  • 组件的使用分成三个步骤:

    • 创建组件构造器:调用Vue.extend()方法
    • 注册组件:调用Vue.component()方法
    • 使用组件:在Vue实例的作用范围内
  • 我们来看看通过代码如何注册组件
<div id="app">
<!--3.使用组件-->
<my-cpn></my-cpn>

<script src="../js/vue.js"></script>
<script>
  // 1.创建组件构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是内容, 哈哈哈哈</p>
        <p>我是内容, 呵呵呵呵</p>
      </div>`
  })
  // 2.注册组件
  Vue.component('my-cpn', cpnC)

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
  • 查看运行结果:

    • 和直接使用一个div看起来并没有什么区别。
    • 但是我们可以设想,如果很多地方都要显示这样的信息,我们是不是就可以直接使用来完成呢?

注册组件步骤解析

  1. Vue.extend():
  • 调用Vue.extend()创建的是一个组件构造器。
  • 通常在创建组件构造器时,传入template代表我们自定义组件的模板。
  • 该模板就是在使用到组件的地方,要显示的HTML代码。
  • 事实上,这种写法在Vue2.x的文档中几乎已经看不到了,它会直接使用下面我们会讲到的语法糖,但是在很多资料还是会提到这种方式,而且这种方式是学习后面方式的基础。
  1. Vue.component():
  • 调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。
  • 所以需要传递两个参数:
    • 注册组件的标签名
    • 组件构造器
  1. 组件必须挂载在某个Vue实例下,否则它不会生效。
  • 我们来看下面我使用了三次
  • 而第三次其实并没有生效
<div id="app">
  <!-- 使用组件 -->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>
  <my-cpn></my-cpn>

原文地址:https://www.cnblogs.com/landuo629/p/12420975.html

时间: 2024-10-20 12:50:44

Vue 认识组件化的相关文章

vue.js组件化开发实践

前言 公司以往制作一个H5活动,特别是有一定统一结构的活动都要每次用html.css.js滚一次重复的轮子,费时费力.后来接到了一个基于模板的活动发布系统的需求,于是就有了下面的内容. 开始 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架的流行,以及组件化开发方式的出现,决定采用vue进行开发. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,或者叫做组件化1.0时代,代码结构可能如下: 1 - lib/components/calen

数字变化时的滚动效果(VUE)组件化

1.外部引入 styleHeight:样式的高度,Number: 数字大小 <compute-number :styleHeight="44" :number="Number(1905)" > </compute-number> 2.组件代码 <template> <div id="demo"> <div class="nwwest-roll" :style="{

vue中的组件化开发

常常听一些前辈说vue是react的组件化+angular的数据绑定的结合体: 最近刚刚开始使用vue开发项目,我也是在摸索中前进,现在我们来说一说vue的组件化开发. 实际的项目开发,并不像一些文章中的提到的模式,而是如图所示的模式: App.vue是项目的入口.组件实则也是一个以.vue为后缀的文件.我们可以在src\components文件夹下创建一个xxx.vue: 然后在文件中编写可以提出的公共部分的代码为组件.然后在您需要调用该组件的页面,如下图方式调用: 是不是很简单.现在来解释一

如何通过 Vue+Webpack 来做通用的前端组件化架构设计

如何通过 Vue+Webpack 来做通用的前端组件化架构设计 转载 作者:伯乐在线专栏作者 - 新空气 链接:http://web.jobbole.com/86977/ 点击 → 了解如何加入专栏作者 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberjs.avalonjs.vuejs. 我个人接触使用过:avalonjs.angularjs.vuejs.因为工作以及前端团队能力的问题,所以在不同的公司,在开发工作中选用了不同的前端架构. 以下仅仅是

vue学习笔记(1)—— 组件化实现todoList

一.环境搭建 1.npm 大型应用时推荐用npm安装,npm能很好的和webpack等模块打包器配合使用.具体安装步骤请参考网上的诸多教程.完成后使用如下命令安装vue. $ npm install vue 安装完成后,命令行运行命令 vue ,看到如下效果表示vue安装成功: 2.vue-cli vue-cli是vue提供的一个官方命令行工具.可用于快速搭建大型的单页应用. # 全局安装 vue-cli $ npm install --global vue-cli 二.项目搭建 安装完成之后我

Vue.js-组件化前端开发新思路

Vue.js-组件化前端开发新思路 12017.04.14 18:31:25字数 6228阅读 5632 本文章是我最近在公司的一场内部分享的内容.我有个习惯就是每次分享都会先将要分享的内容写成文章.所以这个文集也是用来放这些文章的,顺便也当图床用. 1. 认识Vue.js Vue.js(读音 /vju?/,类似于view)是一套构建用户界面的渐进式框架. 如果你有react或者Angular开发经验,你肯定不会对Vue.js感到太过陌生.Vue.js是踩在Angular和React肩膀上的后来

谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用.其实说是多页面应用,实际上在webpack中属于四个app,  如果真是做纯单页面,那应该有二三十个页面吧.所以我这里的多页面应用,是分为四个SPA.比如微信最下面,有四个导航,微信,通讯录,发现,我. 那么这四个导航,就是我的四个SPA,配置多个入口即可. 在这里就不说太多代码了,项目结构将会放

vue组件化的应用

前言:vue组件化的应用涉及到vue-cli的内容,所以在应用之前是需要安装node和vue-cli的,具体如何安装我就不一一赘述了.可能一会儿我心情好的时候,可以去整理一下. 1.应用的内容:在一个页面中,需要一个固定的内容,这个内容可以多次引用,那么就可以考虑把他分离出来,在下次需要的时候,实现引用就好. 比如: <input type="text" v-model="content" > <button @click = addList>