django将搜索信息存入redis中

vue3.x 使用jszip对文件进行压缩和下载

  返回  

vue-property-decorator

2021/7/20 15:49:34 浏览:

vue-property-decorator基础教程

  • 为什么要使用vue-property-decorator
  • 如何使用vue-property-decorator
      • 基本写法
      • data中定义数据
      • 生命周期钩子函数
      • 方法
      • @Component
      • @Prop
      • @Emit
      • 计算属性
      • @Watch

为什么要使用vue-property-decorator

vue-property-decorator是在vue-class-component的基础上做了进一步的封装,在TypeScript官方文档 中,官方推荐了vue-class-component,提供了Vue,Component等,而vue-property-decorator是社区出品,深度依赖于vue-class-component,提供了更多操作符:@Component,@Prop,@Watch,@Emit……
在这里插入图片描述

如何使用vue-property-decorator

基本写法

template和css的写法不变,只是script内的写法需要注意

<script lang='ts'>
import {Component, Vue} from vue-property-decorator;
@Component
export default class App extends Vue {

};
</script>

lang="ts":script声明当前语言是ts
@Component:注明此类为一个vue组件
export default class Test extends Vue: export当前组件类是继承vue的

data中定义数据

data中的数据由原来的data()方法改成直接在对象中定义,data内的属性直接作为实例属性书写,默认都是public公有属性

export default class App extends Vue {
  private msg1 : string = '123';
  private msg2 : number = 1}

生命周期钩子函数

export default class App extends Vue {
  private created(){
    this.init();
  }
}

方法

export default class App extends Vue {
  private init(){
    console.log('init');
  }
}

@Component

<script lang="ts">
@Component({
  components: {
    HelloWorld, // 声明子组件的引用
  }
})
export default class App extends Vue {}
</script>

@Prop

参数可以传

  • Constructor 例如String, Number, Boolean
  • Constructor[], 构造函数的队列, 类型在这队列中即可
  • PropOptions
    • type 类型不对会报错 Invalid prop: type check failed for prop “xxx”. Expected Function, got String with value “xxx”.
    • default 如果父组件没有传的话为该值, 注意只能用这一种形式来表示默认值, 不能@Prop() name = 1来表示默认值 1, 虽然看起来一样, 但是会在 console 里报错, 不允许修改 props 中的值
    • required 没有会报错 [Vue warn]: Missing required prop: “xxx”
    • validator 为一个函数, 参数为传入的值, 比如(value) => value > 100
@Prop()
propA: string

@Prop()
propB: number

@Prop({
  type: Number,
  validator: (value) => {
    return value > 100;
  },
  required: true
}) private propC!: string // !表示有值, 否则 ts 会告警未初始化


@Prop({ 
  default: 'this is title',
  required: true
}) propD!: string; // !表示有值, 否则 ts 会告警未初始化

@Prop({ 
  default: true,
  required: true
}) propE: boolean | undefined;

@Emit

定义emit事件,参数字符串表示分发的事件名,如果没有,则使用方法名作为分发事件名,会自动转连字符写法:

  1. @Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
  2. @Emit(name: string),里面传递一个字符串,该字符串为要触发的事件名.

js写法

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('reset')
    },
    returnValue() {
      this.$emit('return-value', 10)
    },
    promise() {
      const promise = new Promise(resolve => {
        setTimeout(() => {
          resolve(20)
        }, 0)
      })

      promise.then(value => {
        this.$emit('promise', value)
      })
    }
  }
}

ts写法

import { Vue, Component, Emit } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  count = 0

  @Emit()
  addToCount(n: number) {
    this.count += n
  }

  @Emit('reset')
  resetCount() {
    this.count = 0
  }

  @Emit()
  returnValue() {
    return 10
  }

  @Emit()
  promise() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

计算属性

对于Vue中的计算属性,我们只需要将该计算属性名定义为一个函数,,在函数前加上get关键字即可,原本Vue中的computed里的每个计算属性都变成了在前缀添加get的函数。

public get computedMsg(){
      return '这里是计算属性' + this.message;
}
public set computedMsg(message: string){
}

@Watch

监听属性发生更改时被触发. 可接受配置参数 options

  1. immediate: boolean 是否在侦听开始之后立即调用该函数
  2. deep: boolean 是否深度监听.
import { Vue, Component, Watch } from vue-property-decorator;

export default class App extends Vue {
  @Watch('child')
  onChangeChildValue(newValue: string, oldValue: string){
    ......todo
  }

  @Watch('parent', {immediate: true, deep: false})
  private onChangeParentValue(newValue: string, oldValue: string){
    ......todo
  }
} 

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号