Detailed explanation of the steps to use jsx syntax of vue component

This time I will bring you a detailed explanation of the steps for using the jsx syntax of the vue component. What are the precautions for using the jsx syntax of the vue component. The following is a practical case, let's take a look.

Configuration

Requires the babel plug-in

Installation

npm install\
 babel-plugin-syntax-jsx\
 babel-plugin-transform-vue-jsx\
 babel-helper-vue-jsx-merge-props\
 babel-preset-env\
 --save-dev

.babelrc configuration

Add transform-vue-jsx in plugins

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

Basic example

Before escaping

<p id="foo">{this.text}</p>

Translation After

h('p', {
 attrs: {
  id: 'foo'
 }
}, [this.text])

Note: The h function is the $createElement method of the vue instance. It must exist in the scope of jsx and must be the first one in the rendering function. Parameters are passed in, such as:

render (h) { // <-- h 函数必须在作用域内
 return <p id="foo">bar</p>
}

Automatically inject h function

Starting from 3.4.0, methods declared using ES2015 syntax and# In the ##getter accessor (except when using the function keyword or arrow function), babel will automatically inject h (const h = this.$createElement) function, so the (h) parameter can be omitted.

Vue.component('jsx-example', {
 render () { // h 会自动注入
  return <p id="foo">bar</p>
 },
 myMethod: function () { // h 不会注入
  return <p id="foo">bar</p>
 },
 someOtherMethod: () => { // h 不会注入
  return <p id="foo">bar</p>
 }
})
@Component
class App extends Vue {
 get computed () { // h 会自动注入
  return <p id="foo">bar</p>
 }
}

Comparison between Vue JSX and React JSX

First of all, the vnode format of Vue2.0 is different from react,

createElement The second parameter of the function is a data object, which accepts a nested object. Each nested object will have a corresponding module for processing.

Vue2.0 render syntax

render (h) {
 return h('p', {
  // 组件props
  props: {
   msg: 'hi'
  },
  // 原生HTML属性
  attrs: {
   id: 'foo'
  },
  // DOM props
  domProps: {
   innerHTML: 'bar'
  },
  // 事件是嵌套在`on`下面的，所以将不支持修饰符，如：`v-on:keyup.enter`，只能在代码中手动判断keyCode
  on: {
   click: this.clickHandler
  },
  // For components only. Allows you to listen to
  // native events, rather than events emitted from
  // the component using vm.$emit.
  nativeOn: {
   click: this.nativeClickHandler
  },
  // class is a special module, same API as `v-bind:class`
  class: {
   foo: true,
   bar: false
  },
  // style is also same as `v-bind:style`
  style: {
   color: 'red',
   fontSize: '14px'
  },
  // other special top-level properties
  key: 'key',
  ref: 'ref',
  // assign the `ref` is used on elements/components with v-for
  refInFor: true,
  slot: 'slot'
 })
}

Corresponding Vue2.0 JSX syntax

render (h) {
 return (
  <p
   // normal attributes or component props.
   id="foo"
   // DOM properties are prefixed with `domProps`
   domPropsInnerHTML="bar"
   // event listeners are prefixed with `on` or `nativeOn`
   onClick={this.clickHandler}
   nativeOnClick={this.nativeClickHandler}
   // other special top-level properties
   class={{ foo: true, bar: false }}
   style={{ color: &#39;red&#39;, fontSize: &#39;14px&#39; }}
   key="key"
   ref="ref"
   // assign the `ref` is used on elements/components with v-for
   refInFor
   slot="slot">
  </p>
 )
}

JSX expansionOperator

Supports JSX expansion. The plug-in will intelligently merge data attributes, such as:

const data = {
 class: ['b', 'c']
}
const vnode = <p class="a" {...data}/>

The merged data is:

{ class: ['a', 'b', 'c'] }

Vue command

JSX does not support most of the Vue built-in commands, the only exception is

v-show, which can be used v- The syntax of show={value}. Most instructions can be implemented programmatically. For example, v-if is a ternary expression, v-for is a array.map ()wait.

If it is a custom instruction, you can use the

v-name={value} syntax, but the modified syntax does not support the instruction parameters arguments and modifiers modifier. There are two solutions:

Pass all the content as an object, such as:

v-name={{ value, modifier: true }}

Use The native vnode command data format, such as:

const directives = [
 { name: 'my-dir', value: 123, modifiers: { abc: true } }
]
return <p {...{ directives }}/>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

JS implements the simplest search, sorting, and deduplication algorithm

How to use jQuery to achieve acquisition random color

The above is the detailed content of Detailed explanation of the steps to use jsx syntax of vue component. For more information, please follow other related articles on the PHP Chinese website!