使用方法及细节就不一一说了。

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时踩过的坑的更多相关文章

  1. 在Vue中使用JSX,很easy的

    摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...

  2. vue中使用jsx

    vue中使用jsx 为什么需要使用jsx呢?这个需要搞清楚 其实vue官方也说了,对于那些非常多v-if v-else的情况,就可以尝试使用render函数或者jsx,不过render函数写简单的结构 ...

  3. vue中使用JSX报错,如何解决

    Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...

  4. 在PyQt5中使用Pandas时的几个坑

    最近在看Python GUI编程,在用到PyQt5+Pandas时遇到一些问题.这里把问题和解决方法整理一下.备查. (好像不能上传附件,内容只好写在下面了.) 在PyQt5中使用Pandas时的几个 ...

  5. 在vue中使用jsx语法

    什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解 ...

  6. VUE中集成echarts时 getAttribute of null错误

    错误 错误场景一: 错误提示: 在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如下: // 基于准备好的dom,初始化echart ...

  7. vue中prop传值时加不加v-bind(冒号:)

    前言:有关Vue中父组件通过prop传值给子组件时,是否加v-bind的问题,没弄清楚时感觉很乱,弄清楚之后很简单. 由于结果记起来很容易,所以先给出结果: 只有传递字符串常量时,不采用v-bind形 ...

  8. vue中使用定时器时this指向问题

    在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...

  9. vue中使用定时器时this指向

    箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁.   箭头函数: let timerOne = s ...

随机推荐

  1. 创建内部的yum源

    http://www.phy.duke.edu/~rgb/General/yum_HOWTO/yum_HOWTO/yum_HOWTO.html#toc6.2 主要的步骤包括: 1.创建Reposito ...

  2. idea for Mac 日常配置&快捷键

    配置: 1.jdk:file > project structure -- Project SDK; 快捷键: geter adn seter :command+n command+点到具体方法 ...

  3. 老男孩Python全栈开发(92天全)视频教程 自学笔记04

    day4课程目录: 逻辑运算符 while循环 day4课程内容梳理: 逻辑运算符 算数运算符:+,-,*,/,%,** 比较运算符:< ,>, ==,<=,>=,!=, 逻辑 ...

  4. struts2对于处理JSON的配置

    由于最近几年日益流行前后端分离模式,JSON作为数据载体也变得不可或缺.几乎所有的web框架都需要支持JSON,下面咱就一起了解下struts2是如何支持JSON的. 对于JSON的发送 这里有两种方 ...

  5. 字符串的缺点以及StringBuilder

    字符串的缺点: String 对象是不可改变的.每次使用 System.String 类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的 ...

  6. A:点排序-poj

    A:点排序 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个点的坐标(x, y),在输入的n个点中,依次计算这些点到指定点的距离,并按照距离进行从小到大排序,并且输出点的坐标 ...

  7. Servlet中web.xml 以及 <url-pattern>总结

    web.xml中添加Servlet配置信息 使用Eclipse创建Servlet,会自动的在WEB-INF下的web.xml中声明,但是有的时候需要我们手动的写入配置信息,以下就是Servlet在we ...

  8. JAVA8新特性(一)

    default拓展方法 java8为接口声明添加非抽象方法的实现,也成为拓展方法. public interface Formula { void doSomething(); default voi ...

  9. Linux磁盘分区(一):添加

    ***********************************************声明************************************************ 原创 ...

  10. SpringBoot集成Redis实现缓存处理(Spring AOP实现)

    第一章 需求分析 计划在Team的开源项目里加入Redis实现缓存处理,因为业务功能已经实现了一部分,通过写Redis工具类,然后引用,改动量较大,而且不可以实现解耦合,所以想到了Spring框架的A ...