VUE高阶------使用JSX语法【转载】

什么是JSX?

JSX就是Javascript和XML结合的一种格式。React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析.

对于h参数

h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始,我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入 const h = this.$createElement,这样你就可以去掉 (h) 参数了。对于更早版本的插件,如果 h 在当前作用域中不可用,应用会抛错。

安装

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props复制代码

修改.babelrc配置

{
  "presets": ["@vue/babel-preset-jsx"]
}复制代码

使用render函数和jsx

// item.vue

                    
                    

你可能感兴趣的:(VUE高阶------使用JSX语法【转载】)