心路历程:vue2.0+webpack+koa2 前后端同构实践(二)
vue2.0之JSX初体验
JSX入门
JSX来至于React,上手并不复杂,在Vue中使用只有小部分差异
JSX语法介绍
Vue中的JSX语法差异
标签必须闭合
在 JSX 中, 是合法的,而 就不合法。
所有的标签都必须闭合,可以是自闭和的形式,也可以是常规的闭合。
和 是等价的。
标签与组件
要渲染 HTML 标签,只需在 JSX 里使用小写字母开头的标签名。
要渲染 React 组件,只需创建一个大写字母开头的本地变量。
分支 if/else
if-else-in-JSX
但是实践时,发现vue2.0并不支持,也许是我的姿势不对,稍后填坑。
发现可能是一个bug插入JSX中的变量为空字符串时导致如下问题,已经提了issue
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. Bailing hydration and performing full client-side render.
循环 for
编辑器中格式化插件支持
推荐插件js-beautify,对html+css(less)+js(es6)都良好支持。
支持JSX只要在.jsbeautify文件中添加如下配置:
{ .... "e4x": true ....}
从官网例子开始
import Column from './column'export default { props: ['row'], serverCacheKey: props => { return props.row.id + '::' + props.row.items.length }, render (h) { return ( {this.row.id} {this.row.items.map(item => )} ) }}
源码
注意点
render 方法的参数名必须是h,原因没深究研究,github有提到。
给自己挖坑
开始看源码时,误将render写法等同于以下代码
render: h => { return ( ... {this.row.id} ... )}
导致编译结果this 被编译成 undefined
render: function render(h) { return h( ... "th", [undefined.row.id] ... )}
作者的回复
尤大大已经解答了这个问题
arrow functions uses lexical this, you can only use normal functions if you want this.
箭头函数
回头翻看了下阮老师写的《ECMAScript 6 入门》箭头函数章节,之前看时没能理解到位。
函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
使用JSX实现Vue2.0功能的一些方案
插入HTML格式与filters的使用
基本和JSX一样
Vue组件中的slot[name]标签替代方案
如果是单slot可以通过子节点表达式插入,一个组件有多solt时怎么处理呢?
如何实现双向绑定?
目前的方案基于Vuex来做单向数据流,告别双向绑定。到时候遇到做表单的时候再来仔细考虑下这个问题。
关键字:vue.js, jsx
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!