vue3 での jsx/tsx のエレガントな使用法について話しましょう-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

vue3 での jsx/tsx のエレガントな使用法について話しましょう

青灯夜游

Oct 08, 2022 pm 06:07 PM

vuevue.jsvue3

vue で jsx/tsx をエレガントに使用するにはどうすればよいですか?次の記事では、vue3 での jsx/tsx のエレガントな使い方を紹介します。

vue3 での jsx/tsx のエレガントな使用法について話しましょう

react パートナーは全員 jsx/tsx に精通していると思いますが、現在は vue3## を使用しています。 #jsx/tsx 構文を使用することもできます。 [関連する推奨事項: vuejs ビデオチュートリアル ]

プラグインをインストールします (@vitejs/plugin-vue-jsx)

vite公式は、vue3 での jsx/tsx の使用をサポートする公式プラグインを提供しています。直接インストールするだけです。

yarn add @vitejs/plugin-vue-jsx -D

インストール後、

vite.config.ts

import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vueJsx(),
  ]
})

にコードを挿入します。設定後は、プロジェクト

jsx/tsx##で使用できます。 # La

1. 補間

jsx/tsx の補間は、vue テンプレート構文の補間と同じであり、次のような有効な Javascript 式をサポートします。 ##a b

a || 5...jsx/tsx では二重中括弧 {{}}

が

{}

// vue3模板语法
<span>{{ a + b }}</span>

// jsx/tsx
<span>{ a + b }</span>

2. クラスとスタイルのバインド

クラスのクラス名をバインドするには、テンプレートを使用する 2 つの方法があります。文字列または配列を使用します。

テンプレート文字列を使用して 2 つのクラス名をスペースで区切ります

// 模板字符串
<div>header</div>
//数组
<div>header</div>

スタイルバインディングでは二重中括弧を使用する必要があります

const color = 'red'
const element = <sapn>style</sapn>

3。条件付きレンダリング

v-show

v-if命令はありません if/else
<pre class="brush:php;toolbar:false"> setup() { const isShow = false const element = () => { if (isShow) { return <span>我是if</span> } else { return <span>我是else</span> } } return () => ( <div> <span>我是v-show</span> { element() } { isShow ? <p>我是三目1</p> : <p>我是三目2</p> } <div> ) }4 を実現できます。リストのレンダリング<h2 data-id="heading-4"> <strong>同様に、jsx/ Thereは tsx の </strong>v-for</h2> 命令ではありません。リストを表示するには、Js の配列メソッド <p>map<code> を使用するだけです。</code></p> <pre class="brush:php;toolbar:false">setup() { const listData = [ {name: 'Tom', age: 18}, {name: 'Jim', age: 20}, {name: 'Lucy', age: 16} ] return () => ( <div> <div> <span>姓名</span> <span>年龄</span> </div> { prop.listData.map(item => { return <div> <span>{item.name}</span> <span>{item.age}</span> </div> }) } </div> ) }</pre> <code>5。イベント処理
バインディングイベントでも単一の中括弧
- が使用されますが、イベントバインディングにはプレフィックス
  @ が付きません。代わりに、on に変更されました。例: クリックイベントは onClick
  イベント修飾子を使用する必要がある場合は、次のものが必要です。
- メソッドを使用するには、
  withModifiers メソッドは 2 つのパラメーターを受け取ります。最初のパラメーターはバインドされたイベント、2 番目のパラメーターは使用する必要があるイベントです。 Modifier
```
setup() {
    const clickBox = val => {
        console.log(val)
    }
    return () => (
        <div> clickBox('box1')}>
            <span>我是box1</span>
            <div> clickBox('box2')}>
                <span>我是box2</span>
                <div> clickBox('box3'), ['stop'])}>我是box3</div>
            </div>
        </div>
    )
}
```
jsx/tsx は v-model 構文をサポートします
```
// 正常写法
<input> // vue
<input> // jsx

// 指定绑定值写法
<input> // vue
<input> // jsx

// 修饰符写法
<input> // vue
<input> // jsx
```
7、スロット Slot

スロットを定義します

jsx/tsx には slot
タグがありません。
を使用する必要があります。スロットを定義します。{}または、renderSlot 関数を使用します。setup 関数は、デフォルトで 2 つのパラメータ 1. props 2. スロット、attrs、emit などを含む ctx コンテキストを受け取ります。
```
import { renderSlot } from "vue"
export default defineComponent({
    // 从ctx中解构出来 slots
    setup(props, { slots }) {
        return () => (
            <div>
                { renderSlot(slots, 'default') }
                { slots.title?.() }
            </div>
        )
    }
})
```
スロットを使用する

v-slots
```
import Vslot from './slotTem'
export default defineComponent({
    setup() {
        return () => (
            <div>
                <vslot> {
                        return <p>我是title插槽</p>
                    },
                    default: () => {
                        return <p>我是default插槽</p>
                    }
                }} />
            </vslot>
</div>
        )
    }
})
```
8 を通じてスロットを使用できます。実装するには tsx を使用します。 recursiveComponents-menu
主な機能は、ルーティング情報に基づいてメニューを自動的に生成することです。
効果は次のとおりです。

#コードは次のとおりです。権限などを制御する必要がある場合は、ルーティング情報の
metaに該当するパラメータを追加し、
で##
```
// index.tsx

import { routes } from '@/router/index'
import MenuItem from './menuItem'
import './index.scss'

export default defineComponent({
    setup() {
        const isShowRoutes = computed(() => {
            return routes
        })
        const currentPath = computed(() => {
            return useRoute().path
        })

        return () => (
            <el-scrollbar>
                <el-menu>
                    {
                        isShowRoutes.value.map((route) => {
                            return <menuitem></menuitem>
                        })
                    }
                </el-menu>
            </el-scrollbar>
        )
    }
})
```
rrree
を自分で制御します。 menuItem (学習ビデオ共有: Web フロントエンド開発、基本プログラミングビデオ
)

以上がvue3 での jsx/tsx のエレガントな使用法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

分享两个可以绘制 Flowable 流程图的Vue前端库Sep 07, 2022 pm 07:59 PM

前端有没有现成的库，可以直接用来绘制 Flowable 流程图的？下面本篇文章就跟小伙伴们介绍一下这两个可以绘制 Flowable 流程图的前端库。

vue是前端css框架吗Aug 26, 2022 pm 07:37 PM

vue不是前端css框架，而是前端JavaScript框架。Vue是一套用于构建用户界面的渐进式JS框架，是基于MVVM设计模式的前端框架，且专注于View层。Vue.js的优点：1、体积小；2、基于虚拟DOM，有更高的运行效率；3、双向数据绑定，让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；4、生态丰富、学习成本低。