Vue 使用细节收集
JSX 中 on 开头的属性名
在用 elementui
中的 el-upload
的时候,他们组件中有一个属性 on-change
,也不知道谁想出来的属性名,太扯淡了,非要 on 开头,我开始的代码如下:
<el-upload
action="/"
list-type="picture-card"
class="createopt__picupload"
auto-upload={false}
show-file-list={false}
file-list={cellValue}
accept=".gif,.png,.jpg,.jpeg"
on-change={this.createOptPicUploadChange}
>
<i class="el-icon-plus"></i>
</el-upload>
发现并不执行 createOptPicUploadChange
这个函数,看了一下编译后的代码,编译如下,居然把 on-change
编译到 on
里面去了,不正常,我要编译到 attrs 中才算正常啊
"el-upload",
{
attrs: {
action: "/",
"list-type": "picture-card",
"auto-upload": false,
"show-file-list": false,
"file-list": cellValue,
accept: ".gif,.png,.jpg,.jpeg"
},
"class": "createopt__picupload",
on: {
"change": _this.createOptPicUploadChange
}
},
后来我看了一下 babel-plugin-transform-vue-jsx 中编译源码,发现了关键字 props|domProps|on|nativeOn|hook
,居然有 on 开头的就编译成了函数,我就改成了 propsOn-change={this.createOptPicUploadChange}
,再看编译结果:
"el-upload",
{
attrs: {
action: "/",
"list-type": "picture-card",
"auto-upload": false,
"show-file-list": false,
"file-list": cellValue,
accept: ".gif,.png,.jpg,.jpeg"
},
"class": "createopt__picupload", props: {
"on-change": _this.createOptPicUploadChange
}
},
on-change
跑到 props
下了,再执行,成功。多看源码还是有好处的....
style 标签中深度作用选择器
以前就发现一个问题,当在 style
上加一个 scoped
的时候,子标签、孙子标签里面的样式就无法生效了,一直找不到解决方式,今天看文档找到了,在需要受影响的子标签或者是孙子标签的父标签后面加上 >>>
或者 /deep/
,Scss 中无法解析 >>>
。例如:
注意:选择器和 >>>
或者 /deep/
之间有空格
.aaa /deep/ {
.bbb{
}
}
Vue 使用细节收集的更多相关文章
- Vue.js依赖收集
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- 深入浅出Vue基于“依赖收集”的响应式原理(转)
add by zhj: 文章写的很通俗易懂,明白了Object.defineProperty的用法 原文:https://zhuanlan.zhihu.com/p/29318017 每当问到VueJS ...
- css 细节收集
细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="&qu ...
- vue经验 - 细节小知识点汇总(更新中...)
1. $refs 数据这么绑定的: 然后在created中抛出来,猜猜看看打印的是两个什么? 结果如下: 第一个跑出来了,第二个,却undefiend,没有东西?!... 后来去官网查看$refs的解 ...
- vue的细节
1.如果使用路由跳转到别的界面的话,例如从文章list页面跳转到具体文章查看详情页,查看某一个具体就需要传递那个文章的id去后台查询, this.$router.push的params方法可以实现传递 ...
- vue路由细节探讨
1.使用router-link 不会让页面刷新,使用a标签会使页面刷新.2.router-link 里面的to="/路由地址" tag=""自定义标签" ...
- Vue依赖收集引发的问题
问题背景 在我们的项目中有一个可视化配置的模块,是通过go.js生成canvas来实现的.但是,我们发现这个模块在浏览器中经常会引起该tab页崩溃.开启chrome的任务管理器一看,进入该页面内存和c ...
- 读Vue源码 (依赖收集与派发更新)
vue的依赖收集是定义在defineReactive方法中,通过Object.defineProperty来设置getter,红字部分主要做依赖收集,先判断了Dep.target如果有的情况会执行红字 ...
- MVVM以及vue的双向绑定
原文:https://www.cnblogs.com/onepixel/p/6034307.html MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核 ...
随机推荐
- 免费的局域网协作办公方式—onlyoffice文档协作
局域网内想享受协作办公的乐趣,请移步到这里按照步骤部署.https://blog.csdn.net/hotqin888/article/details/79337881 它是免费开源的,经过作者的一些 ...
- 从零自学Java-7.使用数组存储信息
1.创建数组: 2.设置数组的大小: 3.为数组元素赋值: 4.修改数组中的信息: 5.创建多维数组: 6.数组排序. 程序SpaceRemover:显示输入字符串,并将其中所有的空格字符替换为句点字 ...
- MVC 上传下载
在Asp.net的WEBform中,上传文件与下载文件处理是很简单的事情,如果转为ASP.NET MVC呢?那就没有那么容易了,难少少,也不是很难,一起来看下本文吧.本文主要讲如何在Asp.net M ...
- UNIX高级环境编程(10)进程控制(Process Control)- 竞态条件,exec函数,解释器文件和system函数
本篇主要介绍一下几个内容: 竞态条件(race condition) exec系函数 解释器文件 1 竞态条件(Race Condition) 竞态条件:当多个进程共同操作一个数据,并且结果依赖 ...
- oracl数据库中的substr()函数的用法
substr:字符串截取. 1.substr:(字符串 | 列 ,开始点):从开始一直截取到结尾. select substr(zym,2) from bqh4 2.substr:(字符串 | 列 , ...
- [Python_3] Python 函数 & IO
0. 说明 Python 函数 & IO 笔记,基于 Python 3.6.2 参考 Python: read(), readline()和readlines()使用方法及性能比较 Pyt ...
- 【转】HTTP学习---TCP和UDP协议的区别与应用
[原文]https://www.toutiao.com/i6592813624689951239/ 概述 ⊙TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. 在网络层有IP协议.ICM ...
- Spring hibernate 事务的流程
1 在业务方法开始之前 ①获取session ②把session和当前线程绑定,这样就可以在Dao中使用SessionFactory的getCurrentSession()方法来获取session了 ...
- 封装Ajax框架!(代码篇)
写在前面的话,如果中间有什么不明白的,请先看封装ajax框架!(前言篇) 1.添写一个封闭函数 (function(){})(); 在一个项目中,可能会引用多个js框架,如果函数名相同,会有命名冲突, ...
- pandas中的series数据类型
import pandas as pd import numpy as np import names ''' 写在前面的话: 1.series与array类型的不同之处为series有索引,而另一个 ...