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. 华为/华三交换机snmp配置

    snmp-agent                       /使能snmp服务/snmp-agent local-engineid 000007DB7F000001000049DD   /系统自 ...

  2. Hadoop之Secondary NameNode

    NameNode存储文件系统的变化作为log追加在本地的一个文件里:这个文件是edits.当一个NameNode启动时,它从一个映像文件:FsImage,读取HDFS的状态,使用来自edits日志文件 ...

  3. libpqxx接口的在linux下的使用,解决psql:connections on Unix domain socket "/tmp/.s.PGSQL.5432"错误

    在项目中使用postgresql数据库时要求在windows和linux双平台兼容.于是在windows下使用的接口在linux下爆出异常: psql:connections on Unix doma ...

  4. RouterPassView——路由器密码查看工具

    大多数现代路由器都可以让您备份一个文件路由器的配置文件,然后在需要的时候从文件中恢复配置.路由器的备份文件通常包含了像您的ISP的用户名重要数据/密码,路由器的登录密码,无线网络的KEY. 如果你忘记 ...

  5. Python 3.6.4 / win10 使用pip安装keras时遇到依赖的PyYAML安装出错

    PS C:\Users\myjac\Desktop\simple-chinese-ocr> pip install keras Collecting keras Downloading http ...

  6. jmeter--简单的接口测试(GET/POST)

    最近在学习接口测试,本文就简单的谈一谈对接口相关知识的理解. 一.什么是接口? 程序接口:由一套陈述.功能.选项.其它表达程序结构的形式.以及程序师使用的程序或者程序语言提供的数据组成(百度百科定义) ...

  7. 求第k小的元素

    用快排解决: 用快排,一趟排序后,根据基准值来缩小问题规模.基准值的下角标i 加1 表示了基准值在数组中第几小.如果k<i+1,那就在左半边找:如果k>i+1那就在右半边找.当基准值的下角 ...

  8. thinkphp3.2-更改控制器名后找不到相应的表?报1146的错

    用tp在做着自己的小系统的时候,明明在刚才还是能好好地查到表的,在Service用了'D'方法连自己数据库的表,只是更改了自己的控制器名,却报错了... 我就纳闷了,虽然我的控制器和Service用的 ...

  9. POJ1331 Multiply(strtol函数练习)

    题目链接:http://poj.org/problem?id=1331 主要介绍strtol函数: long int strtol(const char *nptr,char **endptr,int ...

  10. MYSQL数据库学习八 触发器的操作

    8.1 触发器 在表发生更改时,自动进行一些处理.例如,学生表中每增加一条关于学生记录时,学生的总数就必须同时改变,同时需要检查电话号码格式是否正确,地址缩写是否正确. 以下语句会激活触发器: DEL ...