vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件
关于vue入门案例请参阅
https://www.cnblogs.com/singledogpro/p/11938222.html 下载vuejs,Hello Vue(vscode)
先看看目录结构,这里的vue.js脚本存放在src文件夹下,所以如果你参照上面的vue入门,记得把vue.js引用的地方也要修改下
![](./images/1576561963935.png)
![](./images/1576559038459.png)
vue组件化流程
1.创建组件构造器
在script标签内创建组件构造器,需要注意的是template属性后面的点点不是字符串的单引号,而是ES6的新语法(字符串可以换行),键盘esc键下方的 ` `
![](./images/%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6%E6%9E%84%E9%80%A0%E5%99%A8_1.gif)
![](./images/1576560412806.png)
调用Vue.extend0创建的是一个组件构造器。
构造器内的template参数,就是我们自定义组件的模板。这样的书写方法非常麻烦,后面还有template标签进行简化
该模板就是在使用到组件的地方,将模板内的HTML代码进行显示。
Vue2.x的文档对这种语法进行封装,直接语法糖,但是在教科书上还是会提到这种方式,了解这种底层会让我们更深入vue的组件化思想
2.注册组件
第一个参数是指你使用这个组件(第一步我们注册的组件构造器)时,它的标签名是什么?如定义该标签为mycpn,在vue管理的实例里该标签就是<mycpn></mycpn>
,第二个参数就是第一步我们注册的组件构造器。
![](./images/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6_2.gif)
3.使用组件
在vue实例管理的容器内使用刚定义好的mycpn标签(该标签可以自定义)。
![](./images/%E4%BD%BF%E7%94%A8%E7%BB%84%E4%BB%B6.gif)
全局组件和局部组件
vue实例对象是顶级对象,也可看做一个顶级组件,所以定义在vue实例对象外的组件是全局组件。上述创建的组件就是全局组件,因为它定义在vue实例对象之外。
![](./images/1576566622443.png)
一旦组件定义在vue实例对象内部,它就变成了局部组件。
全局组件与局部组件的区别在于,全局组件可以在任何地方显示(出现),而局部组件只能在其vue实例对象管理的地方进行显示(出现)。可以简单了解全局组件是董事长,vue实例是总经理,局部是经理。董事长可以在公司在任何部门出现,而经理由于受到总经理的约束,只能在总经理给与他的职权范围内出现。 虽然全局组件哪里都可以显示,但是为了规范化管理,一般都是局部组件。
![](./images/%E5%9C%A8vue%E5%AE%9E%E4%BE%8B%E5%86%85%E9%83%A8%E5%AE%9A%E4%B9%89%E7%9A%84%E5%B0%B1%E6%98%AF%E5%B1%80%E9%83%A8%E7%BB%84%E4%BB%B6.gif)
![](./images/1576568092766.png)
在vue实例内部定义的局部组件,如果不在vue容器内使用,它不会在浏览器中显示。
![](./images/1576568434889.png)
![](./images/%E5%9C%A8vue%E5%AE%9E%E4%BE%8B%E5%86%85%E9%83%A8%E5%AE%9A%E4%B9%89%E4%BD%86%E4%B8%8D%E5%9C%A8%E5%AE%B9%E5%99%A8%E5%86%85%E4%BD%BF%E7%94%A8.gif)
vue组件化初体验 全局组件和局部组件的更多相关文章
- vue的组件化运用(数据在两个组件互传,小问题总结)
一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...
- VUE 3.0 初体验之路
在2020年9月中旬,vue.js发布了3.0正式版,在不久的将来,VUE3.0 也终将成为大前端的必然趋势, 环境搭建 node 版本要求: Node.js8.9 或更高版本 ,输入 node -v ...
- .NET 开源配置组件 AgileConfig 初体验
介绍 在微服务大行其道的今天,系统会被拆分成多个模块,作为单独的服务运行,同时为了集中化管理,我们还需要日志中心,配置中心等,很多开发人员可能更熟悉 ApolloConfig,这个组件功能也很完善,d ...
- 手动搭建webpack + vue项目之初体验
在使用vue做开发时,大部分人只会使用官方提供的脚手架搭建项目,脚手架虽然很好用,但想要成为一名优秀的前端开发者,webpack这一道坎是绕不开的,所以我们要学会脱离脚手架,利用webpack手动搭建 ...
- Vue Cli 3 初体验(全面详解)
vue新出了 vue cli 3,并直接改名为 @vue/cli,今天就来盘他. 首先介绍等啰里啰嗦的就不写了,贴个link吧. Vue CLi3 github Vue CLi web 要是想先了解下 ...
- Vue.js-Vue的初体验
我是参考https://www.cnblogs.com/kidney/p/6052935.html 这位大神的 最开始接触vue的时候,是他的input框输入的文字和旁边的span展示的文字同步,当时 ...
- day69:Vue:组件化开发&Vue-Router&Vue-client
目录 组件化开发 1.什么是组件? 2.局部组件 3.全局组件 4.父组件向子组件传值 5.子组件往父组件传值 6.平行组件传值 Vue-Router的使用 Vue自动化工具:Vue-Client 组 ...
- 大话大前端时代(一) —— Vue 与 iOS 的组件化
序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity 模板而得来,不过现在大前端的范围已 ...
- Vue全家桶之组件化开发
Vue全家桶之组件化开发 一.组件 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素,封装可重用的代码 二. 组件注册 2.1 全局注册 Vue. ...
随机推荐
- Hadoop环境安装和集群创建
虚拟机使用vmware,vmware可以直接百度下载安装 秘钥也能百度到 安装很简单 CentOS 7下载: 进入官网 https://www.centos.org/download/ 这里有三种 第 ...
- mybatis的if
<select id="findList" resultType="BndExport"> SELECT <include refid=&qu ...
- 使用Ant打包工具
由于使用java,javac,jar等工具进行编译打包,即繁琐低效又容易出错,因此Ant出现了.Ant的出现就是专门为了打包编译java代码的,使用之前得稍微学一下.Ant的运行起来主要是依靠配置文件 ...
- elastic 查询
1.match 查询 GET /_index/_search { "query": { "match": { " } } } 1.match 多条件查 ...
- Linux grep命令 -- 三剑客老三
常用选项 -E :开启扩展(Extend)的正则表达式. -i :忽略大小写(ignore case). -v :反过来(invert),只打印没有匹配的,而匹配的反而不打印. -n :显示行号 -w ...
- 自定义Java Validator
自定义Java Validator 在项目中,针对汉字的长度计算,数据库和java的计算方式不一致,需要重新处理下java 的 Validator,使其满足项目 建立自定义的 validator an ...
- 移远模组-BC95-工作模式之间关系
三种连接状态下,均可发送上行数据( CoAP/UDP): IDLE 下发送数据, 模块会进入 CONNECT 状态: PSM 下发送是数据会唤醒模块, 进入 CONNECT,或者当 TAU(TAU 的 ...
- cmake编译c++程序
当在Linux系统下编写程序时候,如果没有类似于visual studio.vs code等IDE(集成开发环境)时,如何编译.运行程序呢?一种方法是编写makefile文件,用makefile文件管 ...
- 2017 ICPC 乌鲁木齐
H:题目看错 背锅 #include <bits/stdc++.h> #include <vector> #define PI acos(-1.0) #define mem(a ...
- windows静态路由
本机:192.168.1.10 本机网关:192.168.1.254 目的IP:188.1.1.10 指定网关:192.168.1.107 最多跳数:10跳 route -p add 188.1 ...