1、什么是组件?

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

2、组件化和模块化的不同?

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

3、全局组件定义的三种方式:

  • 使用 Vue.extend 配合 Vue.component 方法;

  • 直接使用  Vue.component 方法;

  • 将模板字符串,定义到script标签中,同时需要使用 Vue.component 来定义组件:

        注意: 组件中的DOM结构,有且只能有唯一的根元素(Root Element)来进行包裹!

4、在组件中,“data”需要被定义为一个方法,例如:

5、在子组件中,如果将模板字符串,定义到了script标签中,如果要访问子组件的“data”属性中的值,需要用“this”来访问。

vue 组件的定义的更多相关文章

  1. vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  2. Vue组件的定义、注册和调用

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组 ...

  3. Vue组件的定义方式

    1.使用template标签定义组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  4. vue学习—组件的定义注册

    组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...

  5. Vue.js 2.x:组件的定义和注册(详细的图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...

  6. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...

  7. Vue 数组封装和组件data定义为函数一些猜测

     数组封装 var vm={ list:[0,1] } var push=vm.list.push;//把数组原来的方法存起来 vm.list.push=function(arg){//重新定义数组的 ...

  8. vue.2.0-自定义全局组件

    App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...

  9. java+springBoot+Thymeleaf+vue分页组件的定义

    导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...

随机推荐

  1. MySQL实战45讲学习笔记:索引(第五讲)

    一.需要回表的案例 在下面表T中,执行下面语句,需要执行几次树的搜索操作?会扫描多少行? select * from T where k between 3 and 5 1.初始化语句 mysql&g ...

  2. 基于IPV6的数据包分析(GNS3)

    1.拓扑图 2.配置ipv6地址.使路由器之间可互ping,用ospf配置.(R5为例) 查看路由表 试R5 ping 到R4 R4 ping到 R1 3.开始抓包分析 128返回请求(Echo Re ...

  3. Qt快速入门第三版下载

    找了半天才找到一个靠谱的: http://www.ddooo.com/softdown/111665.htm

  4. Studio 5000编程:一种累计时间的编程方法

    前言:在很多项目中,需要累计设备的运行.停机.故障时间,当然实现该功能的编程方法也是多种多样,各有千秋,不过有的方法累计误差会越来越大,比如:在连续任务里用定时器来累计时间,就存在一定的误差.本文分享 ...

  5. webstorm快速输入标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. cnpm下载包与npm版本不一致的问题解决

    参考链接:https://www.jianshu.com/p/949b4e0ae190

  7. SVM小白教程(1):目标函数

    关于 SVM(支持向量机),网上教程实在太多了,但真正能把内容讲清楚的少之又少.这段时间在网上看到一个老外的 svm 教程,几乎是我看过的所有教程中最好的.这里打算通过几篇文章,把我对教程的理解记录成 ...

  8. selenium采用xpath方法识别页面元素

    有些HTML页面中的元素中属性较少,经常有找不到id.class.name等常用属性的时候,这个时候xpath.css就能很好的识别到我们的元素. Firefox和chrome浏览器中均有xpath. ...

  9. Deep Mutual Learning

    论文地址: https://arxiv.org/abs/1706.00384 论文简介 该论文探讨了一种与模型蒸馏(model distillation)相关却不同的模型---即相互学习(mutual ...

  10. HDU-魔咒词典(字符串hash)

    魔咒词典 TimeLimit: 8000/5000 MS (Java/Others)  MemoryLimit: 32768/32768 K (Java/Others) 64-bit integer ...