记录在vue中使用jsx时踩过的坑
使用方法及细节就不一一说了。
1.给input或者textarea绑定value时,出现失效的问题。解决方法:https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/84;
2.给input绑定disabled属性时,出现时而有效时而有效的问题。解决方法同上,也是domPropsDisabled={this.disabled} (假如你定义了disabled的话);
3.在封装高阶组件时,v-model出现问题!写法如下:解决方法是加上了value={this.value}。后来在此组件中放弃了jsx的写法。搞定!
render() {
return (
<z-input
styles={this.styles}
inputStyles={this.inputStyles}
v-model={this.inputValue}
value={this.value}//注意这里要加上value={this.value},否则在输入字母时会出现input组件中的value是inputEvent的问题!为什么?
disabled={this.disabled}
validate={this.validate}
onInput={this.handleInput}
>
<div slot="prepend" onClick={this.minus}>
-
</div>
<div slot="append" onClick={this.add}>+</div>
</z-input>
);
},
4.其他待发现
5.能不用jsx就不用。
记录在vue中使用jsx时踩过的坑的更多相关文章
- 在Vue中使用JSX,很easy的
摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...
- vue中使用jsx
vue中使用jsx 为什么需要使用jsx呢?这个需要搞清楚 其实vue官方也说了,对于那些非常多v-if v-else的情况,就可以尝试使用render函数或者jsx,不过render函数写简单的结构 ...
- vue中使用JSX报错,如何解决
Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...
- 在PyQt5中使用Pandas时的几个坑
最近在看Python GUI编程,在用到PyQt5+Pandas时遇到一些问题.这里把问题和解决方法整理一下.备查. (好像不能上传附件,内容只好写在下面了.) 在PyQt5中使用Pandas时的几个 ...
- 在vue中使用jsx语法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...
- VUE中集成echarts时 getAttribute of null错误
错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...
- vue中prop传值时加不加v-bind(冒号:)
前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形 ...
- vue中使用定时器时this指向问题
在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...
- vue中使用定时器时this指向
箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁. 箭头函数: let timerOne = s ...
随机推荐
- [转]ORACLE SQL解析之硬解析和软解析
http://blog.chinaunix.net/uid-25909722-id-3363789.html 当客户端进程,将SQL语句通过监听器发送到Oracle时, 会触发一个Server pro ...
- Xilinx FPGA LVDS应用
最近项目需要用到差分信号传输,于是看了一下FPGA上差分信号的使用.Xilinx FPGA中,主要通过原语实现差分信号的收发:OBUFDS(差分输出BUF),IBUFDS(差分输入BUF). 注意在分 ...
- Instrumentation 框架简介
原文地址:http://www.cnblogs.com/xirihanlin/archive/2010/06/15/1758677.html Android提供了一系列强大的测试工具,它针对Andro ...
- YII 多表联查 纵表
A id 与B a.id B id 与C b.id C id 与D c.id 查A读D数据 应用场景: order表 ordergoods表 goods表 merchant加盟商 order 与ord ...
- flask + Python3 实现的的API自动化测试平台---- IAPTest接口测试平台
**背景: 1.平时测试接口,总是现写代码,对测试用例的管理,以及测试报告的管理持久化做的不够, 2.工作中移动端开发和后端开发总是不能并行进行,需要一个mock的依赖来让他 ...
- vue-router在ie9及以下history模式支持
参考: https://www.npmjs.com/package/vue-route https://github.com/devote/HTML5-History-API 提要: ie9及以下不支 ...
- 《java.util.concurrent 包源码阅读》13 线程池系列之ThreadPoolExecutor 第三部分
这一部分来说说线程池如何进行状态控制,即线程池的开启和关闭. 先来说说线程池的开启,这部分来看ThreadPoolExecutor构造方法: public ThreadPoolExecutor(int ...
- 纯Socket(BIO)长链接编程的常见的坑和填坑套路
本文章纯属个人经验总结,伪代码也是写文章的时候顺便白板编码的,可能有逻辑问题,请帮忙指正,谢谢. Internet(全球互联网)是无数台机器基于TCP/IP协议族相互通信产生的.TCP/IP协议族分了 ...
- Java基础回顾(3)
数组:用一种数据类型的集合 ★数组元素下标从0开始. 数组的复制.扩容: ①.System.arraycopy(源数组, 源数组的初始下标, 目标数组, 目标数 ...
- Emrips 反质数枚举 javascript实现
今天看到一个kata,提出一个"emirps"的概念:一个质数倒转后得到的是一个不同的质数,这个数叫做"emirps". 例如:13,17是质数,31,71也是 ...