第三部分使用脚手架:vue学习(66-69)

文章目录

  • 66.props配置
  • 67 mixin混入
  • 68 插件
  • 69 scoped样式

66.props配置

props配置,说白了就是调用子组件,传参数用的。
父组件的写法:传参。传参必须加引号,否则报错。
在这里插入图片描述
子组件的写法:接收。接受有3种方式,最简单的如下。

在这里插入图片描述
这种传参方式,直接变成了vc对象的参数。可以看到都是字符串。
在这里插入图片描述
如果想要传过来18就是int类型的18,只需要加一个冒号。引号里面的就是表达式。就不再是字符串了。
在这里插入图片描述
可以在子组件加上接收的限制,只接收int类型,如果传错了,控制台会报错提示。
在这里插入图片描述
也可以对参数是否必须,默认值和类型一起限制。一般required跟default不会同时出现。
在这里插入图片描述
注意:开发中,简单用法用的最多。
注意:接收到的props参数不允许改。一旦改了会报错。
在这里插入图片描述
如果必须改的话,就在data里面接收一下,然后改data里面的。
在这里插入图片描述

注意:接收到参数的数量,该是几个就是几个。
注意:优先级,data里面的比props里面的参数优先级高。

总结:
在这里插入图片描述

67 mixin混入

引入:编写代码的时候出现了2个vue文件中,几乎相同的代码。
在这里插入图片描述
新建一个js,名字随便起。把这个方法粘贴进去。记得要暴露,否则没办法访问。

在这里插入图片描述
然后在组件中引入这个js。加上混合js的注册。方法就正常了。
在这里插入图片描述

混合不止可以混合method,vue里面有的,可以变成公用的部分,都可以变成混合。比如mounted。data。
在这里插入图片描述
注意:如果混合部分有的(比如data),你在组件里也声明了,以你的为主。
注意:如果生命周期钩子(比如mounted),混合部分有的,你在组件里也声明了,都会执行。先执行混合,再执行你的。

上面的例子,都称作,局部混合。如果想全局混合。需要在入口js(main.js)里做全局配置。
在这里插入图片描述
这种写法,所有的vm和vc都会被混合。都能有混合和混合2里面的功能。

68 插件

插件可以增强vue。
一般我们会新建一个plugins.js.这个文件里面的写法:
在这里插入图片描述
可以简写:
在这里插入图片描述

Vue会帮你调用 这个插件。但是想用,必须得让vue对象感知到这个差劲啊,就在在main.js里面导入这个插件,然后让vue用。

在这里插入图片描述
这样做,就可以实现插件的应用了。实际上install方法是有参数的。可以获得Vue对象。
在这里插入图片描述
在这里插入图片描述
那么就可以在里面写基于vue对象的全局操作了。所有的vm和vc对象都会生效。也都能引用了,如下是一个比较好的例子。

在这里插入图片描述
测试过滤器,使用管道符,让他生效。
在这里插入图片描述
测试自定义指令:绑定value。
在这里插入图片描述

界面效果:
在这里插入图片描述

测试原型上添加方法:也是要写方法的,不过是可以在方法里调用了,不能再click后面直接写。

在这里插入图片描述
在这里插入图片描述

69 scoped样式

如果2个子组件用了同样的css样式的命名,但是两个css不一样,这两个子组件又在同一个父亲组件中应用了,就会发生冲突,到只有一个不生效。根据引入的前后顺序,来决定覆盖。
此时就可以使用scope关键字。表示style标签里的内容,只复杂当前vue文件中的内容,其它的内容它不管。
在这里插入图片描述
实现方式,就是在最外侧的div加了标签属性。然后css样式配合标签属性选择器,就实现了局部控制。

在这里插入图片描述

注意:App.vue不适合在style中加scope关键字,因为他是管所有组件的。这样所有组件就都生效了。

需要注意的是,脚手架处理不了less,需要装less-loader。
在这里插入图片描述
安装:
在这里插入图片描述
视频中跟webpack的4.46版本冲突了,因为这样装装的是最新的,不兼容。所以降低版本装less-loader就行。

在这里插入图片描述
查看webpack、less-loader的版本:

在这里插入图片描述
在这里插入图片描述

装7就没问题:

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/293410.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【观察】Aginode安捷诺:坚守“长期主义”,服务中国数字经济

毫无疑问,随着整个社会加速数字化转型,尤其是5G、人工智能、大数据等技术兴起,以及智慧医疗、智慧金融、智能制造等应用加速落地,算力网络在经济社会发展中扮演了愈来愈重要的角色,成为支撑数字经济蓬勃发展的“新引擎…

快手推荐算法工程师三面回顾

快手三次技术面试一次HR面试的简单回顾,希望对大家有所启发。 一面 面试官一上来就让写算法题,第一个是计算岛屿数量,第二个是最长回文字串。 然后就是介绍自己的论文。对于论文的工作,面试官只是在问关于论文的问题&#xff0…

STM32F4XX使用SWO实现printf功能

一 名词说明 SWO:Serial Wire Output,串行线输出 ITM:Instrumentation Trace Macrocell,仪器跟踪宏单元二 使用软件 1 keil 2 JLinkSWOViewer三 swo实现代码 #include "stm32f4xx_hal.h" #include "stdio.h&quo…

babel执行流程

babel简单执行流程 为了验证方便 这边 使用的命令是 babel src/index.js --out-file lib/index.compiled.js,这样可以定位 babel 中的files.js 相对目录比较简单 执行scripts 中的 build 命令 执行 package.json 中的scripts 命令 <!-- package.json 中的命令 -->"…

一款适用于低功耗应用 高效降压转换器TPS62621YFFR 基本原理及主要参数介绍

TPS62621YFFR提供针对电池供电的便携式应用优化的高频同步降压DC/DC转换器。适用于低功耗应用&#xff0c;支持高达600毫安的负载电流&#xff0c;并允许使用低成本的芯片电感器和电容器。 该设备具有2.3 V至5.5 V的宽输入电压范围&#xff0c;支持由具有扩展电压范围的锂离子…

分布式锁Lock4J 使用总结

Lok4j 简介 lock4j是一个分布式锁组件&#xff0c;其提供了多种不同的支持以满足不同性能和环境的需求。 立志打造一个简单但富有内涵的分布式锁组件。 特点 简单易用&#xff0c;功能强大&#xff0c;扩展性强。支持redission,redisTemplate,zookeeper。可混用&#xff0c…

互联网分布式应用之RabbitMQ

RabbitMQ Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机&#xff0c;Java 仍是企业和开发人员的首选开发平台。 课程内容的介绍 1. RabbitMQ介绍安装 2. Rabbi…

【大数据进阶第二阶段之Hadoop学习笔记】Hadoop 概述

【大数据进阶第二阶段之Hadoop学习笔记】Hadoop 概述-CSDN博客 【大数据进阶第二阶段之Hadoop学习笔记】Hadoop 运行环境搭建-CSDN博客 【大数据进阶第二阶段之Hadoop学习笔记】Hadoop 运行模式-CSDN博客 1、 Hadoop 是什么 &#xff08;1&#xff09;Hadoop是一个由Apache基…

美团后端Java实习一面面经

说一下AOP&#xff1f; 面向切面编程&#xff0c;通过预编译方式和运行期动态代理实现程序功能的统一维护的技术。可以减少程序中相同代码的编写&#xff0c;简化开发&#xff0c;使得接口更加专注于业务 相关概念 Aspect&#xff08;切面&#xff09;&#xff1a; Aspect 声…

NVIDIA 正式发布中国特供 RTX 4090D,减量不减价刀法再进化

随着中国特供 RTX 4090D 显卡发布&#xff0c;老美禁售导致的 NVIDIA 旗舰游戏显卡断供、涨价风波注定要结束了。 就在上周四&#xff0c;NVIDIA 正式发布了应对老美禁令的中国特供版 RTX 4090D 显卡。 别的不说&#xff0c;前段时间疯狂炒作、高价囤货 RTX 4090 的商贩们首先…

在机械硬盘和固态硬盘上分别打一个压缩包,时间相差几倍

机械硬盘&#xff0c;它的原理类似于光盘&#xff0c;主要结构是一个高速旋转的盘片的和在盘片上来回读写数据的磁头。而固态硬盘则是以电子存储的方式来储存数据的&#xff0c;主要由主控芯片、闪存芯片、固件算法等组成。 一般来说机械硬盘的读写速度在60-170MB/s之间&#x…

win10提示“KBDROST.DLL文件丢失,软件无法启动”,快速修复方法

KBDROST.DLL是Windows操作系统中的一个动态链接库文件&#xff0c;主要与键盘布局或键盘输入有关。在Windows系统中&#xff0c;每种语言都有一个相应的DLL文件来处理键盘输入&#xff0c;KBDROST.DLL文件主要用于处理俄语键盘布局。 所以&#xff0c;当我们使用到俄语输入相关…

Linux第12步_磁盘重新分区

解决“挂载后的U盘出现中文乱码”后&#xff0c;我们接着学习“磁盘重新分区”&#xff0c;熟悉fdisk命令。 1、删除磁盘的分区 输入“cd /回车”&#xff0c;进入根目录 输入“ls /dev/sd*回车”&#xff0c;显示dev以sd所有文件。 输入“sudo fdisk /dev/sdb1回车” 输入…

学习汽车LIN总线该如何入门?

关注菲益科公众号—>对话窗口发送 “CANoe ”或“INCA”&#xff0c;即可获得canoe入门到精通电子书和INCA软件安装包&#xff08;不带授权码&#xff09;下载地址。 目录 1. 车载LIN总线诞生背景和使用场景 2. LIN总线硬件接口 3. Lin总线协议 4. 总结 1、车载LIN总线…

北斗卫星为社区智慧管理提供精准支持

北斗卫星为社区智慧管理提供精准支持 近年来&#xff0c;随着智能科技的快速发展和智慧社区的兴起&#xff0c;北斗卫星作为一项关键技术&#xff0c;正逐渐在智慧社区中发挥着重要作用。北斗卫星定位与导航系统是我国自主研发的卫星导航定位系统&#xff0c;它不仅为智慧社区…

postgresql可视化导入csv文件

不需要在命令行copy了&#xff0c;只需简单点几下 1.在数据库下建一个schema 右击选中数据库-new schema 2.双击你创建的schema&#xff0c;出现tables 3.右击tables&#xff0c;选择import wizard 4.选择你想导入的文件格式&#xff0c;之后一直next 5.选择你的文件所在位置…

工厂如何确定设备故障的原因?

设备故障是制造业中常见的问题&#xff0c;对生产效率和运营成本产生重大影响。为了解决设备故障并提高生产效率&#xff0c;确定设备故障的准确原因至关重要。本文将介绍一些关键步骤和方法&#xff0c;帮助工厂确定设备故障的原因。 1. 收集和分析数据 要确定设备故障的原因…

HTTP和TCP代理原理及实现,主要是理解

Web 代理是一种存在于网络中间的实体&#xff0c;提供各式各样的功能。现代网络系统中&#xff0c;Web 代理无处不在。我之前有关 HTTP 的博文中&#xff0c;多次提到了代理对 HTTP 请求及响应的影响。今天这篇文章&#xff0c;我打算谈谈 HTTP 代理本身的一些原理&#xff0c;…

【自学笔记】01Java基础-07面向对象基础-02继承

记录学习Java基础中有关继承、方法重写、构造器调用的基础知识&#xff0c;学习继承之前建议学习static关键字的内容【自学笔记】01Java基础-09Java关键字详解 1 继承概述 1.1 什么是继承&#xff1f; 1.2 继承的特点 子类可以继承父类的属性和行为&#xff0c;但是子类不能…

期货跟单系统。镜像跟单系统有什么作用?功能有哪些?

期货跟单系统&#xff1a; 期货自动跟单系统&#xff0c;是一款专门用来针对特定账户的操作而进行自动跟单的软件。软件兼容目前所有的期货公司账户&#xff0c;具有稳定性&#xff0c;速度性和可靠性的优势。 补差补点&#xff0c;根据盘手实盘心理分析&#xff0c;增加模拟…
最新文章