Vue 是使用的的模板語法，Vue的模板實際上就是編譯成了 render 函數，同樣支持 JSX 語法。在 Vue 官網中，提供 createElement 函數中使用模板中的功能。

createElement 方法

createElement('anchored-heading', {props: {level: 1}}, [createElement('span', 'Hello'),' world!'] )渲染成下面這樣 <anchored-heading :level="1"><span>Hello</span> world! </anchored-heading>

使用 JSX 語法

Babal plugin 插件，用于在 Vue 中使用 JSX 語法，它可以讓我們回到更接近于模板的語法上。

1、安裝依賴

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

2、配置 .babelrc 文件

module.exports = {plugins: ['transform-vue-jsx'] }

3.該插件會編譯 JSX 語法：

<div id="foo">{this.text}</div> // 插件將上述編譯 JSX 編譯成下述 JS： h('div', {attrs: {id: 'foo'} }, [this.text])

h 函數就是 Vue 實例 $createElement 方法的簡寫，必須在JSX 所在的范圍內。由于此方法作為第一個參數傳遞給組件渲染函數，因此在大多數情況下，你可以這樣做：

Vue.component('jsx-example', {render (h) { // <-- h must be in scopereturn <div id="foo">bar</div>} })

h 自動注入

從 3.4.0 版本開始，我們會自動注入 const h = this.$createElement ES2015 語法中聲明的具有 JSX 的任何方法和 getter（不是函數或箭頭函數），因此你可以刪除 h 參數。

Vue.component('jsx-example', {render () { // h will be injectedreturn <div id="foo">bar</div>},myMethod: function () { // h will not be injectedreturn <div id="foo">bar</div>},someOtherMethod: () => { // h will not be injectedreturn <div id="foo">bar</div>} })@Component class App extends Vue {get computed () { // h will be injectedreturn <div id="foo">bar</div>} }

與 React JSX 的區別

Vue 2.0 的 vnode 格式與 React 的不同的是：createEelement 調用的第二個參數是‘數據對象’，它接受嵌套的對象。每個嵌套對象將由相應的模塊處理：

render (h) {return h('div', {// Component propsprops: {msg: 'hi',onCustomEvent: this.customEventHandler},// normal HTML attributesattrs: {id: 'foo'},// DOM propsdomProps: {innerHTML: 'bar'},// Event handlers are nested under "on", though// modifiers such as in v-on:keyup.enter are not// supported. You'll have to manually check the// keyCode in the handler instead.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 propertieskey: 'key',ref: 'ref',// assign the `ref` is used on elements/components with v-forrefInFor: true,slot: 'slot'}) }

Vue 2.0 JSX 中與上述等效：

render (h) {return (<div// normal attributes or prefix with on props.id="foo"propsOnCustomEvent={this.customEventHandler}// 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 propertiesclass={{ foo: true, bar: false }}style={{ color: 'red', fontSize: '14px' }}key="key"ref="ref"// assign the `ref` is used on elements/components with v-forrefInForslot="slot"></div>) }

組件引入

如果自定義元素以小寫字母開頭，則它將被視為字符串 ID，并用于查找已注冊的組件。如果以大寫開頭，則將其視為標識符，你可以執行以下操作：

import Todo from './Todo.js'export default {render (h) {return <Todo/> // no need to register Todo via components option} }

JSX 擴展運算符

支持 JSX 擴展，此插件將智能地合并嵌套的數據數據。例如：

const data = {class: ['b', 'c'] } const vnode = <div class="a" {...data}/> // 合并之后的 data { class: ['a', 'b', 'c'] }

Vue 指令

使用 JSX 時，幾乎不支持所有內置的 Vue 指令，唯一例外的是 v-show，可以與 v-show={show} 語法一起使用。在大多數情況下，存在明顯的，例如 v-if 用三元表達式，并且 v-for 是用 array.map() 表達式等。對于自定義指令，可以使用 v-name={value} 語法。但是使用此語法不支持指令參數和修飾符，有兩種解決方案:

1.將所有內容作為對象通過傳遞 value，例如 v-name={{ value, modifier: true }}

2.使用原始 vnode 指令數據格式：

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

JSX 語法使用 v-model

1.安裝依賴

npm i babel-plugin-js-v-model -D

2..babelrc 文件中添加配置

module.exports = {plugins: ['jsx-v-model'] }

?

總結

以上是生活随笔為你收集整理的Vue 中如何配置项目支持 JSX 语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。