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
函数里面去了