どのようにVueの中でJSXを書きます

15764 ワード

概要Vueの完全なtemplateプログラミング能力は、JavaScriptの代わりにrender関数によって得ることができる.Vue公式サイト上のアンカータイトルの例は、render関数がいくつかのシーンでコードを効率的に簡略化できることを示している.createElement関数でrender関数を記述することができますが、createElementの書き方は煩雑すぎて、論理が少し複雑になるとコードが山積みになり、読みにくくなります.公式ドキュメントでは、Babelプラグインを使用して、render関数でJSX構文を使用して、コードをテンプレート構文に近づけることができます.Babel変換プラグインの公式ドキュメントでは、JSXの構文について説明しています.ここでは、 VueにJSXを書く方法について、例に関連して説明します.
demoプロジェクトの作成Vue CLIでdemoプロジェクトを迅速に作成

vue create learn-vue-jsx

デフォルトの@vue/babel-preset-appには、JSX構文を変換するプラグインが含まれています.

@babel/plugin-syntax-jsx
babel-helper-vue-jsx-merge-props
babel-plugin-transform-vue-jsx

element-uiライブラリを導入し、サードパーティライブラリの使用に関するJSXの使用法について説明する

vue add element

JSXを書く
最も簡単な例から、templateバージョンとrender関数バージョンのHello Worldtemplateバージョン



<span class="hljs-built_in">export</span> default {
  <span class="hljs-function"><span class="hljs-title">data</span></span>() {
    <span class="hljs-built_in">return</span> {
      msg: <span class="hljs-string">'Hello World'</span>
    }
  },
  methods: {
    <span class="hljs-function"><span class="hljs-title">onClick</span></span>() {
      alert(<span class="hljs-string">'Hello World'</span>);
    }
  }
}

render関数バージョン


<span class="hljs-built_in">export</span> default {
  <span class="hljs-function"><span class="hljs-title">data</span></span>() {
    <span class="hljs-built_in">return</span> {
      msg: <span class="hljs-string">'Hello World'</span>
    }
  },
  methods: {
    <span class="hljs-function"><span class="hljs-title">onClick</span></span>() {
      alert(<span class="hljs-string">'Hello World'</span>);
    }
  },
  <span class="hljs-function"><span class="hljs-title">render</span></span>() {
    <span class="hljs-built_in">return</span> (
      <p 
        id=<span class="hljs-string">"helloWorld"</span>
        class={{<span class="hljs-string">'hello-world'</span>: <span class="hljs-literal">true</span>}}
        style={{<span class="hljs-string">'color'</span>: <span class="hljs-string">'red'</span>}}
        onClick={this.onClick}>
        {this.msg}
      </p>
    );
  }
}

サードパーティ製ライブラリの使用

element-uiのel-button組立体

を用いる.
templateバージョン

"medium"
  type="primary"
  round
  loading>

render関数バージョン

render() {
  return (
    type="primary"
      size="medium"
      round
      loading>
        
    
  );
}

グローバルにロードされているためelement-uiライブラリなので、JSXで認識可能el-buttonコンポーネント.自分で作成したコントロールの場合は、componentsにこのコントロールを導入するか、babel-plugin-transform-vue-jsxドキュメントで紹介されている、直接render関数でimportが入ってくるコントロールを使用します.ここで使用するコントロールに注意してください.
頭文字は
大文字で、プラグインが認識されます.

import MyButton from './MyButton';
export default {
  render() {
    return (
        
    );
  }
};

element-uiのel-input組立体

を用いる.
templateバージョン


  "input"
    placeholder="     ">
  
  {{input}}

render関数バージョン

methods: {
  onInput(value) {
    this.input = value;
  }
},
render() {
  return (
    
      "     "
        onInput={this.onInput}>
      
      {this.input}
    
  );
}

ほとんどのVueの内蔵命令はJSXではサポートされていないので、他の方法で実現する必要があります.v-model命令のように、実はvalue属性とinputイベントの構文糖である.v-if命令はif文を使用して実装することができ、v-for命令はarray.map文を使用して実装することができる.比較例外は、v-show命令がJSXで使用できることである.具体例は以下の通りです.
templateバージョン


  v-if  
  "isIf">v-if    
  v-for  
  "item in list">{{item}}
  v-show  
  "isShow">v-show

render関数バージョン

render() {
  return (
    
      v-if  
      {
        this.isIf ? v-if    
 : ''
      }
      v-for  
      
      {
        this.list.map((item) => {
          return item
        })
      }
      
      v-show  
      "isShow">v-show    
    
  );
}

element-uiのel-loading組立体

を用いる.JSXでカスタム命令伝達argumentとmodifiersの書き方は煩雑であり、el-loadingグループ価格の命令方式を例に挙げる.
templateバージョン

type="primary"
  @click="openFullScreen"
  v-loading.fullscreen.lock="fullscreenLoading">
    Loading

render関数バージョン

render() {
  const directives = [
    { 
      name: 'loading',
      value: this.fullscreenLoading,
      modifiers: { fullscreen: true, lock: true } 
    }
  ];
  return (
    type="primary"
      onClick={this.openFullScreen}
      {...{ directives}}>
        Loading
    
  );
}

babel-plugin-transform-vue-jsx公式文書では、Vue命令を書く別の方法も紹介されていますが、v-loading={this.fullscreenLoading}という書き方だけが有効であり、argumentやmodifiersなどのパラメータを設定することはできません.

element-uiのel-table組立体

を用いる.el-tableコンポーネントは、カスタムスロットを使用して、ヘッダーとカスタム列テンプレートをカスタマイズする機能を提供します.具体例は以下の通りです.
templateバージョン




<span class="hljs-built_in">export</span> default {
  <span class="hljs-function"><span class="hljs-title">data</span></span>() {
    <span class="hljs-built_in">return</span> {
      tableData: [
        {
          date: <span class="hljs-string">'2016-05-02'</span>,
          name: <span class="hljs-string">'   '</span>,
          address: <span class="hljs-string">'           1518  '</span>
        },
        {
          date: <span class="hljs-string">'2016-05-04'</span>,
          name: <span class="hljs-string">'   '</span>,
          address: <span class="hljs-string">'           1517  '</span>
        },
        {
          date: <span class="hljs-string">'2016-05-01'</span>,
          name: <span class="hljs-string">'   '</span>,
          address: <span class="hljs-string">'           1519  '</span>
        },
        {
          date: <span class="hljs-string">'2016-05-03'</span>,
          name: <span class="hljs-string">'   '</span>,
          address: <span class="hljs-string">'           1516  '</span>
        }
      ],
      search: <span class="hljs-string">""</span>
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};

render関数バージョン


<span class="hljs-built_in">export</span> default {
  <span class="hljs-function"><span class="hljs-title">data</span></span>() {
    <span class="hljs-built_in">return</span> {
      tableData: [
        {
          date: <span class="hljs-string">'2016-05-02'</span>,
          name: <span class="hljs-string">'   '</span>,
          address: <span class="hljs-string">'           1518  '</span>
        },
        {
          date: <span class="hljs-string">'2016-05-04'</span>,
          name: <span class="hljs-string">'   '</span>,
          address: <span class="hljs-string">'           1517  '</span>
        },
        {
          date: <span class="hljs-string">'2016-05-01'</span>,
          name: <span class="hljs-string">'   '</span>,
          address: <span class="hljs-string">'           1519  '</span>
        },
        {
          date: <span class="hljs-string">'2016-05-03'</span>,
          name: <span class="hljs-string">'   '</span>,
          address: <span class="hljs-string">'           1516  '</span>
        }
      ],
      search: <span class="hljs-string">''</span>
    };
  },
  methods: {
    updateSearch(value) {
      this.search = value;
    },
    handleEdit(index, row) {
      <span class="hljs-built_in">return</span> () => {
        console.log(index, row);
      };
    },
    handleDelete(index, row) {
      <span class="hljs-built_in">return</span> () => {
        console.log(index, row);
      };
    }
  },
  <span class="hljs-function"><span class="hljs-title">render</span></span>() {
    <span class="hljs-built_in">let</span> that = this;
    <span class="hljs-built_in">return</span> (
      <el-table data={this.tableData} style={{ width: <span class="hljs-string">'100%'</span> }}>
        <el-table-column label=<span class="hljs-string">"  "</span> prop=<span class="hljs-string">"date"</span>></el-table-column>
        <el-table-column label=<span class="hljs-string">"  "</span> prop=<span class="hljs-string">"name"</span>></el-table-column>
        <el-table-column {...{
          scopedSlots: {
            header: scope => {
              <span class="hljs-built_in">return</span> (
                <el-input size=<span class="hljs-string">"mini"</span> placeholder=<span class="hljs-string">"       "</span> value={that.search} onInput={that.updateSearch}/>
              );
            },
            default: scope => {
              <span class="hljs-built_in">return</span> [
                <el-button size=<span class="hljs-string">"mini"</span> onClick={that.handleEdit(scope.<span class="hljs-variable">$index</span>, scope.row)}>  </el-button>,
                <el-button size=<span class="hljs-string">"mini"</span> <span class="hljs-built_in">type</span>=<span class="hljs-string">"danger"</span> onClick={that.handleDelete(scope.<span class="hljs-variable">$index</span>, scope.row)}>  </el-button>
              ];
            }
          }
        }}>
        </el-table-column>
      </el-table>
    );
  }
};

この例は複雑で,主にv-model命令,役割ドメインスロット,イベントインライン処理などに関する.v-model命令は、value属性を設定し、inputイベントを傍受することによって実現される.役割ドメインスロットのJSXの書き方は、公式サイトレンダリング関数&JSXのスロット章を参照して理解できます.イベントインターコネクト処理に関するJSXの書き方は、templateテンプレートに従ってイベントインターコネクト処理、すなわちこのようなフォーマットonClick={that.handleEdit(scope.$index, scope.row)}を記述すると、最初のレンダリング時にイベントコールバック方法がトリガーされ、clickコールバックイベントに指定されたエラーがないことがわかります.コンソールの出力結果は、イベントコールバックメソッドを簡単に書き換えることで、イベント処理のプロセスを匿名関数に入れて返すことで、イベントインライン処理の効果を実現できます.
転載先:https://juejin.im/post/5bf6ea4df265da611c269ee0

0812_非リレーショナル・データベースMongodb&expressフレームワーク

vueパッケージ後のdistページの空白