学习这篇文章希望您已经具备以下知识：
- vue.js的基本使用
- 对前端三件套(html、css、js)已经可以熟练使用了
文末有配套demo代码：点我直达
JSX是什么
JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。（个人建议灵活度强的部分组件可以用JSX来代替，整个项目JSX属实没必要）
XML学习地址（学与不学可随意，了解就ok）：https://www.w3school.com.cn/xml/index.asp
用template的弊端：https://www.mk2048.com/blog/blog_h1c2c22ihihaa.html
为什么要在 Vue 中使用 JSX
有时候，我们使用渲染函数（render function）来抽象组件，渲染函数不是很清楚的参见官方文档, 而渲染函数有时候写起来是非常痛苦的，所以只需要有个了解。
渲染函数：https://cn.vuejs.org/v2/guide/render-function.html#%E5%9F%BA%E7%A1%80
createElement( 'anchored-heading', { props: { level: 1 } }, [ createElement('span', 'Hello'), ' world!' ] )
其对应的模板是下面：
<anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>
你看这写起来多费劲，这个时候就派上 JSX 上场了。在 Vue 中使用 JSX，需要使用 Babel 插件，它可以让我们回到更接近于模板的语法上，接下来就让我们一起开始在 Vue 中写 JSX 吧。
创建项目并配置Babel
vue create vue-jsx # 选择vue2的
安装依赖：
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props # or yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
配置 .babelrc(babel.config.js) ：
module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ['@vue/babel-preset-jsx', { 'injectH': false }] ] }
配置后我们启动项目：
yarn serve
配置了babel.config.js后，我们把App.vue引入的HelloWorld.vue改为HelloWorld.js，并且删除HelloWorld.js中关于template和style,以及script标签。
export default { name: 'HelloWorld', props: { msg: String } }
JSX基础用法
这里展示在 Vue 中书写一些基础内容。
纯文本、动态内容、标签使用、自定义组件、样式和class
import myComponent from './myComponent' import './HelloWorld.css' // 创建一个组件button const ButtonCounter = { name: "button-counter", props: ["count"], methods: { onClick() { this.$emit("change", this.count + 1); } }, render() { return ( <button onClick={this.onClick}>数量 {this.count}+</button> ); } }; export default { name: 'HelloWorld', components: { myComponent }, data () { return { text:'hello 纸没了飞机', inputText:'我吃了', count: 0 } }, props: { msg: String }, watch: {}, methods: { onChange(val) { this.count = val; alert(this.count) } }, render() { // const {text,inputText,count} = this //通过解构，下方return片段中就不需要this return ( <div> <h3>内容</h3> {/* 纯文本 */} <p>hello, I am Gopal</p> {/* 动态内容 */} <p>{ this.text }</p> <p>hello { this.msg }</p> {/* 输入框 */} <input/> {/* 自定义组件 */} <myComponent/> <ButtonCounter style={{ marginTop: "10px" }} count={this.count} type="button" onChange={this.onChange} /> </div> ); } }
题外话：创建组件那里大家可以多学学const 创建的ButtonCounter组件的那种方式。在React中也是经常会这么创建的。
这么看的话和在template里写没有多大区别，标签该是啥还是啥没有变化。那么这么一想的话，style呢，class呢？接下来就是style和class样式的写法(包括动态样式)
我们先给h3绑定一个class为colorRed：
<h3 class="colorRed">内容</h3>
审查元素发现直接写class绑定是可以的：
那么class的样式怎么写呢？毕竟js文件里写貌似是不行的！
1、全局样式
App.vue
<style> .colorRed{ color: red; } </style>
2、引入一个css文件或者配合style-loader引入一个less、sass、stylus文件
注意：都需要安装配置对应的loader，既然都是JSX了，那我们用stylus来讲解下，相信less、sass大家都会了。stylus是一个省略了{}，靠缩紧来识别的css编译器。（不想用stylus可跳过，样式这块可随意）
yarn add global stylus yarn add --dev stylus stylus-loader
各种style安装见：https://www.cnblogs.com/jimc/p/10265198.html
安装完成后新建HelloWorld.styl，然后引入。
stylus的使用：https://www.jianshu.com/p/5fb15984f22d
stylus官网：https://stylus.zcopy.site/
控制台stylus报错见：https://blog.csdn.net/csdn_zhoushengnan/article/details/109448369
vscode编辑期报错：安装编辑器stylus语法插件，并重启
效果：
行内样式style：
<p style="color:blue">hello, I am Gopal</p>
动态绑定class和style
<p style={this.isGreen?'color:green':''}>{ this.text }</p> <p class={this.isYellow?'colorYellow':''}>hello { this.msg }</p> <p style={this.isRed?colorRed:''}>红色的文字</p>
属性绑定和普通HTML一样的
毕竟class和style可都是html的属性，这点相信大家都知道的。
<input placeholder="我是placeholder" /> <input placeholder={placeholderText} /> {/* 解构N个属性，要啥放啥 */} <div {...attrObj} />
效果：
