Describes how to use webpack to write the jsx syntax and webpackjsx In the vue project.

Describes how to use webpack to write the jsx syntax and webpackjsx In the vue project.

This article describes how to use webpack to write the jsx syntax in the vue project. The details are as follows:

We know the support for virtual DOM in Vue 2.0. We can use JavaScript to dynamically create elements without writing HTML code in the template. The virtual DOM will eventually be rendered as the real DOM.

data: { msg: 'Hello world'},render (h) { return h( 'div', { attrs: { id: 'my-id' }, [ this.msg ] );}

The rendered content is:

<div id='my-id'>Hello world</div>

Render in Vue 2.0 opens a new world for us and gives us unlimited imagination. For example, we can apply the JSX syntax used in React to Vue. Next, let's talk about how to use JSX In the Vue project.

Introduction to JSX

JSX is a Javascript-based language extension that allows you to insert XML syntax-style code into Javascript code. As follows:

data: { msg: 'Hello world'},render (h) { return ( <div id='my-id'>,  { this.msg }  </div> );}

However, the browser cannot parse JSX by default. It must be compiled into standard JavaScript code before it can run. Just as we need to compile sass or less into CSS code before it can run.

Use JSX in Vue

The Vue framework does not specifically support JSX. In fact, it does not need to be supported because JSX will eventually compile as a standard JavaScript code. In this case, why can Vue and JSX be used together? It's easy, because Vue supports Virtual DOM, you can use JSX or other preprocessing languages, as long as the render method works properly.

Vue officially provides a plug-in called babel-plugin-transform-vue-jsx to compile JSX. We will introduce how to use it later.

Why use JSX in Vue?

Why is JSX used in Vue? In fact, Vue does not force you to use JSX. It only provides a new method. The so-called radish vegetables, each has their own love. Some people think that JSX is more concise in the render method, while others think it is disgusting to mix HTML code into JavaScript code. If you like it, you don't need it if you don't like it. To put it bluntly, Let's first look at a simple application:
Script. js

new Vue({ el: '#app', data: { msg: 'Click to see the message' }, methods: { hello () {  alert('This is the message') } }});

Index.html

<div id="app"> <span   class="my-class"   style="cursor: pointer"   v-on:click="hello" >  {{ msg }} </span></div>

The code is simple, that is, a span is displayed on the page, and the content is "Click to see the message ". When you click the content, an alert is displayed. Let's see how to use render.

Implemented using the render function in Vue 2.0

Script. js

new Vue({ el: '#app', data: { msg: 'Click to see the message' }, methods: { hello () {  alert('This is the message') } }, render (createElement) { return createElement(  'span',  {  class: { 'my-class': true },  style: { cursor: 'pointer' },  on: {   click: this.hello  }  },  [ this.msg ] ); },});

Index.html

<div id="app"><!--span will render here--></div>

Use JSX to implement

Script. js

new Vue({ el: '#app', data: { msg: 'Click to see the message.' }, methods: { hello () {  alert('This is the message.') } }, render: function render(h) { return (  <span  class={{ 'my-class': true }}  style={{ cursor: 'pointer' }}  on-click={ this.hello }  >  { this.msg }  </span> ) }});

Index.html is the same as above.

Babel-plugin-transform-vue-jsx

As mentioned above, JSX can be run only after it is compiled into JavaScript. Therefore, the third sample requires additional compilation steps. Here we use Babel and Webpack for compilation.

Open your webpack. config. js file and add babel loader:

loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }]

Create or modify your. babelrc file and add the plug-in babel-plugin-transform-vue-jsx.

{ "presets": ["es2015"], "plugins": ["transform-vue-jsx"]}

Now, when you run webpack, The JSX in the code will be correctly compiled as the standard JavaScript code.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.