So verwenden Sie Vorlagensyntax und Vue-Anweisungen in Vue3

1 Vorlagen-Interpolationssyntax

• Das Deklarieren einer Variablen im Skript kann mithilfe von {{Variablenname}} direkt in der Vorlage verwendet werden.

• Mit der Vorlagensyntax können Sie bedingte Operationen schreiben. Auch Operationen werden unterstützt

  Die Operations-API wird ebenfalls unterstützt

• <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 Befehle

• v- alle Vue-Befehle am Anfang

V-Text wird zum Anzeigen von Text verwendet

• V-HTML wird zum Anzeigen von Rich verwendet Text

• v-if wird verwendet, um das Anzeigen und Ausblenden von Elementen zu steuern (wahres und falsches DOM umschalten)

• v-else-if stellt den „else if-Block“ von v-if dar. Kann in einer Kette aufgerufen werden

• v-else v-if bedingte Schlussanweisung

• v-show wird verwendet, um das Anzeigen und Ausblenden von Elementen zu steuern (keine Anzeige blockiert CSS-Umschaltung)

• v-on Die Abkürzung @ wird verwendet, um ein Elementadditionsereignis anzugeben.

• V-Bind-Abkürzung: Wird zum Binden des Attributs Attr des Elements verwendet Element

• V-On-Modifikator
• Bubbling-Fall:

  <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>

  prevent Formular-Einreichungsfall:

<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-Bindungsklasse Fall 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-Bindungsklasse Fall 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 Bindungsstil:

  <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-Modell-Fall:

<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>

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vorlagensyntax und Vue-Anweisungen in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!