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. More exceptional c++读书笔记【附高清PDF下载】

    Part1我是在读完Scott Meyers的<Effective c++>之后才读到这本书的.能够讨论特定的主题而不是将一门语言作为一个整体来看待是我理解c++的首选方式,所以Sutte ...

  2. Git 知识

    1.git merge .git cherry-pick.git rebase 可以看出merge结果能够体现出时间线,但是rebase会打乱时间线. 而rebase看起来简洁,但是merge看起来不 ...

  3. Hadoop搭建超级详解

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...

  4. SpringCloud之配置中心（config）的使用

    配置中心的作用就在于可以在项目启动时加载远程或本地的配置文件,将配置文件集中管理 springboot版本: 2.1.6.RELEASE springcloud版本: Finchley.RELEASE ...

  5. 只要引用这个js就会页面加载完毕自动弹出提示框

    IE浏览器不支持ES6语法, 此代码为翻译并修改过的,使用的bable网站翻译 (function (win) { // 生成遮罩和弹出层,返回弹出层DOM对象 var createMsgBox = ...

  6. XXE漏洞初步练手

    0x00:XXE定义 xml外部实体注入被我们称为XXE.因为实体可以通过预定义在文档中被调用,而实体的标识符又可以访问本地或者远程内容,当允许引用外部实体时,攻击者便可以构造恶意内容来达到攻击.

  7. python multiprocessing调用cython openmp方法需要采用spawn方式

    先说结论,在Linux系统,如果python multiprocessing要调用的cython的方法中包含了多线程,比如openmp C code,必须手动设定spawn方式产生多进程. 更多的细节 ...

  8. JWT 工具类的编写

    导入JWT pom依赖 <!--JWT 依赖--><dependency> <groupId>io.jsonwebtoken</groupId> < ...

  9. oracle job的使用

    select job, next_date, next_sec, failures, broken from user_jobs; create or replace sequence END_RES ...

  10. vscore 中 vim 常用快捷键

    谷歌浏览器 ctrl + T 新建一个页面 ctrl + J 查看下载界面 F6 直接搜索 vscore 在 vscore 中使用 vim 建议去掉 ctrl 键的功能捆绑,不然会覆盖掉很多的 vsc ...