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. html css笔记zht

    第3章 Img标签 路径问题 绝对路径:从盘符(C:\)出发的路径 (C:\Users\......) linux(绝对路径以 / 开头) 相对路径:( ./ 当前文件所在的目录)( ../上一级目录 ...

  2. Unity安装(Windows版)

    Unity下载助手 Unity下载助手是一个小型可执行程序(大小约为1 MB),它允许您选择要下载和安装的Unity Editor的那些组件. 如果你不知道要安装,保留默认选择,单击继续 ,然后按照安 ...

  3. Oracle启动操作

    转自:https://www.cnblogs.com/mellowsmile/p/4610942.html 1.启动oracle数据库: 从root切换到oracle用户进入:su - oracle ...

  4. [译]Ocelot - Quality of Service

    原文 可以针对每个ReRoute设置对下游服务的熔断器circuit breaker.这部分是通过Polly实现的. 将下面的配置添加到一个ReRoute下面去. "QoSOptions&q ...

  5. Vue插槽的深入理解和应用

    一开始接触vue时并不知道插槽是什么,后来看了很多文章也是一知半解.然后自己手动敲了一下,在项目中实际应用一下,实在太好用了.后来做小程序后发现也能使用slot,不单单在vue中使用.我就是这么目光短 ...

  6. luogu P5324 [BJOI2019]删数

    传送门 不如先考虑暴力,能删的序列首先有\(1,2,3...n\),还有就是升序排序后从后往前放数,第\(i\)位要么放\(i\),要么放\(i+1\)位置的数,例如\(1,2,4,4,5,6,9,9 ...

  7. es过滤集提升权重

    es { "query":{ "function_score":{ "query":{ "match":{ " ...

  8. iOS 单选框

    iOS 单选框,可自定义横向和纵向显示,可定义显示的个数和内容,自定义间距,提供block 和代理方法可供使用,欢迎拍砖! github地址: https://github.com/joshuaGen ...

  9. 【转】一文掌握 Linux 性能分析之 I/O 篇

    [转]一文掌握 Linux 性能分析之 I/O 篇 这是 Linux 性能分析系列的第三篇,前两篇分别讲了 CPU 和 内存,本篇来看 IO. IO 和 存储密切相关,存储可以概括为磁盘,内存,缓存, ...

  10. Unity优化之贴图

    默认情况下当你把图片导入到unity中时,unity会自动把图片转换成最适合当前平台的压缩格式.如果你有一些特殊的需求,unity也提供了覆盖默认压缩格式的方法,如下图 在图片的Inspector窗口 ...