vue jsx 使用指南

vue jsx 语法与 react jsx 还是有些不一样,在这里记录下。


let component = null // if 语句
if (true) {
component = (
<div></div>
);
} else {
component = (
<div></div>
);
} var ul = (
<ul>
{component}
</ul>
); // map 语句
var coms = limit.map(i => {
return {
<li>
{ul}
</li>
};
}) // 属性
<li onClick={() => console.log()}> // 自定义指令
let directives = [{name: 'prod-img', value: params.row.skn, modifiers: {skn: true}} ]; return (
<div>
<img {...{directives}}></img> // 属性展开
</div>
); // 自定义过滤器
不建议使用,直接当函数使用
foo(something) // methods
this.foo() // model
<i-input
value={params.row.factoryCode}
placeholder='请输入...'
onInput={val => (params.row.factoryCode = val)}
style={{width: '100%'}}>
</i-input> // 自定义事件
return (
<Operator
category-id={this.categoryId} // prop绑定
product={params.row} // prop 绑定
on-change={this.onChangeStatus}> // event 绑定
</Operator>
); //三元运算
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div // 注释
<div>
<h1>菜鸟教程</h1>
{/*注释...*/}
</div> // html
<div>{{_html: '<h1>Hello World!!</h1>'}}</div> // h函数写法
return h('Input', {
props: {
value: params.row.buyingNums
},
on: {
input: val => {
params.row.buyingNums = val;
},
'on-blur': () => {
this.update(params);
}
}
}); // 所有的事件监听必须以on开头 // template
<input @on-change='click'> // jsx
<input onOn-change={() => this.click()}></input>
<input on-on-change={() => this.click()}></input>
<input on-on-change={(val) => this.click(val)}></input>
<input on-on-change={ this.click}></input>

vue jsx 使用指南的更多相关文章

  1. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  2. 【vue.js权威指南】读书笔记(第一章)

    最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...

  3. vue jsx与render的区别及基本使用

    vue template语法简单明了,数据操作与视图分离,开发体验友好.但是在某些特定场合中,会限制一些功能的扩展,如动态使用过滤器.解析字符串类型的模板文件等.以上功能的实现可以借助vue的rend ...

  4. vue自学入门-6(vue jsx)

    目录: vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5( ...

  5. element-ui 通用表单封装及VUE JSX应用

    一.存在及需要解决的问题 一般在做后台OA的时候会发现表单重复代码比较多,且逻辑基本一样,每次新加一个表单都需要拷贝基本一致的代码结构,然后只是简单地修改对应的字段进行开发 二.预期结果 提取重复的表 ...

  6. Vue JSX、自定义 v-model

    ​博客地址:https://ainyi.com/92 最初用到 JSX,就是做这个博客的时候.iview 表格组件,不支持像 element 那样直接写 html 代码渲染,只能通过 render 函 ...

  7. vue的风格指南(强烈推荐)

    1.组件文件 只要有能够拼接文件的构建系统,就把每个组件单独分成文件. 当你需要编辑一个组件或查阅一个组件的用法时,可以更快速的找到它. 2.单文件组件文件的大小写 单文件组件的文件名应该要么始终是单 ...

  8. Vue.js 入门指南

    1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...

  9. vue服务器端渲染指南研究

    什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HT ...

随机推荐

  1. Could not get dialect instance.

    一般此错误都是和数据库有关,请确认数据库配置文件是否配置正确,或者确认数据库是否连接正常

  2. 如何为开发项目编写规范的README文件(windows),此文详解

    为什么要写这篇博客? 其实我是一个入坑已经半年的程序员,因为不是计算机专业,只能自己摸索,所以我深知博客的重要性.每次我的学习笔记啊,项目的,面试题啊,有的,只要有时间,我肯定上传上来,一方面自己可以 ...

  3. oracle中增加pga和sga

    修改oracle数据库SGA和PGA大小 个人原创,允许转载,请注明出处,作者,否则追究法律责任. SGA的大小:一般物理内存20%用作操作系统保留,其他80%用于数据库.SGA普通数据库可以分配40 ...

  4. windows下安装Virtualenvwrapper

    windows下安装Virtualenvwrapper 我们可以使用Virtualenvwrapper来方便地管理python虚拟环境,但是在windows上安装的时候.....直接 install  ...

  5. ArrayList源码解析(JDK1.8)

    package java.util; import sun.misc.SharedSecrets; import java.util.function.Consumer; import java.ut ...

  6. CorelDraw X8 破解激活问题

    在为X8使用特殊辅助手段激活时,通过菜单“帮助”-“产品详细信息”页中的“我有序列号”链接打开对话框,输入序列号激活. 然而,由于安装时要求联网登陆,很有可能获取了试用序列号,导致点击链接后,输入对话 ...

  7. 插入排序—直接插入排序(Straight Insertion Sort)

    基本思想: 将一个记录插入到已排序好的有序表中,从而得到一个新,记录数增1的有序表.即:先将序列的第1个记录看成是一个有序的子序列,然后从第2个记录逐个进行插插入到已入,直至整个序列有序为止. 要点: ...

  8. Django——ORM

    Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...

  9. 【Python】 配置文件相对路径&软件自动执行的工作目录

    今天对监控脚本做了一些变更,然后突然发现监控全部都失效了..排查了半天问题仍然不知所踪.最终发现居然是一个踩过好几次的老坑.. 就是脚本内写的配置文件为了调试方便写成了相对路径,但是在上线时没有意识到 ...

  10. C++顺序容器知识总结

    容器是一种容纳特定类型对象的集合.C++的容器可以分为两类:顺序容器和关联容器.顺序容器的元素排列和元素值大小无关,而是由元素添加到容器中的次序决定的.标准库定义了三种顺序容器的类型:vector.l ...