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的分页组件,只包含上 ...
随机推荐
- Springboot集成ECharts
ECharts 是中国的,也是世界的! ECharts官网: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前 绝大部分浏览器(IE8 ...
- weblogic找不到数据源
查看weblogic日志 报错是每个数据源都找不到. 查看oracle用户状态 select username,account_status,lock_date from dba_users; 解 ...
- Java调用第三方http接口的方式
1. 概述 在实际开发过程中,我们经常需要调用对方提供的接口或测试自己写的接口是否合适.很多项目都会封装规定好本身项目的接口规范,所以大多数需要去调用对方提供的接口或第三方接口(短信.天气等). 在J ...
- Microsoft Internet Explorer v11 / XML External EntityInjection 0day
[+] Credits: John Page (aka hyp3rlinx) [+] Website: hyp3rlinx.altervista.org[+] Source: http://hyp3 ...
- JAVA进阶15
间歇性混吃等死,持续性踌躇满志系列-------------第15天 1.TCP网络程序 package code0329; import java.io.BufferedReader; import ...
- word20170104办签证 Visa application有用的词和句子
有用的词:visa category: 签证类型tourist visa: 旅游签证visa interview: 签证面试multiple entries: 多次往返visa on arrival: ...
- 关于ViewPager+Fragment中的坑
1.我的情况是Activity里嵌套了Fragment_0,然后Fragment_0里面又嵌套了两个Fragment:Fragment_1.Fragment_2,然后我在其中一个Fragment,Fr ...
- Python 自然语言处理(1)中文分词技术
中文分词技术 中文自动分词可主要归纳为“规则分词”“统计分词”和“混合分词”,规则分词主要是通过人工设立词库,按照一定方式进行匹配切分,实现简单高效,但对新词很难进行处理,统计分词能够较好应对新词发现 ...
- HTML和XHTML区别
HTML和XHTML 可扩展超文本标记语言XHTML(eXtensible HyperText Markup Language)是将超文本标记语言HTML(HyperText Markup Langu ...
- Maven - 本地仓库(.m2) vs. 远程仓库(联网)
转载自:https://www.cnblogs.com/shuaiandjun/p/7604619.html 什么是Maven仓库在不用Maven的时候,比如说以前我们用Ant构建项目,在项目目录下, ...