vue3+ts的基础使用
ref
属性类型确定时有以下四种方式限制类型:
<script lang="ts" setup>
import { ref, Ref } from 'vue'
// 属性接口
interface book {
name: string
price: number
}
const name: Ref<string> = ref('张三');
const age = ref<number>(20);
const sex = ref('男') as Ref<string>;
const book = ref<book>({
name: '假如生活欺骗了我',
price: 110
})
</script>
渲染:
<p>我叫{
{ name }},年龄{
{ age }},性别是{
{sex}}</p>
<p>我有一本书叫《{
{ book.name }}》,价格是{
{ book.price }}</p>
属性类型不确定时:
<script lang="ts" setup>
import { ref, Ref } from 'vue'
/**
* sex(性别)类型不确定,可以用字符串(男,女)表示,也可以用数字(0,1)表示
* 用泛型,T来代替这个类型,传什么类型,就是什么类型
* */
interface people<T> {
name: string
sex: T
}
const person = ref({
name: '小花',
sex: '女'
}) as Ref<people<string>>
<script>
渲染:
<p>有个人叫{
{ person.name }},性别是{
{ person.sex }}</p>
reactive
属性确定时有一下三种方式限制属性类型:可根据需要把接口的地方换成基本类型
<script lang="ts" setup>
import { reactive } from 'vue'
interface person {
name: string
age: number
sex: string
}
const father: person = reactive({
name: '张三',
age: 30,
sex: '男'
})
const son = reactive<person>({
name: '小张',
age: 23,
sex: '男'
})
const grandson = reactive({
name: '小小张',
age: 1,
sex: '男'
})
<script>
渲染:
<p>我粑粑叫{
{ father.name }},年龄是{
{ father.age }},性别是{
{ father.sex }}</p>
<p>我儿子叫{
{ son.name }},年龄是{
{ son.age }},性别是{
{ son.sex }}</p>
<p>我孙子叫{
{ grandson.name }},年龄是{
{ grandson.age }},性别是{
{ grandson.sex }}</p>
属性不确定时:同ref,将接口的地方改成泛型就可以了
<script lang="ts" setup>
import { reactive } from 'vue'
interface human<T> {
name: string,
age: number,
sex: T
}
const stranger = reactive<human<string>>({
name: '李四',
age: 20,
sex: '男'
})
<script>
渲染:
<p>有个陌生人叫{
{ stranger.name }},年龄是{
{ stranger.age }},性别是{
{ stranger.sex }}</p>
computed
计算属性
<script lang="ts" setup>
import { computed,ComputedRef } from 'vue'
const count: Ref<number> = ref(10);
// 在js中拿取ref属性的值需要(属性.value),在template中不用
const doubleCount: ComputedRef<number> = computed((): number => count.value * 2)
const trebleCount = computed((): number => count.value * 3) as ComputedRef<number>
const fourfoldCount = computed<number>((): number => count.value * 4)
const fivefold = computed({
get: () => count.value * 5,
set: (val: number) => {
count.value = val;
},
});
fivefold.value = 20;
<script>
defineProps
一般情况:
<script lang="ts" setup>
import { defineProps } from 'vue'
const props = defineProps({
temp: String,
books: {
type: Array as () => Array<string>,
required: true,
default: () => ([])
},
good: {
type: Object as () => { name: string, price: number },
required: true,
default: () => ({})
}
})
<script>
没有默认值时:
<script lang="ts" setup>
import { defineProps } from 'vue'
interface myProps {
msg: string,
list: Array<string>,
add(): void
}
// 没有默认值
const props1 = defineProps<myProps>();
<script>
有默认值时:widthDefaults
<script lang="ts" setup>
import { defineProps,widthDefaults } from 'vue'
interface myProps {
msg: string,
list: Array<string>,
add(): void
}
// 有默认值
const props2 = withDefaults(defineProps<myProps>(), {
msg: '默认值',
list: () => (['张三', '李四', '王麻子']),
add: () => { }
})
<script>
defineEmits
<script lang="ts" setup>
import { defineEmits } from 'vue'
interface Emits {
(event: 'getMsg', name: string): void
}
const emit = defineEmits<Emits>();
const transmit = (): void => {
emit('getMsg', '我叫小花');
}
<script>
defineExpose
父组件:
<Son ref='child'/>
<script lang="ts" setup>
import Son from "./Son.vue";
import { ref } from "vue";
const child = ref<any>();
const getMsg = (): void => {
console.log("获取子组件expose的数据", child.value);
};
</script>
子组件:
<script lang="ts" setup>
import { ref,defineExpose } from "vue";
const msg = ref('11')
defineExpose({ msg });
</script>
方法
Vue3.0 取消了 methods 属性,所有组件的方法,都直接写
<template>
{
{number}}<button @click='increment(number)'>+1</button>
<template>
<script lang="ts" setup>
import { ref } from 'vue'
const number = ref<number>(20);
/**
* @function 数量+1
* @param count
* @return {void}
*/
const increment = (count: number): void => {
number.value = ++count;
}
<script>
路由的引入
路由文件index.ts
:
import {
createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
},
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
在main.ts
中引入
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
仓库(vuex)的引入
仓库文件中index.ts
:
import {
createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
在main.ts
中引入:
import {
createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#app')