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. Java异常之Error和Exception

    异常Exception 实际工作中,遇到的情况不可能是非常完美的.比如:你写的某个模块,用户输入不一定符合你的要求.你的程序要打开某个文件,这个文件可能不存在或者文件格式不对,你要读取数据库的数据,数 ...

  2. xxl-job调度任务简单使用

    简介 XXL-JOB是一个分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源代码并接入多家公司线上产品线,开箱即用. https://www.cnblogs.com/x ...

  3. 087_VS load codes for Salesforce

    1. 下载VShttps://code.visualstudio.com/ ,安装后:Extensions 安装Salesforce Extension Pack .Salesforce Packag ...

  4. web基础(5): CSS3介绍

    chapter5 CSS3 新性能 (一)圆角边框与阴影 1.border-radius属性 例1 border-top-left-radius:40px 20px ; 两个值分别表示水平方向.垂直方 ...

  5. Springboot+Vue实现短信与邮箱验证码登录

    体验网址:http://mxyit.com 示例 1.新增依赖 <!-- 短信服务 --> <dependency> <groupId>com.aliyun< ...

  6. HCIP-进阶实验06-多实例生成树安全部署

    HCIP-ICT进阶实验06-多实例生成树安全部署 1 实验需求 1.1 实验拓扑 1.2 实验环境说明 IP地址规划表: 设备 接口 IP 地址 备注 SW1 VLANIF10 192.168.10 ...

  7. 记一次修改dotnet-cnblogs图片路径的正则匹配规则

    大佬的GitHub 前言   因为最近一时心血来潮,学了markdown,我觉得但凡是个人,对于不用word或html就可以有不错的排版,而且使用起来简单便捷,都会投向markdown的怀抱中的.又因 ...

  8. JavaScript 时间的操作

    1. 标准日期格式 转 时间戳 第一步,设置一个标准日期,获取这个日期格式的时间戳 let timeStr = "2020-08-10 12:34:45"; let newTime ...

  9. 实验一 Python程序设计入门 20203412马畅若

    课程:<Python程序设计>班级: 2034姓名: 马畅若学号:20203412实验教师:王志强实验日期:2021年4月13日必修/选修: 公选课 实验一 (一)实验内容 1．熟悉Pyt ...

  10. k8s Service yaml文件编写

    apiVersion: app/v1 #API的版本号,版本号可以用 kubectl api-versions 查询到 kind: Service #表明资源对象,例如Pod.RC.Service.N ...