vue 组件的定义
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 组件的定义的更多相关文章
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- Vue组件的定义、注册和调用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组 ...
- Vue组件的定义方式
1.使用template标签定义组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- vue学习—组件的定义注册
组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...
- Vue.js 2.x:组件的定义和注册(详细的图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...
- vue里在自定义的组件上定义的事件
事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...
- Vue 数组封装和组件data定义为函数一些猜测
数组封装 var vm={ list:[0,1] } var push=vm.list.push;//把数组原来的方法存起来 vm.list.push=function(arg){//重新定义数组的 ...
- vue.2.0-自定义全局组件
App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...
- java+springBoot+Thymeleaf+vue分页组件的定义
导读 本篇着重介绍java开发环境下,如何写一个vue分页组件,使用到的技术点有java.springBoot.Thymeleaf等: 分页效果图 名称为vuepagerbasic的分页组件,只包含上 ...
随机推荐
- 基于jeesite的cms系统(三):使用RESTful API在前端渲染数据
使用RESTful API可以更好的开发前后分离的应用,后面一节会介绍使用模版引擎Beetl开发后端渲染的应用. 一.配置Swagger(Api 接口文档) 1.使用系统自带 拷贝jeesite-mo ...
- luogu 1291 概率期望递推
非常好的递推 公式啥的懒得写了,直接放链接哈哈哈https://www.luogu.org/problemnew/solution/P1291 #include<bits/stdc++.h> ...
- .net aop 操作 切面应用 Castle.Windsor框架 spring 可根据接口 自动生成一个空的实现接口的类
通过unget 安装Castle.Windsor using Castle.DynamicProxy; using System; using System.Collections.Generic; ...
- Arduino—运算符
赋值运算符: = += -+ *= /= %= 取余等于 &= 与等于 &=(与等于)对某个变量的值按位进行与运算,例如:G&=x ...
- git应用
安装 Git for windows git config --global user.name "zhangyue" git config --global user.mail ...
- solr7.5--win10--部署使用
2018年8月份学习使用solr,当时下载的版本是solr7.5,写这篇博文的时候是2019年3月份,solr此时已经出到了8.0版本.一个大版本的变迁肯定有很多的改动,暂时还未研究就不赘述了. 此篇 ...
- L1-Day5
1.他偷了那个装满钱的书包. [我的翻译]He stole the bag full of money. [标准答案]He stole that school bag full of money. ( ...
- 003 爬虫持久化的三个不同数据库的python代码
MongoDB import pymongo # 1.连接MongoDB服务 mongo_py = pymongo.MongoClient() print(mongo_py) # 2.库和表的名字:有 ...
- 2018-2019-2 20165231 王杨鸿永 Exp6 信息搜集与漏洞扫描
实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服 ...
- ABP代码生成器与升级到VS2017VSIX
首先,我不是要分享一个代码生成器,而是怎么升级到VS2017,简单介绍下 如何将2015的VSIX项目升级到2017 阳光铭睿 写了一篇<分享一个与ABP配套使用的代码生成器源码>,并在群 ...