Vue Typescript 装饰器@Component

news/2024/7/9 23:56:27 标签: vue

vue-property-decorator 在 vue-class-component 上增强更多的结合 Vue 特性的装饰器, 对 Vue 组件进行了一层封装,让 Vue 组件语法在结合了 TypeScript 语法更加贴近面向对象编程.并提供一个工具函数一个装饰器:

语法:
	@Component(options)
				
说明:
	options 中需要配置 decorator 库不支持的属性,: components, filters, directives等
example:
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src

@Component({
  components: {
    HelloWorld
  }
})
export default class Home extends Vue {}
</script>
example:
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class About extends Vue {
  count = 0
  msg = 'this is about page'
  child: number | string = 'hello' // 定义多属性变量,划定属性类型

  mounted () {
    // 页面渲染完毕后执行函数
    window.console.log('count =>', this.count)
  }
}
</script>

http://www.niftyadmin.cn/n/1162489.html

相关文章

Vue Typescript mixins 混入

首先定义要混淆的类&#xff1a; // FilePath: \hello-typescript\src\mixins\GreetingWords.ts import Vue from vue import Component from vue-class-componentComponent export default class MyMixins extends Vue {// data// 通过混入的方式将属性赋值给其他组件mixinVa…

Vue Typescript data/method/computed的转变

data 以成员变量的形式存在method 以类的函数形式存在computed 使用 get 标识 <!--* Author: your name* Date: 2020-12-02 14:30:50* LastEditTime: 2020-12-02 17:00:58* LastEditors: Please set LastEditors* Description: In User Settings Edit* FilePath: \hello-ty…

Vue Typescript @Watch

语法&#xff1a;Watch(path: string, options: WatchOptions {})参数说明&#xff1a;path: string类型 被侦听的属性名options&#xff1a;类型WatchOptions{}&#xff0c;可以包含两个属性immediate boolean 侦听开始之后是否立即调用该回调函数&#xff1b;deepboolean 被…

Vue Typescript @Model

定制prop和event 用作双向数据绑定 默认情况下, 一个组件上的v-model会:将 value用作 prop将 input用作 event语法&#xff1a; model: {prop?: string, event?: string} <!--* FilePath: \hello-typescript\src\components\Child.vue --> <template><div sty…

Vue Typescript @Prop

语法&#xff1a;Prop(options: (PropOptions | Constructor[] | Constructor) {})参数说明&#xff1a;Prop装饰器接收一个参数&#xff0c;这个参数可以有三种写法&#xff1a;Constructor例如String&#xff0c;Number&#xff0c;Boolean等&#xff0c;指定 prop 的类型&a…

vue + typescript 引入Vant-UI

安装 vant npm install vant --save1. 全局引入在 main.ts 中全局引入import vant/lib/vant-css/index.cssVue.use(Vant)2. 按需引入 两种按需引入方法&#xff0c;都可以实现按照需求引入&#xff0c;推荐第二种第一种&#xff1a;步骤一&#xff1a;在src下定义 plugins 目录…

vue 项目中常用的三种数据存储

vue 项目中常用的三种数据存储 1. Cookies 存储 介绍&#xff1a; 老技术、指定有效期、不能跨域&#xff08;浏览器&#xff0c;网站&#xff0c;路径&#xff09; cookie会跟随http协议发往后台&#xff0c;cookie最好处于服务器环境中使用 只能…

JS 序列化 与 反序列化

序列化 定义&#xff1a; 序列化是把对象转换成有序字节流&#xff0c;以便在网络上传输或者保存在本地文件中。 序列化机制的核心作用就是对象状态的保存与重建。 本质上讲&#xff0c;序列化就是把实体对象状态按照一定的格式写入到有序字节流 …