vue3+ts的基本使用--实战

vue3+ts的安装在上一篇

1. 安装引入ui组件库and

// 安装
npm i --save ant-design-vue

// 在main.js引入
import  And  from 'ant-design-vue';
app.use(And)

经过以上操作我们就全局引入了and

2.新建页面并使用组件库和方法定义

在router下的index.js文件新增一个路由，在view文件下新增一个文件

AboutViewDetail.vue

<template>
  <div>{{queryParams.name}}
    <a-button type="primary" @click="submit">Primary Button</a-button>
  </div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { reactive} from 'vue'
const queryParams = reactive({
    name: '一个按钮'
})

const submit = ()=>{
    message.success('成功提示')
}
</script>

<style>

</style>

页面效果

点击按钮

3.计算属性

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

4.class与样式绑定

我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：

<div :class="{ active: isActive }"></div>

绑定的对象并不一定需要写成内联字面量的形式，也可以直接绑定一个对象：

const classObject = reactive({
  active: true,
  'text-danger': false
})

<div :class="classObject"></div>

渲染的结果会是：
<div class="active"></div>

我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

<div :class="classObject"></div>

我们可以给 :class 绑定一个数组来渲染多个 CSS class：

const activeClass = ref('active')
const errorClass = ref('text-danger')
<div :class="[activeClass, errorClass]"></div>

渲染的结果会是：
<div class="active text-danger"></div>

5.watch监听器

一个简单的监听

<script setup>
import { ref, watch } from 'vue'

const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')
const loading = ref(false)

// 可以直接侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    loading.value = true
    answer.value = 'Thinking...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Error! Could not reach the API. ' + error
    } finally {
      loading.value = false
    }
  }
})
</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" :disabled="loading" />
  </p>
  <p>{{ answer }}</p>
</template>

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

即时回调的侦听器

watch(
  source,
  (newValue, oldValue) => {
    // 立即执行，且当 `source` 改变时再次执行
  },
  { immediate: true }
)

一次性侦听器

watch(
  source,
  (newValue, oldValue) => {
    // 当 `source` 变化时，仅触发一次
  },
  { once: true }
)

6.接受组件传参

在使用 script setup 的单文件组件中，props 可以使用 defineProps() 宏来声明：

第一种
const props = defineProps(['foo'])
第二种
props: ['foo'],

还可以使用对象的形式：

// 使用 <script setup>
defineProps({
  title: String,
  likes: Number
})

也可以使用类型标注来声明 props：

<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>