vue3 + ts <script setup>语法糖

这里是引用

1.data
2.computed
3.父传子
4.子传父
5.原型链绑定和组件使用
6.父子组件 v-model
7.nextTick
8.插槽
9.路由useRoute和useRouter
10.路由守卫
11.生命周期
12.父组件调子组件的方法 ref
13.store
14.watch

1.data

<template>
  <h1>{{ name }}</h1>
  <h1>{{ state.age }}</h1>
  <h1>{{ sex }}</h1>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue'
  // ref声明响应式数据,用于声明基本数据类型
  //const name = ref('东东吖')
    const name =ref<string>("")
  // 修改
  name.value = '小鲁班'

  // reactive声明响应式数据,用于声明引用数据类型
  const state = reactive({
    age: 24,
    sex: '男'
  })
  // 修改
  state.age = 24
  
  // 使用toRefs解构  template可直接使用{{name}}、{{sex}}
  const {age, sex} = toRefs(state)
  
</script>

2.computed

<template>
  <h1>{{ count }}</h1>
  <h1>{{doubleCount}}</h1>
</template>

<script setup lang="ts">
import { ref,computed } from 'vue'
 // ref声明响应式数据,用于声明基本数据类型
  const count = ref(1)
  //computed获取双倍count' 
  const doubleCount =computed(()=>{
    return count.value*2
  })
</script>

3.父传子

父组件

<script setup lang="ts">
// 引入子组件(组件自动注册)
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld msg="东东吖" />
</template>

<style>

</style>

子组件

<template>
{{props.msg}}
<!-- 可省略props 
  <h1>{{ msg }}</h1>
</template>

<script setup lang="ts">
// import { defineProps } from 'vue'
// defineProps在
                    
                    

你可能感兴趣的:(typeScript,vue.js,javascript,前端)