loading...

1

vue jsx 重构项目 jsx

vue读完大概需要4分钟

  • 发布时间:2019-01-02 14:29 星期三
  • 刘伟波
  • 325
  • 更新于2019-01-04 16:48 星期五

配置

安装依赖

npm install babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx

添加.babelrc文件

{
  "presets": ["env"],
  "plugins": ["transform-vue-jsx"]
}

一些语法变化

自定义事件$emit

// To trigger the event you need to something like:
  <a onClick={(e: any) => this.$emit('test')}>
            {this.$slots.default}
        </a>
// To listen to the event:
<NavLink onTest={() => alert('clicked')}>
            <i class='fa fa-bars'></i>
        </NavLink>

v-*

jsx里面引入vue模版组件,这里没有什么要注意的,除了连接符式的属性要转换成驼峰式,还有一个需要注意的是指令,如果用了jsx,那么内置的指令都不会生效(除了v-show),好在内置指令大部分都可以用jsx描述。

属性props

设置 functional: true,点击查看 函数式组件

class类名

这样渲染的类只有foo,而没有bar

 class={{ foo: true, bar: false }}

--
作者:刘伟波

链接:http://www.liuweibo.cn/p/244

来源:刘伟波博客

本文原创版权属于刘伟波 ,转载请注明出处,谢谢合作

你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 segmentfault平台, 也可以来我的直播间来提问。
    关于技术问题或者有啥不懂的都可以留言, 我会定期回复答疑, 也可以来 我的直播间 提问, 推荐最新仓库 前端知识体系, 感謝支持!