vue2.0之JSX初体验

JSX入门

JSX来至于React，上手并不复杂，在Vue中使用只有小部分差异

1. JSX语法介绍

2. 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

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！