这里有新鲜出炉的 vue.js 教程, 程序狗速度看过来!
vue.js 轻量级 JavaScript 框架
Vue.js 是构建 web 界面的 JavaScript 库, 提供数据驱动的组件, 还有简单灵活的 API, 使得 MVVM 更简单.
这篇文章主要介绍了详解 Vue 如何支持 JSX 语法, 小编觉得挺不错的, 现在分享给大家, 也给大家做个参考. 一起跟随小编过来看看吧
通常开发 vue 我们使用的是模板语法, 其实还有和 react 相同的语法, 那就是 render 函数, 同样支持 jsx 语法.
Vue 的模板实际是编译成了 render 函数.
1. 传统的 createElement 方法
createElement(
'anchored-heading', {props: {level: 1}
}, [
createElement('span', 'Hello'),
'world!'
]
)
渲染成下面这样
<anchored-heading :level="1">
<span>Hello</span> world!
</anchored-heading>
2. 使用 jsx 语法
这就是会用到一个 Babel plugin 插件, 用于在 Vue 中使用 JSX 语法的原因, 它可以让我们回到于更接近模板的语法上.
1. 安装
npm install\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev
2. 编辑. babelrc 文件
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
代码编辑如下
Vue.component('jsx-example', {
render(h) { // <-- h must be in scope
return < div id = "foo" > bar < /div>
}
})/
将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例, 实际上也是 JSX 所要求的, 如果在作用域中 h 失去作用, 在应用中会触发报错.
官网说明文档: https://cn.vuejs.org/v2/guide/render-function.html#JSX
来源: http://www.phperz.com/article/18/0129/360847.html