vue3.0+TS的语法练习

最新推荐文章于 2024-09-10 08:00:00 发布

原创最新推荐文章于 2024-09-10 08:00:00 发布 · 986 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue3.0+ts 专栏收录该内容

9 篇文章

订阅专栏

本文通过一个Vue组件实例，展示了组件间的属性传递、事件监听以及响应式系统的使用。包括`ref`、`provide/inject`、`setup`语法、函数类型定义、泛型和接口定义等。同时，讲解了Vue的生命周期方法，如`created`、`watch`，以及如何实现数据绑定和方法调用。此外，还涉及到了函数类型、元组、数组操作和类型断言等概念。

<template>
  <div class="home">
    {{age}}
    <p>{{getSum}}</p>
    <p>{{two.id}}</p>
    <input type="text" ref="inputRef">
    <button @click="add">按钮</button>
    <h3>m1: {{m1}}</h3>
    <h3>m2: {{m2}}</h3>
    <h3>m3: {{m3}}</h3>
    <h3>m4: {{m4}}</h3>
    <button @click="update">更新</button>

    <son :propA='propA' @bindSend1="bindSend1" @test='test1'/>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { Watch ,Prop} from "vue-property-decorator";
import {ref,shallowReactive, shallowRef,reactive,provide} from "vue"
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import son from '@/components/son.vue'
import { watch } from 'node_modules/vue/dist/vue';
// 地址数据接口
interface AddressResult {
  id: number;
  name: string;
  distance: string;
}
// 产品数据接口
interface ProductResult {
  id: string;
  title: string;
  price: number;
}
//函数类型
interface SearchFunc {
  (source: string, subString: string): boolean
}
@Options({
  components: {
    HelloWorld,
    son
  },
})
export default class Home extends Vue {
  public age:number=1
  public color:string='';
  public under: undefined=undefined;
  public nulls: null=null;
  public arrs: Array<number>=[1,2];
  public arr1: number[]=[1,2];
  //元组
  public arr2:[string,number,boolean]=['',1,true]
  //any 任意类型
   public arr3:any[]=['',1,true]
  public two:object={
    id:'000',
    age:''
  }
  public propA='1000'
  update(){
      this.color = 'blue'
  }
  test1(x:string){
    console.log(99,x);
  }
  setup(){
    const m1 = reactive({a: 1, b: {c: 2}})
    console.log(19);
    const m2 = shallowReactive({a: 1, b: {c: 2}})
    const m3 = ref({a: 1, b: {c: 2}})
    const m4 = shallowRef({a: 1, b: {c: 2}})
    return {
      m1,
      m2,
      m3,
      m4
    }
  }
  public inputRef = ref<HTMLElement|null>(null)
  public anyvalue:any
  public obj1:ProductResult={
    id: 'string',
    title: 'string',
    price: 50
  }
   name:string=''
   // 当一个函数没有返回值时，你通常会见到其返回值类型是 void
  created ():void {
      console.log('created');
      this.$nextTick(()=>{
        console.log(this.inputRef);
      })
      const color = ref('red')
      //祖孙之间传值
      provide('color', color)
      this.fun({id:1},1)
      this.fun2('1')
      this.createArray2<number>(11, 3)
      this.swap<string, number>('abc', 123)
      console.log( this.createArray2<number>(11, 3));
      console.log( this.swap<string, number>('abc', 123));
      this.mySearch('1','2')
  }
  mySearch: SearchFunc = function (source: string, sub: string): boolean {
    console.log(sub);
    console.log(source)
  return source.search(sub) > -1
}
bindSend1(x:string,b:string){
  console.log(x,b);
  
}
  get getSum(){
    return this.age+1
  }
  add(){
    this.age++
  }
  fun(val:object,idx:number){
    console.log(val,idx);
  }
  fun2(x:number|string){
      return x.toString().length
  }
  //类型断言
  fun3(x:string|number){
    if((<string>x).length){
      // return (<string>x).length
      return (x as string).length
    }else{
       return x.toString().length
    }
  }
  //函数泛型
  createArray2 <T> (value: T, count: number) {
    const arr: Array<T> = []
    for (let index = 0; index < count; index++) {
      arr.push(value)
    }
    return arr
  }
  //多个泛型参数的函数
  swap <K, V> (a: K, b: V): [K, V] {
   return [a, b]
  } 
  @Watch('age')
  Age(newVal:number){
      console.log(newVal,'watch');
  }
  // watch(user,()=>{
  //   age++
  // },{
  //     immediate: true,  // 是否初始化立即执行一次, 默认是false
  //     deep: true, // 是否是深度监视, 默认是false
  // })
}
</script>

<template>
  <div>
     儿子{{propA}}
     <button @click="bindSend1">儿子</button>
     <input type="button" value="点击触发父级方法" @click="handleSend"/>
      <input type="button" value="点击触发父级方法" @click="bindSend2"/>
     <sunzi></sunzi>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import { Watch ,Prop,Emit} from "vue-property-decorator";
import sunzi from '@/components/sunzi'
@Options({
  components:{
    sunzi
  }
})
export default class son extends Vue {
  @Prop({
    type: Number,
    default: 0,
    required: false
  })
  propA?: number
  public msg='123456789'
  public love='988989'

  @Emit()
  private bindSend1(msg:string,love:string){
  }
  public handleSend():void {
      this.bindSend1(this.msg,this.love);
  }
  @Emit('test')
  private bindSend2(){
      return '这个可以用test接受';
  }
}
</script>

<style>

</style>