• 你需要知道的vue2 jsx render函数


    通常开发vue我们使用的是模板语法,其实还有和react相同的语法,那就是render函数,同样支持jsx语法。

    Vue 的模板实际是编译成了 render 函数。

    0 传统的createElement方法


    createElement(
    'anchored-heading', { props: { level: 1 } }, [ createElement('span', 'Hello'), ' world!' ] )


    渲染成下面这样
    <anchored-heading :level="1">
      <span>Hello</span> world!
    </anchored-heading>
     

    1 使用jsx语法

    安装下面的东东

    这就是会有一个 Babel plugin 插件,用于在 Vue 中使用 JSX 语法的原因,它可以让我们回到于更接近模板的语法上。

    https://github.com/vuejs/babel-plugin-transform-vue-jsx

    npm install
      babel-plugin-syntax-jsx
      babel-plugin-transform-vue-jsx
      babel-helper-vue-jsx-merge-props
      babel-preset-es2015
      --save-dev


    然后编辑.babelrc文件

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

    必须要像这样写

    Vue.component('jsx-example', {
      render (h) { // <-- h must be in scope
        return <div id="foo">bar</div>
      }
    })
  • 相关阅读:
    sentinel.conf样例
    哨兵模式java实例
    哨兵模式启动redis
    华为笔试:直角三角形个数
    leetcode 337. 打家劫舍iii
    leetcode 494. 目标数
    leetcode 394. 字符串解码
    leetcode 128. 最长连续子序列
    链表快排
    leetcode 877. 石子游戏
  • 原文地址:https://www.cnblogs.com/bhaltair/p/6648946.html
Copyright © 2020-2023  润新知