第三章：VUE3(三)----基本指令介绍

为了方便讲解我将代码分为两部分，一部分为html代码，另一部分为ts代码，下面代码复制即可使用，每个指令的使用和作用我以注释的方式给出。

<template>
  <!-- 插值表达式，{{ Script中变量的名 }} -->
  <h1>{{ a }}</h1>
  <!-- v-text指令，{{ v-text=变量的名 }} -->
  <div v-text="a"></div>
  <!-- v-html指令可以解析HTML代码 -->
  <div v-html='html'></div>
  <!-- v-if用来做条件判断 -->
  <div v-if="a">
    {{ a }}
  </div>
  <!-- v-else用来做条件判断和v-if配合使用 -->
  <div v-else>
    {{ b }}
  </div>
  <!-- v-show和v-if功能类似 -->
  <div v-show="a">
    {{ a }}
  </div>
  <!-- v-on:click 触发事件，可以简写成@+事件名称 -->
  <div @click="parent">
    <!-- 阻止冒泡 v-on:click.stop    stop时用来修饰阻止冒泡 -->
    <button v-on:click.stop="login">click  me</button>
  </div>

  <button @click="login">click  me</button>
  <!-- v-bind指令用于响应更新HTML特性，将一个或多个attribute，或者一个组件prop动态绑定到表达式。v-bind可以简写为： -->
  <div v-bind:id="idname">id_name</div>
  <div :id="idname">id_name</div>
  <div>
    <!-- v-model 双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。 -->
    <input v-model="ca" type="text" />
    {{ ca }}
  </div>
  <!-- v-for 用于遍历数组 -->
  <div v-for="(item,index) in hobby" :key="item">
    <h3>{{ index }}-{{ item }}</h3>
  </div>
<!-- ref -->
<div>
  <input v-model="testname" type="text" />
</div>
<button @click="changename">{{ testname }}</button>
</template>

<script setup lang="ts">
import { ref, isRef } from 'vue'
  const a = 1;
  const b = 0;
  const ca = ref('2');
  const html = "<div style='color:red;'>123456</div>";
  const hobby:number[] = [1,2,3]
  const person = {
    name: 'alisy',
    age: 20,
    grade: 'high'
    }
  const login = () => {
    alert('click me !')
  }
  const parent = () => {
    alert('parent !')
  }
  const idname = 'first'

  const testname = ref("hsh")
  const changename = () => {
    testname.value = "456"
  }
</script>