一、JSX语法的介绍
告诉你件事，JSX就是React搞出来的JavaScript扩充大法，你们搞网页前端的肯定经常碰到。这玩意儿让我们直接用JS写出HTML似的东西来描述界面部件，不用搞那些麻烦的DOM元素。不过别小看它，其实它把JSX变成了普通的JavaScript函数，然后生成个相应的对象。这样一来，运行时就不涉及DOM操作了，咱的程序速度就能飙升起来喽！
用JSX做前端超简单，快速搞定各种创意玩意儿，而且还不用费劲地手动操作DOM，简直太舒适！开始学习vue可能会有些挑战，不过只要安上一个小工具就能搞定！有了它，用JSX轻松画出各种vue组件不是梦！
babel-plugin-jsx-v-model咋用？
想要用Vue玩转JSX语法？用babel-plugin-jsx-v-model就行。它把JSX变成了Vue独有的样子，让你能用Vue享受JSX的好处，做组件更好使啦～
只需添加了babel-plugin-jsx-v-model这个插件并设定好对应参数，Vue神奇地理解了JSX，任你随意挥洒，用JSX写出丰富多彩的Vue组件。
三、Vue Class Component库的运用
npm install babel-plugin-jsx-v-model --save-dev
你还记得吗？最近Vue更新了个叫Vue Class Component的模块，跟Angular差不多，用来写代码超级爽！
{
"plugins": ["jsx-v-model"]
}
用Vue class Component库，可以把Vue组件变成类，还能加些神奇的修饰符定义各种属性。看起来清晰易懂，改起来也方便那怎么把Vue组件搞成类嘞?简单几步就搞定~
别着急安 Vue Class Component 库，先把要用的部分扔进组件里。接着，就是用装饰器@Component 给它打标记！
加点@Prop让你的组件炫起来～别忘了设定好类型和默认值！
最后在模板中使用定义好的组件即可。
这样搞，我们就能搞定Vue中的类定义组件，代码质量和易维护度都能提升。关键是，整个流程变得更快、更爽快
你选谁？是模板语法还是和class component斗个痛快？
npm install vue-class-component --save
总的来说，Vue里头不光有自带的模板语法，还有其他库能帮咱们搞定JSX和基于类的组件开发！这样子多方便随你喜欢或按需求做前端开发就行了呗！
要是你倾向于简单的模板，那直接上手Vue吧；若是喜欢React样子，不妨试试babel-plugin-jsx-v-model，它能用JSX书写呢；如果你爱面向对象且看重整洁的代码风格，Vue Class Component可能合你心意，因为这是用类构造组件的方法喔~
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
// 定义组件代码
}
说白了，方法并没绝对好或坏，主要看你们眼光如何。找个适合项目的就是。但记住，不管选啥，质量跟进度都得保证！
五、结语
import Vue from 'vue'
import Component, { Prop } from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
@Prop(String) message!: string
// 定义组件代码
}
今天就让我给大家科普一下Vue里隐藏着的两个小秘密—— JSX 和类组件！记得听完后要学会用！这不仅会提高你在前端开发中的技能，还能让你体验到Vue框架有多方便、多实用、多适合新手！
怎么样，不介意聊聊？Vue中的JSX和类组件，你更喜欢用哪一种来搞前端组件开发呀？
评论0