详解TypeScript+Vue 插件 vue-class-component的使用总结


Posted in Javascript onFebruary 18, 2019

首先 下载

npm install vue-class-component vue-property-decorator --save-dev

一梭子直接干;

其次,咱来说说它们的区别与联系:

vue-property-decorator社区出品;vue-class-component官方出品

vue-class-component提供了Vue、Component等;

vue-property-decorator深度依赖了vue-class-component,拓展出了更多操作符:@Prop、@Emit、@Inject、@Model、@Provide、@Watch;

开发时正常引入vue-property-decorator就行

引入后写vue代码就是如此,

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

@Component
export default class App extends Vue {
 name:string = 'Simon Zhang'

 // computed
 get MyName():string {
 return `My name is ${this.name}`
 }

 // methods
 sayHello():void {
 alert(`Hello ${this.name}`)
 }

 mounted() {
 this.sayHello();
 }
}

相当于

export default {
 data () {
 return {
  name: 'Simon Zhang'
 }
 },

 mounted () {
 this.sayHello()
 },

 computed: {
 MyName() {
  return `My name is ${this.name}`
 }
 },

 methods: {
 sayHello() {
  alert(`Hello ${this.name}`)
 },
 }
}

大佬都说爽的一批;

然鹅菜鸟我遇到问题一堆,以下做个积累总结:

1、写法问题:引入组件和接收父组件传过来的参数

@Component({
 components: {
 XXXX
 },
 props: {
 mapFlag: Number
 }
})

2、获取refs,在其后面加上as HTMLDivElement(不知道是不是这插件引起的,懒得管,直接干就是)

let layoutList:any = this.$refs.layout as HTMLDivElement

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
js中的this关键字详解
Sep 25 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
vue判断input输入内容全是空格的方法
Mar 02 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
详解ES7 Decorator 入门解析
Feb 18 #Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 #jQuery
详解关于微信setData回调函数中的坑
Feb 18 #Javascript
jQuery实现的五星点评功能【案例】
Feb 18 #jQuery
JS中min函数实例讲解
Feb 18 #Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 #jQuery
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python 生成不重复的随机数的代码
2011/05/15 Python
Django权限机制实现代码详解
2018/02/05 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
python eventlet绿化和patch原理
2020/11/21 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
vue+django实现下载文件的示例
2021/03/24 Vue.js
建筑自我鉴定
2013/10/19 职场文书
总经理岗位职责
2013/11/09 职场文书
六十大寿答谢词
2014/01/12 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
新闻人物通讯稿
2014/10/09 职场文书
运动会闭幕词
2015/01/28 职场文书
班主任高考寄语
2015/02/26 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
《花钟》教学反思
2016/02/17 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL