Vue3 でのテンプレート構文と Vue 命令の使用方法

1 テンプレート補間構文

• スクリプト内の変数の宣言は、{{変数名}}

• template を使用してテンプレート内で直接使用できます。この構文を使用すると、条件付き操作を記述できます

• 操作もサポートされます

• 操作 API もサポートされます

<template>
  {{ message }}
    {{ message2==0 ? &#39;我是老大&#39; : &#39;我笑的&#39; }}
    {{ message2 + 1 }}
    {{ message.split(&#39;&#39;).map(v => `4546$v`) }}
</template>

<script setup lang="ts">
const message = "我是唐少"
const message2:number = 1
</script>
<style>
</style>

2 命令

• #v- vue

#v-text で始まる命令は、テキストを表示するために使用されます
v-html はリッチ テキストの表示に使用されます
v-if は要素の表示と非表示の制御 (true と false DOM の切り替え) に使用されます
v-else-if は、v-if の「else if ブロック」を表します。チェーン内で呼び出すことができます。
v-else v-if 条件付き終了ステートメント
v-show は、表示と非表示を制御するために使用されます。要素の数 (ブロック CSS スイッチを表示しない)
v-on 省略形 @ は要素にイベントを追加するために使用されます
v-bind 省略形:要素をバインドするために使用されます 属性 Attr
v-model two-way binding
v-for は要素を走査するために使用されます
v-on 修飾子

バブル ケース:

<template>
  <div @click="parent">parent
    <div @click.stop="child">child</div>
  </div>
</template>
  
<script setup lang="ts">
const child = () => {
  console.log(&#39;child&#39;);
 // 点击后不会答应parent，因为被阻止了
}
const parent = () => {
  console.log(&#39;parent&#39;);
}
  
</script>

フォーム送信を防止するケース:

<template>
  <form action="/">
    <button @click.prevent="submit" type="submit">submit</button>
  </form>
</template>
<script setup lang="ts">
const submit = () => {
  console.log(&#39;child&#39;);
  
}
</script>
<style>
</style>

v-bind バインディング クラス ケース 1:

<template>
  <div :class="[flag ? &#39;active&#39; : &#39;other&#39;, &#39;h&#39;]">456789</div>
</template>
<script setup lang="ts">
const flag: boolean = false;// 改成true后切换不同的效果
</script>
  
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind バインディング クラス ケース 2:

<template>
  <div :class="flag">{{flag}}</div>
</template>
 // 直接绑定cls
<script setup lang="ts">
type Cls = {
  other: boolean,
  h: boolean
}
const flag: Cls = {
  other: false,
  h: true
};
</script>
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

v-bind バインディング スタイル ケース:

<template>
  <div :>绑定style</div>
</template>
<script setup lang="ts">
type Style = {
  height: string,
  color: string
}
const style: Style = {
  height: "300px",
  color: "blue"
}
</script>
<style>
</style>

v-model ケース:

<template>
  <input v-model="message" type="text" />
  <div>{{ message }}</div>
</template>
<script setup lang="ts">
import { ref } from &#39;vue&#39; // 实时监听
const message = ref("message")
</script>
  
<style>
.active {
  color: red;
}
.other {
  color: blue;
}
.h {
  height: 300px;
  border: 1px solid #ccc;
}
</style>

以上がVue3 でのテンプレート構文と Vue 命令の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。