vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明
@Prop 父子组件之间传值
Install:
npm install --save vue-property-decorator
Child:
<template><div>{{fullMessage}}</div>
</template><script lang="ts">import Vue from 'vue'
import {Component, Prop} from 'vue-property-decorator'@Component({})
export default class Child extends Vue {message: string = "Hello";@Prop({type: String,default: 'Default Value'}) msg: string;get fullMessage() {return `${this.message},${this.msg}`;}
}
</script>
Parent:
<template><div class="hello"><h1 v-colorDirective="{color: 'red', backgroundColor: 'blue'}">{{ message }}</h1><button @click="clicked">Click</button><ChildComp msg="'What a good day!'"/><router-link to="/hello-ts">Hello Ts</router-link></div>
</template><script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import colorDirective from '../color-directive';import ChildComp from './Child.vue';@Component({directives: {colorDirective},components: {ChildComp}
})
export default class Hello extends Vue {message: string = 'Welcome to Your Vue.js App'get fullMessage() {return `${this.message} from Typescript`}created() {console.log('created');}beforeRouteEnter(to, from, next) {console.log("Hello: beforeRouteEnter")next()}beforeRouteLeave(to, from, next) {console.log("Hello: beforeRouteLeave")next()}clicked() {console.log('clicked');}
}
</script>
@Model 数据双向绑定
Checkbox:
<template><div><input type="checkbox" :id="id" :checked=checked @change="changed"/> {{label}}</div>
</template><script lang="ts">
import Vue from 'vue'
import { Component, Prop, Model } from 'vue-property-decorator'
@Component
export default class MyCheckbox extends Vue {@Prop() label: string@Prop() id: string@Prop()@Model('change') checked: booleanchanged(ev) {this.$emit('change', ev.target.checked)}
}
</script>
Parent Component:
<template><div><MyCheckbox :label="checkbox.label" :id="checkbox.id" v-model="checkbox.checked"/>{{JSON.stringify(checkbox)}}</div>
</template>
<script lang="ts">import Vue from 'vue'
import {Component} from 'vue-property-decorator'
import MyCheckbox from './MyCheckBox.vue'@Component({components: {MyCheckbox}
})
export default class HelloTs extends Vue {checkbox = {label: 'Fancy checkbox',id: 'checkbox-id',checked: true}
}
</script>
@Watch 监听数据变化
<template><div class="hello"><button @click="clicked">Click</button> {{sum.acum}}</div>
</template><script lang="ts">
import Vue from 'vue'
import {Component, Watch} from 'vue-property-decorator'@Component({
})
export default class Hello extends Vue {sum = {acum: 0}@Watch('sum', {deep: true})watchCount(newVal, oldVal) {console.log("newVal", newVal, "oldVal", oldVal)}clicked() {this.sum.acum++;}
}
</script>
@Provide 提供 / @Inject 注入
当您希望从父组件到子组件提供一些服务或数据时,您可以使用@Provide和@Inject。
Parent component:
<template><div class="hello"><ChildComp :msg="'What a good day!'"/></div>
</template><script lang="ts">
import Vue from 'vue'
import {Component, Provide} from 'vue-property-decorator'import ChildComp from './Child.vue';@Component({
})
export default class Hello extends Vue {@Provide('users')users = [{name: 'test',id: 0}]}
</script>
Child:
<template><div>{{users}}</div>
</template><script lang="ts">import Vue from 'vue'
import {Component, Inject} from 'vue-property-decorator'@Component({})
export default class Child extends Vue {message: string = "Hello";@Inject('users') users;
}
</script>
在 TypeScript 中创建 自己的修饰器
定义一个修饰器:
const Log = (msg) => {return createDecorator((component, key) => {console.log("#Component", component);console.log("#Key", key); //logconsole.log("#Msg", msg); //App})
}
使用:
@Log('fullMessage get called')
get fullMessage() {return `${this.message} from Typescript`
}
输出:
#Component Object {directives: Object, components: Object, name: "Hello", methods: Object, computed: Object…}
#Key fullMessage
#Msg fullMessage get called
.
vue-property-decorator 提供 OO 的风格 Vue Component 方便类型声明相关推荐
- Vue +TS 找不到模块 或 其相应的类型声明
找不到模块"../views/**.vue"或其相应的类型声明. In the src folder add the file shims-vue.d.ts with the fo ...
- 为Angular(2+)开发人员提供带TypeScript的Vue.js
目录 介绍 单页应用程序的演变(SPA) 三大框架概述 Angular开发者的Vue.js 学习Vue.js Vue.js页面的剖析 构建示例应用程序 TypeScript的案例 入门--Vue.js ...
- jsx怎么往js里传参数_实践Vue 3.0做JSX(TSX)风格的组件开发
作者:莫夭 转发链接:https://zhuanlan.zhihu.com/p/102668383 前言 我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React ...
- 除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。
实例 <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}&l ...
- vue tree组件_使用Vue 3.0做JSX(TSX)风格的组件开发
前言 我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...
- Vue官网提供表单验证cnpm i vee-validate@2 --save
Vue官网提供表单验证 使用步骤: 1:安装vee-valadite,别安装最新版本@2 2:在plugins文件夹中创建一个validate.js[专门注册vee-valadite] 3:注册插件 ...
- 使用vue+el构建表格_如何使用Vue和VuePress构建文档系统
使用vue+el构建表格 介绍 (Introduction) Good documentation is a critical part of a successful project, but a ...
- vue created 调用方法_深入解析 Vue 的热更新原理,偷学尤大的秘籍?
大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率.想知道这背后是怎么实现的吗, ...
- baidumap vue 判断范围_懂一点前端—Vue快速入门
01. 什么是 Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,是当下很火的一个 JavaScript MVVM 库,是以 数据驱动和组件化 的思想构建的 ...
最新文章
- android 相片裁剪空间,科学网—根据需要的空间范围对目标图层进行空间裁剪 - 孙露的博文...
- 系统进程间的同步机制
- android倒计时录制视频下载,android录制视屏(预览,倒计时)
- Python3安装Scrapy爬虫框架
- JS总是带有一种神奇的魔力
- 自己来实现一套IOC注解框架
- 《『若水新闻』客户端开发教程》——16.添加广告
- 包邮送50本数据分析,MySQL,Python相关书籍
- php数组是否存在数组,php判断数组中是否存在某值
- Jackson2 json 转换Bean, Bean 里没有对应的值 jackson Un的解决方式
- VB2010(3)整型运算
- 关于阿里云服务器的使用(入门级)
- (转)两性学堂——《搭讪入门指南》
- STM32F103CB控制超声波HCSR04可用程序
- FusionCharts Free (FCF) V3 新特性之样式(Styles)
- 常见面试算题题中的滑动窗口问题
- uni-app常见问题以及解决方案
- Google一日体验
- VSG控制模型,不平衡电网,自适应控制模型,能够实现三相电网电流平衡,有功、无功
- 使用PortTunnel来透过局域网架网站