教女朋友学习 vue中的组件
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。
技术是开源的、知识是共享的
。这博客是对自己学习的一点点总结及记录,如果您对 Java、算法 感兴趣,可以关注我的动态,我们一起学习。
用知识改变命运,让我们的家人过上更好的生活
。
文章目录
- 一、什么是组件
- 二、组件的声明及使用
- 1. 全局组件
- 2. 局部注册
- 3. 组件使用注意事项
- 三、组件的复用
- 1. 遇到的问题
- 2. 解决问题
此时是凌晨两点,我坐在电脑桌前写Bug。女朋友睡眼朦胧的跟我说 “扬帆,还不睡觉吗?你以前给我讲的vue中的 过滤器、指令、生命周期,我现在都学会了。你可以给我讲讲
组件
的知识吗?”我: “可以,正好明天休息”
一、什么是组件
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
二、组件的声明及使用
1. 全局组件
注册一个全局组件语法格式如下:
Vue.component(tagName, options)
tagName
为组件名,options
为配置选项。注册后,我们可以使用以下方式来调用组件:
<tagName></tagName>
代码示例:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>组件</title><script src="js/vue.js"></script>
</head><body><div id="app"><!-- 使用组件 --><my-component></my-component></div><script>// 注册组件Vue.component('myComponent', {template: ' <h1>Hello! 我是全局注册组件!</h1>'})// 创建 Vue 实例var vm = new Vue({el: '#app',data: {},methods: {}});</script>
</body></html>
测试结果:
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
有时候由于不需要全局注册每个组件。可以让组件只能用在其它组件内,用实例选项 components 注册。这就有了局部注册组件!
2. 局部注册
局部组件只能在当前注册它的vue实例中使用
代码示例:
<body><div id="app"><my-component></my-component></div><template id="templ"><h1>Hello! 我是局部注册组件</h1></template><script>// 创建 Vue 实例var vm = new Vue({el: '#app',data: {},components: { // 定义实例内部的私有属性myComponent: {template: '#templ'}}})</script>
</body>
测试结果:
3. 组件使用注意事项
① 组件名称如果是使用驼峰法命名,使用组件的时候要将大写字母改为小写,并且在前面加上 - ;
② 组件中的tamplate属性必须有一个唯一的根元素,否则会报错;
这个错误的意思是: 组件模板应该只包含一个根元素。应该按如下的方法来写:
三、组件的复用
有时候由于实际需要,有时候需要将组件进行任意次数的复用
代码示例:
<body><div id="app"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><template id="templ"><button class="btn" @click="toClick">点击了{{count}}次</button></template><script>var dataObj = {count: 0}Vue.component('button-counter', {template: '#templ',data: function () {// data 选项是一个对象return dataObj},methods: {toClick: function () {this.count += 1;}}})var vm = new Vue({el: '#app',data: {}});</script>
</body>
测试结果:
1. 遇到的问题
从测试结果可以看出,当点击一个按钮的时候,其它实例的值也会跟着改变。
原因是
:data 选项是一个对象,会影响到其它实例。
2. 解决问题
代码示例:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>组件复用</title><script src="js/vue.js"></script><style>.btn {text-align: center;color:white;background-color: green;font-size: 15px;margin-top: 10px;}</style>
</head><body><div id="app"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><template id="templ"><button class="btn" @click="toClick">点击了{{count}}次</button></template><script>Vue.component('button-counter', {template: '#templ',data: function () {// data 选项是一个函数,组件不相互影响return {count: 0}},methods: {toClick: function () {this.count += 1;}}})var vm = new Vue({el: '#app',data: {}});</script>
</body></html>
测试结果:
上面例子中,可以看到 button-counter 组件中的 data不是一个对象,而是一个函数。注意当点击按钮时,每个组件都会各自独立维护它的 count。因为每用一次组件,就会有一个它的新实例被创建。
这样做的好处
:就是每个实例可以维护一份被返回对象的独立的拷贝,如果 data 是一个对象则会影响到其它实例。
注意:
组件的 data 和实例的 data 不一样,
实例中的 data 可以是一个对象,但是组件中的 data 必须是一个函数。
今天就到这儿吧!下一次我再介绍 Vue父子组件传值
的问题。
由于水平有限,本博客难免有不足,恳请各位大佬不吝赐教!
教女朋友学习 vue中的组件相关推荐
- 教女朋友学习 vue中的指令及其自定义指令
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
- 教女朋友学习 vue中的过滤器及其时间格式化
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
- 教女朋友学习 vue的生命周期钩子函数
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
- vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- 通过大头儿子和小头爸爸,给女朋友讲明白了vue中父子组件的传值
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
- vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用,详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个 详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
- vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园
- Vue中父子组件传值的多种方式
vue中父子组件传值 vue中的父子组件传值,值得注意的是要遵守单向数据流原则.所谓单向数据流原则,简单的说就是父组件的数据可以传递给子组件,子组件也可以正常获取并使用由父组件传过来的数据:但是,子组 ...
- Vue中父子组件的六种通信方式
Vue中父子组件的通信方式 一.Props + $emit Props:父传子 父组件Parent.vue: <Child :message="message" @chang ...
最新文章
- spring boot 系列之四:spring boot 整合JPA
- Sorry, user *** is not allowed to execute ‘xxxx‘ as root on ****.
- 2020年最前沿的 8 本AI技术图书—文末留言赠8本
- 2021年广东省高考成绩查询入口,广东省教育考试院:2021年广东高考成绩查询入口、查分系统...
- 计算机数学基础知识点归纳,《计算机数学基础》(一)――离散数学期末复习参考...
- Microsoft经典平面广告we see
- linux standby模式,搭建11g 单机 linux standby 操作文档
- 应用回归分析第五版电子书_应用回归分析课后习题参考答案 全部版 何晓群,刘文卿...
- 几种开放源码的TCPIP协议栈
- 带小数十进制转二进制C语言,c语言十进制小数转为二进制
- JavaScript如何计算双曲余弦值?
- 科学家正在尝试取用脂肪细胞3D打印人类心脏
- [GXYCTF2019]Ping Ping Ping 1解题思路
- 【MicroPython ESP32】NVS数据非易失性存储示例讲解说明
- 【渝粤题库】陕西师范大学163209 旅游企业战略管理
- Babel转码器(ES6)
- 小程序源码整理最新的学习小程序的源码清单包含前后台
- 李群,李代数的几何学心得总结
- python 三维数据绘制等值高线剖面图_Matplotlib中的三维绘图
- 世界上第一台通用计算机的英语缩写,世界上第一台计算机诞生
热门文章
- 单片机c语言孔雀开屏,毕业设计(论文)-人形机器千手观音动作实现研究.doc
- 数据结构与算法-自定义双向链表API
- fedora安装watchman
- 【云原生之Docker实战】使用docker部署webssh工具
- 那些年我们一起追过的技术和开源软件
- HTTP的血泪进化史
- 腾讯一面	SNG	腾讯云	安全运营开发
- Python实例:含有多种分割符字符串拆分方法的详细解析
- plt画网格图_python 可视化:fig, ax = plt.subplots()画多表图的3中常见样例 自定义图表格式...
- 上传文件时提示系统找不到文件