We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however we will guide you through creating your own decorators in order to add common functionality to your Vue components using TypeScript.

Import:

import {createDecorator} from 'vue-class-component'

Define a decorator:

const Log = (msg) => {
return createDecorator((component, key) => {
console.log("#Component", component);
console.log("#Key", key); //log
console.log("#Msg", msg); //App
})
}

Using it:

  @Log('fullMessage get called')
get fullMessage() {
return `${this.message} from Typescript`
}

Output:

#Component Object {directives: Object, components: Object, name: "Hello", methods: Object, computed: Object…}
#Key fullMessage
#Msg fullMessage get called

[Vue + TS] Create your own Decorators in Vue with TypeScript的更多相关文章

  1. [Vue + TS] Create Type-Safe Vue Directives in TypeScript

    Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create yo ...

  2. [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

    Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in y ...

  3. [Vue + TS] Using Route events inside Vue

    vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...

  4. vue+ts搭建项目

    Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考 1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript.vue全家桶能够掌握和运用 此次项目模版主要涉 ...

  5. [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript

    With properties we can follow a one-way parent→child flow communication between components. This les ...

  6. [Vue + TS] Write a Vue Component as a Class in TypeScript

    Starter app: https://github.com/alexjoverm/Vue-Typescript-Starter Writing Vue components as plain ob ...

  7. 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践

    1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择  ...

  8. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  9. vue+vux-ui+axios+mock搭建一个简单vue框架

    1.首先感谢同事 2.之前一直在做angularjs的项目,目前vue火热,所以自己搭建了一个的vue框架,在此作为记录 vue+vux-ui这里就不介绍了,有很多博客都写的很详细了. 下面简单记录下 ...

随机推荐

  1. C++ BigInteger模板

    #include <cstdio> #include <cstring> #include <string> #include <iostream> # ...

  2. OPENCV(3) —— 对XML和YAML文件实现I/O 操作

    XML\YAML文件在OpenCV中的数据结构为FileStorage string filename = "I.xml"; FileStorage fs(filename, Fi ...

  3. Atcoder B - Moderate Differences

    http://agc017.contest.atcoder.jp/tasks/agc017_b B - Moderate Differences Time limit : 2sec / Memory ...

  4. Linux常用PDF阅读软件

    1.福昕阅读器是一款PDF文档阅读器,对中文的支持度非常高.福昕阅读器作为全球最流行的PDF阅读器,能够快速打开.浏览.审阅.注释.签署及打印任何PDF文件. 2.evince是一个支持多种格式的文件 ...

  5. 入门Python:《趣学Python编程》中英文PDF+代码

    入门python推荐学习<趣学python编程>,语言轻松,通俗易懂,讲解由浅入深,力求将读者阅读和学习的难度降到最低.任何对计算机编程有兴趣的人或者首次接触编程的人,不论孩子还是成人,都 ...

  6. Java基础关于Map(字典)的方法使用

    Java基础关于Map(字典)的方法使用 java中一般用map与hashmap来创建一个key-value对象 使用前提是要导入方法包: import java.util.HashMap: impo ...

  7. 安卓https

    http://www.tuicool.com/articles/NrmE3e http://blog.csdn.net/guestcode/article/details/50194357 http: ...

  8. [Python] Read and Parse Files in Python

    This lesson will teach you how to read the contents of an external file from Python. You will also l ...

  9. 杭电5137How Many Maos Does the Guanxi Worth

    How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/5 ...

  10. vim 插件之commentary

    下载地址 http://www.vim.org/scripts/script.php?script_id=3695 如果是使用vundle来管理这个插件的话,你可以添加如下配置 tpope/vim-c ...