vue学习指南:第六篇(详细) - Vue的组件 component
1. 什么是组件?有两种解释
1. 第一种解释:
什么是组件?
1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标签使用。
2. Vm = new vue() 是最大的组件,具有很多实用性的属性,比如 data,methods,computed等,所以定义的组件也有这些属性。
2. 第二种解释:
什么是组件?
1. 组件的出现就是为了拆分 vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以调用对应的组件即可。
组件化和模块化的不同之处?
模块化:是从代码逻辑的角度,进行划分的,在node是给予模块化的,node没ui界面,node用得最多的是模块化,把代码按照不同的功能进行划分,保证每个模块化的值单一。方便后台代码,分离开发,保证每个功能模块的 值 能单一。
组件化:是从ui界面的角度来划分的,方便ui组件的重用
3. 组件的定义
1. vue 使用 Vue.component() 方法定义组件,这个方法有两个参数,第一个是组件名,第二个是 options对象,这个对象里面有 template,data,methods,computed等属性。
2. template 是模板,里面是html格式,只能有一个顶层标签。
3. data 是放数据的,它是一个函数 return 一个对象,数据都放在这个对象离面。
全局注册组件:
1. Vue.component 第一个参数,组件的名称,将来 在引用组件的时候,就是一个以标签形式来引入它的。
2. 第二个参数:将Vue.extend 省略掉,直接 {} 创建的组件,其中 template就是组件将来要展示的html内容。
Vue.component('mycom3', {
template:'#tmp1'
})
3. 属于组件的结构,也要符合定义组件的规则,只能有一个唯一的根元素
<template id="tmp1">
<div>
<h1>这是 template 在外部定义的组件结构,这个方式有代码的提示和高亮</h1>
<h3>好用</h3>
</div>
</template>
4. 在被控制的 #app 外面 使用咱们的 template 元素定义属性的模板结构
<div id="app">
<mycom3></mycom3>
</div>
以上都是创建全局的组件,所谓全局就是创建的组件不仅仅,能让你app1能使用,
你再创建个vue根元素也能使用。
插件私有组件:
组件中的 data 和 实例中的 data 有什么区别?
1. 组件可以有自己的 data 数据
2. 组件的 data 和 实例的 data 有点不一样,实例中的data,可以为一个对象,但组件中的data,必须是个方法。
3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行。
4. 组件中的 data 数据 使用方法 和 实例中的data 使用方式完全一样。
作者:晋飞翔
手机号(微信同步):17812718961
希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢!
vue学习指南:第六篇(详细) - Vue的组件 component的更多相关文章
- vue学习指南:第二篇(详细Vue基础) - Vue的指令
一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. ...
- vue学习指南:第九篇(详细) - Vue的 Slot-插槽
Slot v-slot 插槽元素 浏览器在解析时候首先把它当作标签来解析,只有遇到不认识的就不管了,直接跳过,当你发现是组件,在以组件形式解析. 使用插槽的好处? 比如一个网站 分布顶部都是一样的, ...
- Vue学习【第六篇】:Vue-cli脚手架(框架)与实战案例
环境搭建 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 安装cnpm npm install -g cnpm --registry=https://re ...
- vue学习指南:第一篇 - vue的介绍
三大主流框架: 1. Vue.js 是目前最火的一个前端框架,react是最流行的前端框架 (react除了开发网站,还可以开发手机app,Vue语法也是可以用于手机App开发的,需要借助于wexx) ...
- Java工程师学习指南(中级篇)
Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站 ...
- RabbitMQ学习总结 第六篇:Topic类型的exchange
目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...
- vue学习指南:第三篇(详细) - vue的生命周期
今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...
- vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )
一.路由的配置 路由 vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...
- 从零开始的vue学习笔记(六)
混入 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.简单解释就是把一个Vue组件中的内容提供给别的组件来用.例子: // 定义一个混入对象 var myMixin ...
随机推荐
- [b0025] vmware_桥接网路设置
总结: 桥接 模式上外网比较简单. 缺点是每次重启虚拟机,分配的IP可能变化,导致 xshell 连接 时都要修改,很麻烦 桥接模式能不能配置静态IP ? 1. 环境 物理机网络 情况,从外部自动 ...
- Eclipse为不同的文件类型设置编码格式和编辑器
不知道大家遇到项目中编码格式不统一的情况没有,哈哈,我们就是,比如java的编码格式是GBK,html等编码是UTF-8,这样会导致很多问题,比如提交了一个UTF-8的java文件到SVN,会导致后端 ...
- SpringCloud学习笔记(九、SpringCloud Stream)
目录: 什么是SpringCloud Stream 如何使用SpringCloud Stream 消息分流 什么是SpringCloud Stream: SpringCloud Stream是一个用于 ...
- lua 11 闭包,函数的使用
转自:http://book.luaer.cn/_41.htm 当一个函数内部嵌套另一个函数定义时,内部的函数体可以访问外部的函数的局部变量,这种特征我们称作词法定界.虽然这看起来很清楚,事实并非如此 ...
- jQuery中的CSS(四)
1. css(name|pro|[,val|fn]), 访问匹配元素的样式属性 jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀(在适当的时候 ...
- C语言中关于输出n个数后就换行的问题。
例如:n=10 ........; n++; if(n%10==0&&n!=0) //因为当n=0时,n%10的值也是0,就也会转行,为了防止这种情况的发生,就用了&&a ...
- A1039 Course List for Student (25 分)
一.技术总结 这里由于复杂度的限制,只能够使用vector,然后进行字符串转化:考虑到string.cin.cout会超时,可以使⽤用hash(262626*10+10)将学⽣生姓名变为int型,然后 ...
- 【转】struts2的ActionInvocation分析(action调度者)
一个ActionInvocation实例代表一个action的执行状态,持有拦截器和将要执行的action的实例. defaultActionInvocation是其默认实现.下面是定义在该类中的部分 ...
- Redis的Sorted-Sets排行榜功能实现
Redis的ZSet排行榜功能实现 1. 功能需求 类似给用户n张图片, 用户左滑不喜欢右滑喜欢.所以每个用户就会有一些喜欢的图片集合和不喜欢的图片集合.现在我们要做一个将按照一个算法将喜欢的排到前面 ...
- mysql事务隔离级别与设置
mysql数据库,当且仅当引擎是InnoDB,才支持事务: 1.隔离级别 事务的隔离级别分为:未提交读(read uncommitted).已提交读(read committed).可重复读(repe ...