Vue中jsx不完全应用指南小结

前言文章不介绍任务背景知识，没有原理说明，偏向于实践的和经验分享。

文章所有的代码是基于Vue CLI 3.x版本，不会涉及到一步步通过Webpack来配置JSX所需要的知识点。

在使用Vue开发项目时绝大多数情况下都是使用模板来写HTML，有些时候页面复杂又存在各种条件判断来显示/隐藏和拼凑页面内容，或者页面中很多部分存在部分DOM结构一样的时候就略显捉襟见肘，会写大量重复的代码，会出现单个.vue文件过长的情况，这个时候我们就需要更多的代码控制，这时候可以使用渲染函数。

渲染函数想必平时几乎没有人去写，因为写起来很痛苦（本人也没有写过）。更多的是在Vue中使用JSX语法。写法上和在React中差不多，功能上还是没有React中那么完善。

在写JSX的过程中不得考虑一个样式的问题，虽然可以直接在.vue文件中不写<tempate>部分，只写<script>和<style>部分，而不用担心样式作用域问题。更多的时候还是推荐直接使用.js的方式来写组件，这个时候就涉及到样式作用域的问题了。

在React的生态中，有很多CSS-IN-JS的解决方案，比如styled-jsx、emotion、styled-ponents等，目前最活跃和用户量最多的是styled-ponents，目前已经拥有良好的生态圈子。如果需要在样式中作一些像Sass/Less中的颜色计算，可以使用来实现，不止这么简单的功能。在Vue中可使用的方案就太少了，因为Vue使用模板来写HTML本身是开箱即用的样式scoped，在使用JSX写组件的时候就面临着样式问题，一种方案是在组件包裹<div>中取一个特殊的名字，然后样式都嵌套写在这个class狼蚁网站SEO优化，难免会遇到命名冲突的情况，而且每次还得变着花样取名称。，就是引入CSS-IN-JS在Vue对应的实现，但目前来看Styled-ponents官方提供了一个Vue版本的叫和emotion的，用的人实在太少。像styled-ponents进行了重大更新和变化，Vue版本的还是最初的版本，而且有时候还出现样式不生效的情况。

接下来进入正题，从简单语法到经验分享（大牛请绕行）

基本用法

需要约定一下，使用JSX组件命名采用首字母大写的驼峰命名方式，样式可以少的可以直接基于vue-styled-ponents写在同一个文件中，复杂的建议放在单独的_Styles.js_文件中，也可以不采用CSS-IN-JS的方式，使用Less/Sass来写，然后在文件中import进来。

狼蚁网站SEO优化是一个通用的骨架

import styled from 'vue-styled-ponents'

const Container = styled.div`
 heigth: 100%;
`

const Dashboard = {
 name: 'Dashboard',
 
 render() {
 return (
  <Container>内容</Container>
 )
 }
}

export default Dashboard

插值

在JSX中使用单个括号来绑定文本插值

<span>Message: {this.messsage}</span>
<!-- 类似于v-html -->
<div domPropsInnerHTML={this.dangerHtml}/>
<!-- v-model -->
<el-input v-model={this.vm.name} />

在jsx中不需要把v-model分成事件绑定和赋值二部分分开来写，因为有相应的babel插件来专门处理。

样式

在JSX中可以直接使用class="xx"来指定样式类，内联样式可以直接写成style="xxx"

<div class="btn btn-default" style="font-size: 12px;">Button</div>

<!-- 动态指定 -->
<div class={`btn btn-${this.isDefault ? 'default' : ''}`}></div>
<div class={{'btn-default': this.isDefault, 'btn-primary': this.isPrimary}}></div>
<div style={{color: 'red', fontSize: '14px'}}></div>

遍历

在JSX中没有v-for和v-if等指令的存在，这些全部需要采用Js的方式来实现

{/ 类似于v-if