Introduction to the use of jsx syntax of vue components

This article mainly introduces the specific use of jsx syntax of vue components. The content is quite good. Now I will share it with you and give it as a reference.

If you use the render function to write more complex vue components, it will be unfriendly to readability and maintainability, and using jsx will bring us back to a syntax closer to templates. The babel translator will translate jsx into render function for rendering.

Configuration

Requires 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>

After translation

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 used in the rendering function. Pass in the first parameter, such as:

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

Automatically inject h function

Starting from 3.4.0, babel will automatically inject h in methods declared with ES2015 syntax and getter accessors (except when using function keywords or arrow functions) (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, the vnode of Vue2.0 The format is different from react. The second parameter of the createElement 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 expansion operator

supports JSX expansion, and 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 Vue built-in commands. The only exception is v-show, which can be used v-show={value} syntax. Most instructions can be implemented programmatically. For example, v-if is a ternary expression, v-for is a array.map(), etc. .

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 instruction data format, such as:

const directives = [
 { name: 'my-dir', value: 123, modifiers: { abc: true } }
]

return <p {...{ directives }}/>

The above is the entire content of this article, I hope it will be helpful to everyone's learning, For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to Vue-based lazy loading plug-in vue-view-lazy

vue component name Introduction

jquery to achieve the effect of horizontal scrolling of images

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