vue项目中使用jsx语法
vue项目中使用jsx语法1、官方文档传送门2、github上插件传送门一、环境搭建步骤1、使用vue-cli构建一个项目2、安装依赖包yarn add babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env...
·
vue
项目中使用jsx
语法
一、环境搭建步骤
-
1、使用
vue-cli
构建一个项目 -
2、安装依赖包
yarn add babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --dev
-
3、在
.babelrc
中配置{ "presets": ["env"], "plugins": ["transform-vue-jsx"] }
-
4、创建一个
test.vue
的文件<script> export default { data () { return { msg: 'hello' } }, methods: { print (e) { console.log(e) console.log(this) console.log('点击了我') } }, render () { return ( <div> <h1 class="h1" onClick={(e) => this. print(e)}>{this.msg}</h1> </div> ) } } </script> <style scoped> .h1{ color: #f00; } </style>
-
5、使用方式和传统的方式一样的,只是把
template
里面的代码放到render
函数里面去了
二、查看博主更多文章
更多推荐
已为社区贡献22条内容
所有评论(0)