糖衣構文とは何ですか? Vue3.2でシンタックスシュガーを使用するにはどうすればよいですか?-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

糖衣構文とは何ですか? Vue3.2でシンタックスシュガーを使用するにはどうすればよいですか?

青灯夜游

Nov 28, 2022 pm 08:11 PM

vue.jsシュガー構文

Vue で構文シュガーを使用するにはどうすればよいですか?次の記事では、シンタックスシュガーについて説明し、Vue3.2 シンタックスシュガーの使用方法を紹介します。

糖衣構文とは何ですか? Vue3.2でシンタックスシュガーを使用するにはどうすればよいですか?

1. 概要

Vue2 期間では、さまざまな変数、メソッド、および Computed 属性、などは、それぞれ data、methods、computed、その他のオプションに格納されます。このように書かれたコードは、後で参照するのに便利ではありません。論理的には、オプション間を行き来する必要があります。 vue3.0Combined APIsetup 関数は、この問題を解決するために開始されました。これにより、論理的な焦点がより集中し、構文がより合理化されますが、vue3 の構文を使用すると、 .0 は、コンポーネントを構築するときに、外部で定義されたメソッド変数を <template></template> で使用する前に常に返す必要があり、少し面倒です。 . 2 糖衣構文といくつかの新しい API の登場により、コードがさらに簡素化されました。 [学習ビデオ共有: vue ビデオチュートリアル、Web フロントエンドビデオ ]

構文糖衣とは何ですか?

シンタクティックシュガー (英語: Syntactic Sugar) は、イギリスのコンピュータ科学者 ピーターランディングによって発明された用語で、ある特定のことを指します。言語の機能には影響を与えませんが、プログラマにとってはより便利な構文が追加されました。構文シュガーを使用すると、プログラムがより簡潔になり、読みやすくなります。

Vue3.2`構文シュガー`

vue3.0 とvue3.2

vue3.0 コンポーネント

<template>
    <div>
    </div>
</template>
<script>
export default {
    components: {
    },
    props: {
    },
    setup () {
        return {}
    }
}
</script>
<style scoped>
</style>

コンポーネント

<template>
    <MyTestVue :title="title" @click="changeTitle" />
</template>
<script setup>
import MyTestVue from &#39;./MyTest.vue&#39;;
import { ref } from &#39;vue&#39;;
const title = ref(&#39;测试一下&#39;)
const changeTitle = () => {
    title.value = &#39;Hello,World&#39;
}
</script>
<style scoped>
</style>

vue3.0
と vue3.2 コンポーネントテンプレートのバージョンの主な変更点は、setup 関数が 3.2 ではなくなり、script タグに配置されたことです。
これらは直感的な変更です。次に、具体的な使用方法を学びましょう。

#1. コンポーネントの登録

vue3.0

でコンポーネントを使用する場合は、コンポーネントオプションを使用して明示的に登録する必要があります。

<script>
import ComponentA from &#39;./ComponentA.js&#39;

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}
</script>

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。