【JeecgBoot-Vue3】第3节 Vue3开发必备知识

目录

一、 vue3新特性

1. VUE3中文文档

2. setup的用法

3. 响应式API

3.1 ref()

4. script setup的用法（推荐）

4.1 改造

4.2 适用场景

4.3 示例

5. 新版v-model的用法

二、TypeScript 基础

1. 添加 lang="ts"

2. 自定义类型

3. 类型申明

4. 代码

---

一、 vue3新特性

1. VUE3中文文档

2. setup的用法

     

3. 响应式API

3.1 ref()

        接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

• 需要引入

                import {reactive, ref} from "vue";

• 说明

        ref : 将常用数据类型转换成响应式对象

        reactive：将自定义对象转换成响应式对象

• 示例

<template>
  <div>
    {{ msg }}
    <div></div>
    <a-input v-model:value="msg"></a-input>
    {{ count }}
    <a-button @click="onClick"> count+1</a-button>
    <br>
    a:{{ obj.a }}
    <br>
    b:{{ obj.b }}

  </div>
</template>

<script>

import {reactive, ref} from "vue";

export default {
  name: 'TestVue3',
  setup() {
    let msg = ref('hello world')
    const count = ref(1)
    const obj = reactive(
      {a: 1, b: 2})

    function onClick() {
      count.value++
      // alert(count.value)
      obj.a++
      obj.b = obj.b + 2
    }

    return {
      msg,
      count,
      obj,
      onClick
    }
  },
}
</script>

4. script setup的用法（推荐）

4.1 改造

只需要<script setup>加上setup后，以下三个方法都可以去掉

• export default{}
• setup() {}
• return {}

<script setup>

import {reactive, ref} from "vue";

let msg = ref('hello world')
const count = ref(1)
const obj = reactive(
  {a: 1, b: 2})

function onClick() {
  count.value++
  // alert(count.value)
  obj.a++
  obj.b = obj.b + 2
}

4.2 适用场景

• <script setup>  适用于编写业务逻辑
• <script >           适用于定义一些中间变量
• <script setup> 和 <script >   可以共存

4.3 示例

• 输入框中输入的内容  -- 双向绑定到msg
• 输入框中输入的内容 -- 激发@input事件 -- 调用onInput函数 -- 将输入值赋值给obj.c
• 响应式显示 {{ obj.c }}

<template>
  <div>
    {{ msg }}
    <div></div>
    <a-input v-model:value="msg" @input="onInput"></a-input>
    {{ count }}
    <a-button @click="onClick"> count+1</a-button>
    <br>
    a:{{ obj.a }}
    <br>
    b:{{ obj.b }}
    <br>
    c:{{ obj.c }}
  </div>
</template>

<script setup>

import {reactive, ref} from "vue";

let msg = ref('hello world')
const count = ref(1)
const obj = reactive(
  {a: 1, b: 2})

function onClick() {
  count.value++
  // alert(count.value)
  obj.a++
  obj.b = obj.b + 2
}
function onInput(e) {
  obj.c = e.target.value;
}

</script>

5. 新版v-model的用法

二、TypeScript 基础

        在vue3中使用TypeScript，自定义类型的使用

1. 添加 lang="ts"

• 如，<script setup lang="ts">，
• 如果vue中每一个<script>都需要加 lang="ts"

2. 自定义类型

• 初始化时，赋值类型不正确会报错
• 初始化时，有属性没赋值报错

写法

type objType = {
  a: number,
  b: number,
  c: string,
  d: boolean
}

3. 类型申明

ref或者reactive后添加<>即可

• ref<number>
• reactive<objType>

4. 代码

<template>
  <div>
    {{ msg }}
    <div></div>
    <a-input v-model:value="msg" @input="onInput"></a-input>
    {{ count }}
    <a-button @click="onClick"> count+1</a-button>
    <br>
    a:{{ obj.a }}
    <br>
    b:{{ obj.b }}
    <br>
    c:{{ obj.c }}
  </div>
</template>

<script setup lang="ts">

import {reactive, ref} from "vue";

type objType = {
  a: number,
  b: number,
  c: string,
  d: boolean
}
let msg = ref<string>('hello world')
const count = ref<number>(1)
const obj = reactive<objType>(
  {
    a: 1,
    b: 2,
    c: '',
    d: true
  })

function onClick() {
  count.value++
  // alert(count.value)
  obj.a++
  obj.b = obj.b + 2
}

function onInput(e) {
  obj.c = e.target.value;
}

</script>