Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.