Vue入门篇:样式冲突scoped,data函数,组件通信,prop data单向数据流,打包发布

这里写目录标题

  • 1.组件的样式冲突scoped
  • 2.data函数
  • 3.组件通信
    • 1.两种组件关系分类和对应的组件通信方案
    • 2.父子通信方案的核心流程
  • 4.prop & data、单向数据流
  • 5.打包发布
  • 6.打包优化:路由懒加载

1.组件的样式冲突scoped

默认情况:写在组件中的样式会全局生效→因此很容易造成多个组件之间的样式冲突问题。
1.全局样式:默认组件中的样式会作用到全局
2.局部样式:可以给组件加上scoped属性,可以让样式只作用于当前组件

scoped原理?
1.当前组件内标签都被添加data-v-hash值的属性
2.css选择器都被添加[data-v-hash值]的属性选择器
最终效果:必须是当前组件的元素,才会有这个自定义属性,才会被这个样式作用到

2.data函数

一个组件的data选项必须是一个函数。保证每个组件实例,维护独立的一份数据对象。
每次创建新的组件实例,都会新执行一次data函数,得到一个新对象。

3.组件通信

1.两种组件关系分类和对应的组件通信方案

父子关系 :props & $emit
②非父子关系: provide & inject或eventbus
③通用方案:vuex

2.父子通信方案的核心流程

1.父传子props:
①父中给子添加属性传值
②子props接收
③使用
2.子传父$emit:
①子$emit 发送消息
②父中给子添加消息监听
③父中实现处理函数

4.prop & data、单向数据流

共同点:都可以给组件提供数据。

区别:
①data 的数据是自己的→随便改
②prop的数据是外部的→不能直接改,要遵循单向数据流

单向数据流:父级prop的数据更新,会向下流动,影响子组件。这个数据流动是单向的。
在这里插入图片描述

5.打包发布

目标:打包的命令和配置
说明:vue脚手架工具已经提供了打包命令,直接使用即可。
命令:yarn build
结果:在项目的根目录会自动创建一个文件夹'dist', dist中的文件就是打包后的文件,只需要放到服务器中即可。
配置:默认情况下,需要放到服务器根目录打开,如果希望双击运行,需要配置publicPath配成相对路径

6.打包优化:路由懒加载

目标:配置路由懒加载,实现打包优化
说明:当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python从入门到进阶】53、Scrapy日志信息及日志级别

接上篇《52、CrawlSpider链接提取器的使用》 上一篇我们学习了基于规则进行跟踪和自动爬取网页数据的“特殊爬虫”CrawlSpider。本篇我们来学习Scrapy的日志信息及日志级别。 一、引言 1、日志在Scrapy中的重要性 在Scrapy框架中,日志扮演着至关重要的角色。日志…

十三、大模型项目部署与交付

1 硬件选型 CUDA 核心和 Tensor 核心 CUDA 核心:是NVIDIA开发的并行计算平台和编程模型,用于GPU上的能用计算,可做很多的工作。应用在游戏、图形渲染、天气预测和电影特效Tensor 核心:张量核心,专门设计用于深度学习…

前端开发框架Vue

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl Vue概述 Vue.js(简称Vue)是由尤雨溪(Evan You)创建并维护的一款开源前端开发框架。Vue以其轻量级、易上手和高度灵活的特点&…

IoTDB 入门教程③——基于Linux系统快速安装启动和上手

文章目录 一、前文二、下载三、解压四、上传五、启动六、执行七、停止八、参考 一、前文 IoTDB入门教程——导读 二、下载 下载二进制可运行程序:https://dlcdn.apache.org/iotdb/1.3.1/apache-iotdb-1.3.1-all-bin.zip 历史版本下载:https://archive.…

YOLOv3模型在不同硬件平台上的性能表现有何差异?

YOLOv3模型在不同硬件平台上的性能表现可能会有显著差异,这主要受到以下因素的影响: 1. 计算能力:高性能的GPU(如NVIDIA的高端系列)或ASIC(如Google的TPU)可以更快地处理复杂的神经网络运算&am…

C——双向链表

一.链表的概念及结构 链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。什么意思呢?意思就是链表在物理结构上不一定是连续的,但在逻辑结构上一定是连续的。链表是由一个一个的节点连…

24五一杯ABC题完整思路+可执行代码+可视化图表(1)

2024五一赛A题保姆级建模思路20页1-3问可执行代码后续成品论文各类可视化图表(完整版资料在文章最后) 处理第一问的代码 其余各题的代码如下: A题保姆级建模思路20页:(手把手教你如何建模) 高清图片如下&am…

Windows bat读取每行第一、二、三列的内容

1.场景: 使用Windows bat实现读取每行第一、二、三列的类内容,并输出到屏幕 2.实现: bat脚本 ::关闭命令回显 @echo off::日志目录创建 if not exist "C:\BPPMStatus_Check\%date:~0,4%%date:~5,2%%date:~8,2%" (md "C:\BPPMStatus_Check\%date:~0,4%%da…

第12章 软件测试基础(第一部分)概念、质量保证、测试用例、测试执行过程

一、软件测试 (一)定义 动态验证计算机程序对有限的测试用例集是否可产生期望的结果的过程。测试计划是描述了要进行的测试活动的范围、方法、资源和进度的文档。编写测试计划目的:使测试工作顺利进行、使项目参与人员沟通更舒畅、使测试工…

面试常见 | 项目上没有亮点,如何包装?

很多技术人在公司用的老技术,而且很多都是搬业务代码且做枯燥乏味的CRUD,在面试提交简历或做自我介绍的时候并不突出,这种情况,如何破局? 首先不管你做的啥项目,全世界不可能只有你自己在做,比…

访问一个 HTTP 接口却收到 HTTPS 错误的响应

当访问一个 HTTP 接口却收到 HTTPS 错误的响应时,可能有以下几个原因: 重定向问题:请求可能被服务端重定向到了 HTTPS 地址。这意味着服务器要求使用 HTTPS 协议进行访问。可以尝试直接使用重定向后的 HTTPS 地址进行访问,或者检查…

Tensorflow2.0笔记 - ResNet实践

本笔记记录使用ResNet18网络结构,进行CIFAR100数据集的训练和验证。由于参数较多,训练时间会比较长,因此只跑了10个epoch,准确率还没有提升上去。 import os import time import tensorflow as tf from tensorflow import keras …

附录6-5 黑马优购项目-我的与后端本地化

目录 1 我的 2 后端本地化 1 我的 tarbar我的 只有这两个页面 其中未登录页面中只有一键登录有用,其他都是写死的,一键登录的功能仅仅是切换到登录的页面 目前微信小程序和微信用户的信息是脱钩的(之前的wx.getUserProfile与wx.getUs…

企业气候风险披露、报表词频、文本分析数据集合(2007-2022年)

01、数据介绍 企业气候风险披露是指企业通过一定的方式,将气候变化对其影响、自身采取的应对措施等信息披露出来。这有助于投资者更准确地评估企业价值,发现投资机会,规避投资风险。解企业在气候风险方面的关注度和披露情况。 可以帮助利益…

Django后台项目开发实战七

为后台管理系统换风格 第七阶段 安装皮肤包 pip install django-grappelli 在 setting.py 注册 INSTALLED_APPS [grappelli,django.contrib.admin,django.contrib.auth,django.contrib.contenttypes,django.contrib.sessions,django.contrib.messages,django.contrib.stat…

【yolov8】yolov8剪枝训练流程

yolov8剪枝训练流程 流程: 约束剪枝微调 一、正常训练 yolo train model./weights/yolov8s.pt datayolo_bvn.yaml epochs100 ampFalse projectprun nametrain二、约束训练 2.1 修改YOLOv8代码: ultralytics/yolo/engine/trainer.py 添加内容&#…

R语言4版本安装mvstats(纯新手)

首先下载mvstats.R文件 下载mvstats.R文件点此链接:https://download.csdn.net/download/m0_62110645/89251535 第一种方法 找到mvstats.R的文件安装位置(R语言的工作路径) getwd() 将mvstats.R保存到工作路径 在R中输入命令 source(&qu…

⑤ - 前端工程师通识指南

📖 该文隶属 程序员:职场关键角色通识宝典✍️ 作者:哈哥撩编程(视频号同名) 博客专家全国博客之星第四名超级个体COC上海社区主理人特约讲师谷歌亚马逊演讲嘉宾科技博主极星会首批签约作者🏆 推荐专栏: 🏅 程序员:职场关键角色通识宝典🏅

我选择哪个区块链平台将作品转化为NFT最合适?

选择哪个区块链平台将作品转化为NFT,取决于您的个人需求、目标和偏好。不同的区块链平台具有不同的特点和优势,以下是一些流行的选择及其考虑因素: 1. 以太坊 (Ethereum): 优点:以太坊是最成熟和最受欢迎的NFT平台&am…

ctf web-部分

** web基础知识 ** *一.反序列化 在PHP中,反序列化通常是指将序列化后的字节转换回原始的PHP对象或数据结构的过程。PHP中的序列化和反序列化通过serialize()和unserialize()函数实现。 1.序列化serialize() 序列化说通俗点就是把一个对象变成可以传输的字符串…