38、web前端开发之Vue3保姆教程(二)

三、Vue3语法详解

1、组件

1 什么是组件？

组件是 Vue.js 中最重要的概念之一。它是一种可复用的 Vue 实例，允许我们将 UI 拆分为独立的、可复用的部分。组件可以提高代码的组织性和可维护性。

2 创建组件

在 Vue 3 中，组件通常使用单文件组件（SFC）编写，其包含三个主要部分：

• template：定义组件的 HTML 结构
• script：编写组件的逻辑，包含数据和方法
• style：定义组件的样式

<template>
  <div>
    <h1>{
  { message }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    // 使用 ref 并添加类型注解
    const message = ref<string>('Hello Vue 3');

    // 返回响应式数据给模板
    return {
      message
    };
  }
});
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

1. export default defineComponent({ … })：
   • 这段代码定义了一个 Vue 组件并导出它。defineComponent 是 Vue 3 提供的一个函数，用于创建类型安全的 Vue 组件。
2. setup()：
   • setup 是 Composition API 的核心部分。在 Vue 3 中，setup 函数会在组件实例创建之前执行，并且在该函数中可以进行各种响应式变量和逻辑的定义。
   • 在这个函数内，可以定义组件的状态（如数据、计算属性、方法等）。
3. const url: string = “https://www.baidu.com”;：
   • 这行代码定义了一个名为 url 的常量，并将其值设为一个字符串 https://www.baidu.com。
   • : string 是 TypeScript 的类型声明，表明 url 的类型是 string。这意味着 url 必须始终是一个字符串，TypeScript 将在编译时对这个类型进行检查，以确保类型安全。
4. return { url }：
   • setup 函数返回一个对象，这个对象中的属性（在这里是 url）将成为组件的响应式属性，供模板和其他功能使用。
   • 因此，组件的模板中可以直接使用 url，并且这个值是响应式的。

使用语法糖后

<template>
  <div>
    <h1>{
  { message }}</h1>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 使用 ref 并添加类型注解
const message = ref<string>('Hello Vue 3');
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

2、常用命令

1、{ {}}文本插值

双大括号标签会被替换为相应组件实例中对应 属性的值。同时每次属性更改时它也会同步更新。

<template>
    <div>
      <p>{
  { url }}</p>
    </div>
</template>
  
  <script lang="ts">
  import { defineComponent } from 'vue';
  
  export default defineComponent({
    setup() {
      // 定义变量 url，并指定其类型为 string
      const url: string = "https://www.baidu.com";  
      return {
        url
      };
    }
  });
  </script>

使用使用语法糖简化后：

<template>
  <div>
    <p>{
  { url }}</p>
  </div>
</template>

<script setup lang="ts">
  const url: string = "https://www.baidu.com";
</script>

2、v-bind

v-bind 是用来动态绑定 HTML 特性的指令。通过使用 v-bind，你可以动态地将一个变量的值绑定到 HTML 元素的属性上。

<template>
  <div>
    <a v-bind:href="url">百度</a>
    <input type="text" v-bind:value="msg" />
  </div>
</template>

<script setup lang="ts">
    // 使用 TypeScript 显式声明变量类型
    const url: string = "https://www.baidu.com";
    const msg: string = "hello";
</script>

简化写法：

<template>
    <div>
       <a :href="url">百度</a>
       <input type="text" :value="msg"  />
    </div>
  </template>  
  <script setup lang="ts">
  const url = "https://www.baidu.com";
  const msg= "hello"
  </script>

3、v-model

• ref 是创建和管理响应式数据的工具，可以包装基本数据类型或对象，使其具有响应性，这意味着当数据发生变化时，与之相关的任何地方（如模板，计算属性之类）都会接收到这种变化。
• v-model 则是一个专门用于处理输入和表单元素的双向数据绑定的语法糖。可以赋值和读取值，更高级的用法是在自定义组件上使用，用于处理父子组件间的双向数据绑定。

一般来说，v-model 会绑定 ref 的值，实现数据的双向响应。

Js版本

<template>
  <div>
    <p>{
  { message }}</p>
    <input type="text" v-model="message"/>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const message = ref('Hello Vue3');
</script>

Ts版本

<template>
  <div>
    <p>{
  { message }}</p>
    <input type="text" v-model="message"/>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const message = ref<string>('Hello Vue3');
</script>

4、v-on

v-on 是用来绑定事件监听器的指令
格式：v-on:事件名 = “方法名”
​ 简写方式： @事件名 = “方法名”

事件名：

click：点击事件
input：输入事件
keyup：键盘按键松开事件
keydown：键盘按键按下事件
mouseover：鼠标移入事件
mouseout：鼠标移出事件
submit：表单提交事件
change：表单元素值改变事件
除了上述列举的事件之外，实际上 v-on 可以监听任何 DOM 事件。如果你想监听特定的事件，只需在 v-on 后面加上相应的事件名即可。

修饰符：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 在捕获模式添加事件监听器。
.self - 只有事件从元素本身发出才触发处理函数。
.{keyAlias} - 只在某些按键下触发处理函数。
.once - 最多触发一次处理函数。
.left - 只在鼠标左键事件触发处理函数。
.right - 只在鼠标右键事件触发处理函数。
.middle - 只在鼠标中键事件触发处理函数。
.passive - 通过 { passive: true } 附加一个 DOM 事件。

案例1：

<template>
    <div>
      <input type="button" value="-" v-on:click="sub" />
      <input type="text" v-model="num" />
      <input type="button" value="+" @click="plus" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  // 使用 TypeScript 显式指定 num 的类型
  const num = ref<number>(0);
  
  function sub() {
    if (num.value > 0) {
      num.value--;
    }
  }
  
  function plus() {
    num.value++;
  }
  </script>

案例2：

<template>    
    <div>     
        <div>输入分数，按回车，显示等级</div>   
        <div>等级: {
  { level }}</div>        
        <input type="text" @keyup.enter="show" v-model="score" />        
    </div>
</template>

<script setup lang="ts">
   import { ref } from 'vue';
   // 使用类型定义
   const level = ref<string>('');  // level 是 string 类型
   const score = ref<number | string>(0);  // 允许输入时是 number 或 string

   function show(): void {
       const numScore = Number(score.value);  // 将输入转为数字进行判断
       if (!isNaN(numScore)) {  // 检查输入是否为有效数字
           if (numScore >= 0 && numScore <= 60)
               level.value = "D";
           else if (numScore > 60 && numScore <= 70)
               level.value = "C";
           else if (numScore > 70 && numScore <= 80)
               level.value = "B";
           else
               level.value = "A";
       } else {
           level.value = "无效输入";  // 如果输入不是数字，提示错误信息
       }
   }
</script>

5、v-if v-else v-else-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

v-else 表示 v-if 添加一个“else 区块”。

v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用。

<template>
    <div id="app">
      <input type="text" v-model="stockInput" />
      <p v-if="stock > 5">库存为{
  { stock }}</p>
      <p v-else-if="0 < stock && stock <= 5">库存紧张</p>
      <p v-else>库存不足</p>
    </div>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';

  // 用于存储用户输入
  const stockInput = ref<string>('0');

  // 将用户输入的字符串转换为数字进行判断
  const stock = computed<number>(() => {
    const num = parseInt(stockInput.value, 10);
    return isNaN(num) ? 0 : num;  // 如果转换失败即非数字输入，则返回 0
  });
</script>

<template>
    <div id="app">
      <template v-if="flag">
        <h1 style="color:green">上架</h1>
      </template>
      <template v-else>
        <h1 style="color:red">下架</h1>
      </template>
      <button @click="changeFlag">修改</button>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from "vue";
  
  // flag 定义为 boolean 类型
  const flag = ref<boolean>(true);
  
  // 定义 changeFlag 函数，切换 flag 的值
  function changeFlag() {
    flag.value = !flag.value;
  }
  </script>

6、v-show

可以用来按条件显示一个元素的指令是 v-show。

<template>
    <div id="app">
      <p v-show="isShow">我会隐身</p>
      <button @click="isShow = !isShow">点击显示隐藏</button>
    </div>
  </template>     
  
  <script setup lang="ts">
  import { ref } from "vue";
  
  // isShow 定义为 boolean 类型
  const isShow = ref<boolean>(true);
  </script>

7、v-for

案例1：

<template>
    <div id="app">
      <di