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. Intel与AMD之间的故事

    本人中文作文水平仅仅达到小学一年级,通俗易懂,不会术语,对于外行人特别友好,内行人不吝赐教,多谢指正! 背景:Intel(CPU制造商大哥),AMD(二哥,yes) 诺伊斯(Intel创始人,集成电路 ...

  2. JS 替代eval方法

  3. 配置python库源为清华源

    目录 Windows Ubuntu pip较低版本 pip较高版本 Windows %HOMEPATH%/pip/pip.ini [global] index-url = https://pypi.t ...

  4. JAVA诞生历史【转载】

    一.计算机语言的发展史 1.第一代语言(只有机器能读懂,人根本读不懂) 纯机器语言 2.第二代语言(机器能读懂,人可以读懂,但是很难懂) 汇编语言(符号语言) 3.第三代语言(机器能读懂,也非常便于人 ...

  5. vue封装全局确认弹窗

    下载文件1.弹窗组件 <template> <view class="bombFrame" v-if="bshow" :class=" ...

  6. Java脚本操作mysql和接口

    一.Java操作MySQL 1.插入insert 1 import java.sql.*; 2 import java.util.UUID; 3 4 public class BigData { 5 ...

  7. NextCloud 17.0.1 升级到NextCloud 23.0.0

    NextCloud 版本过低使用时间过长,想升级一下. 问题记录及参考文档 本次采用离线升级(在线不能下载) 官网下载https://nextcloud.com/install/#  23.0.0最新 ...

  8. 容器逃逸 --with docker.sock

    容器逃逸 --with docker.sock 本人对于容器逃逸的基本理解就是用户从容器中逃出去到宿主机里去了. 本文意在记录一个使用 docker.sock 来进行容器逃逸的方法. 首先随便来个镜像 ...

  9. nginx 结合tomcat 双机热备

    相信很多人都听过nginx,这个小巧的东西慢慢地在吞食apache和IIS的份额.那究竟它有什么作用呢?可能很多人未必了解. 说到反向代理,可能很多人都听说,但具体什么是反向代理,很多人估计就不清楚了 ...

  10. KVM虚拟机的认知

    Kernel-based Virtual Machine简称KVM,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调度器进行管理 ...