Vue3에서 템플릿 구문 및 Vue 지침을 사용하는 방법

1 템플릿 보간 구문

• 스크립트에서 변수를 선언하면 {{변수 이름}}을 사용하여 템플릿에서 직접 사용할 수 있습니다.

• 템플릿 구문을 사용하면 조건부 연산을 작성할 수 있습니다

• 연산도 지원됩니다

• 작업 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은 풍부한 내용을 표시하는 데 사용됩니다. text

• 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 양방향 바인딩

• 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-모델 케이스:

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!