How to use JSX in Vue
How to use JSX in Vue, I believe that many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.
What is JSX?
JSX is a grammatical extension of Javascript, JSX = Javascript + XML, that is, writing XML in Javascript. Because of this feature of JSX, it not only has the flexibility of Javascript, but also has the semantics and intuition of html. (personally, it is suggested that some flexible components can be replaced by JSX, and the JSX of the whole project is really unnecessary.)
XML learning address (feel free to learn or not, ok if you know it): https://www.w3school.com.cn/xml/index.asp
The drawback of using template: https://www.mk2048.com/blog/blog_h2c2c22ihihaa.html
Why use JSX in Vue
Sometimes, we use rendering functions (render function) to abstract components, rendering functions are not very clear from the official documentation, and rendering functions are sometimes very painful to write, so you only need to have an understanding.
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'),' worldview'])
The corresponding templates are as follows:
Hello world!
You see how hard it is to write, and JSX was sent to play at this time. To use JSX in Vue, you need to use the Babel plug-in, which brings us back to syntax that is closer to templates.
After reading the above, have you mastered how to use JSX in Vue? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!
