详解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 相关文章推荐
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
jQuery 使用个人心得
2009/02/26 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Python 常用 PEP8 编码规范详解
2017/01/22 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
物业保安员岗位职责
2014/03/14 职场文书
社区工作者演讲稿
2014/05/23 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书