脚本宝典收集整理的这篇文章主要介绍了

心路历程:vue2.0+webpack+koa2 前后端同构实践(二)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

vue2.0之JSX初体验

JSX入门

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

标签必须闭合

在 JSX 中, <MyComponent /> 是合法的,而 <MyComponent> 就不合法。
所有的标签都必须闭合,可以是自闭和的形式,也可以是常规的闭合。

<div />和<div></div> 是等价的。

标签与组件

要渲染 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 (
      <tr>
        <th>{this.row.id}</th>
        {this.row.items.map(item => <Column item={item}/>)}
      </tr>
    )
  }
}

源码

注意点

render 方法的参数名必须是h,原因没深究研究,github有提到。

给自己挖坑

开始看源码时,误将render写法等同于以下代码

render: h => {
    return (
        ...
        <th>{this.row.id}</th>
        ...
    )
}

导致编译结果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来做单向数据流,告别双向绑定。到时候遇到做表单的时候再来仔细考虑下这个问题。

总结

以上是脚本宝典为你收集整理的

心路历程:vue2.0+webpack+koa2 前后端同构实践(二)

全部内容,希望文章能够帮你解决

心路历程:vue2.0+webpack+koa2 前后端同构实践(二)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过