【JeecgBoot-Vue3】第3节 Vue3开发必备知识
目录
一、 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>
