1，vue的工作原理其实就是我们前端拿到组件模板（也就是编译打包后生成的js文件，由vue动态生成html标签以及异步请求服务器的数据，更新html页面展示给用户）

　　如上图所示，public文件夹下的index.html文件内的<div id="app"></div>,最终会通过main.js文件的渲染函数替换程APP.vue文件里的<div id="app"><img .../> <HelloWorld></HelloWorld></div>

2,scoped的实现原理

　　　　

　　 　　

3,vue的深度选择器

　　当我们在当前组件的style中有scoped属性时，则css样式只对本.vue文件当中的html标签有效，无法操作子组件的html标签样式，如果我们必须要操作子组件的样式，那就得用到vue的深度选择器

　　

　　实现原理

　　

vue中标签的替换以及scoped实现css对当前文件起作用的原理的更多相关文章

  1. Vue中import from的来源--省略后缀与加载文件夹

    Vue使用import ... from ...来导入组件,库,变量等.而from后的来源可以是js,vue,json.这个是在webpack.base.conf.js中设置的: module.exp ...

  2. tp3.2替换模板中如果需要替换的图片在css样式表中怎么办？

    因为标签中的 style 定义的样式可直接覆盖 css样式表中定义的样式,所以可以在要替换的标签中用 style 直接定义样式,具体代码如下: <div class="aboutbg& ...

  3. webpack,vue中定义的别名怎么在模板, css sass less的图片地址上使用

    webpack 的别名好处大家也都了解, 但是 vue 的模板中, 对图片地址使用别名时总出现问题, 很久时间的时间都没找到解决办法, 一度认为是 webpack 的原因... alias: { 's ...

  4. vue中获取客户端IP地址(不需要额外引入三方文件)

    之前看了几种方法 ,都是引入腾讯,新浪,搜狐等的三方js文件来查询IP地址,但是我自己测试的时候IP地址不准确,所以就找了找,发现了这个方法,准确的获取到了IP地址和cmd的ipconfig获取到的I ...

  5. tp5.0：替换修改js、css等样式文件路径

    首先, 我们要知道,TP5已经不支持绝对路径访问样式文件啦!所以我们不必去花时间去找使用$_SERVER来获取 手册位置:模板->内置标签->资源文件加载 方法一: 过程: 1.首先在模块 ...

  6. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  7. Vue基础系列（四）——Vue中的指令（上）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  8. 在vue中继续使用layer.js来做弹出层---切图网

    layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...

  9. Linux中/etc/fstab /etc/mtab /proc/mounts这三个文件的分析与比较 分区表位置

    本文主要讲解Linux中/etc/fstab /etc/mtab /proc/mounts这三个文件的作用以及不同之处. 转自http://haohaozhang.blog.51cto.com/917 ...

  10. Vue中的scoped及穿透方法

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

随机推荐

  1. python服务返回text与json

    json.dumps(),loads()和jsonify()的区别 使用方法不同: dumps和loads方法,来自json模块,而json模块是python中的,可以直接导入: import jso ...

  2. 解决使用mapstruct过程中的一次编译报错问题_Internal error in the mapping processor

    说明 mapstruct版本:1.2.0.Final 开发工具:IntelliJ IDEA 2021.3.1 (Ultimate Edition) 报错现象 java: Internal error ...

  3. Cannot read property 'xxxx' of null

    在使用的vue3+element-plus的项目中,我使用了form表单对数据进行校验. 但是使用了: refDom.value.validate((valid) => {}) 后,过一会控制台 ...

  4. MacBook + 移动SSD实现三系统（Mac OS、windows、ubuntu）

    Windows系统安装 1.我们先要在windows的电脑上下载好,你需要的windows镜像文件(下载地址:https://msdn.itellyou.cn/,个人建议用迅雷下载),下载好winto ...

  5. Java基础-注释、标识符和关键字、数据类型及拓展

    注释 单行注释// 多行注释/* */ 文档注释/** */ 标识符 Java所有的组成部分都需要名字.类名.变量名及方法名都被成为标识符 关键字 数据类型 强类型语言(安全性高,java) 要求变量 ...

  6. python菜鸟学习： 13. excel文件编辑openpyxl使用

    #1. xls文件转换成xlsx文件,需要使用到 win32com from win32com import client as wc filepath = "D:\\python\\liy ...

  7. map转换 bean和list

    转实体类 JSONObject JSONObj = JSONObject.parseObject(JSON.toJSONString(resultMap));String result = JSONO ...

  8. Camstar获取回参

    public static bool SplitQty(string Username, string Password, string Container, int splitQty,int pla ...

  9. hadoop集群搭建之测试集群，配置历史服务器，日志聚集，时间同步

    hadoop集群搭建之测试集群,配置历史服务器,日志聚集,时间同步前期概要:我们完全分布式集群已经搭建完毕,并且还写了群启/群关的脚本, 接下来有必要来测试一遍集群,我们可以使用官方的案例,用它们在集 ...

  10. FFmpeg转换直播流格式

    mp4转rtsp ffmpeg -re -i 1671680590843.mp4 -vcodec copy -acodec copy -f rtsp rtsp://localhost:8554/liv ...