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. java与python数据结构对比

  2. Gradle创建项目(IntelliJ IDEA)

    创建Gradle项目 步骤一: 步骤二: 步骤三: 步骤四: 步骤五: 此时, 项目已经建好, 如果是第一次使用, 或者本地没有该版本的Gradle时, 就会触发下载.如图所示. 点击红色方框中标识的 ...

  3. vue base64

    安装 cnpm install js-base64 --save 使用 let base64 = require('js-base64').Base64 base64.encode('要加密的内容') ...

  4. springBoot+ vue+ Element-ui实现合并多图上传(一次请求多张图片)

    这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的. 1:  实现多图上传主要用到以下两个属性: 下面讲一下属性使用: <el-upload :actio ...

  5. JGUI源码:响应式布局简单实现(13)

    首先自我检讨下,一直没有认真研究过响应式布局,有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示,就先按自己的理解来闭门造车思考实现过程吧. 1.首先把显示区域分成12等分,bootstrap是这 ...

  6. 记一次安装python umysql模块的报错

    今天,在写一个python脚本的时候要用到数据库相关的umysql模块,但在引用的时候报没有此模块,第一反应就是去安装此模块,但是报没有找到pip命令. #pip install umysql -ba ...

  7. 开放源代码的设计层面框架Spring——day01

    spring第一天     一.Spring概述         1.1spring概述             1.1.1spring介绍                 Spring是分层的Jav ...

  8. 高阶函数(Higher-order function)

    变量可以指向函数 以Python内置的求绝对值的函数abs()为例,调用该函数用以下代码: >>> abs(-15) 15 但是,如果只写abs呢? >>> abs ...

  9. 【前端】ACE Editor(代码编辑器) 简易使用示例

    身为一个早已退役的Oier,当然忘不了当年一个个OJ页面上的代码显示和代码编辑器. 其中,洛谷使用的ACE Editor就是之一,非常的简洁美观.以及实际上在前端页面上搭建一个ACE Editor也是 ...

  10. angular Observable

    1.回调函数 /** 1.设计实现函数 */ print_msg(msg) { console.log(msg); } /** 2.设计调用函数,param1:实现函数参数,param2:实现函数本身 ...