vue中typescript装饰器的使用方法超实用教程


Posted in Javascript onJune 17, 2019

VueConf ,尤大说, Vue 支持 Ts 了,网上关于 Vue + Ts 的资料有点少, 楼主踩了一个星期坑,终于摸明白了 修饰器 的玩法,下面我们就来玩下 Vue 的 decorator 吧

1,data 值的声明

vue中typescript装饰器的使用方法超实用教程 

在这里 public 声明的是公有属性, private 声明的是私有属性,私有属性要带 下划线

蓝色框里的内容是声明组件,在每个组件创建时都要带上, Components 中的写法如下

vue中typescript装饰器的使用方法超实用教程 

上面是 普通写法 ,下面是 懒加载写法

2.@Prop 父组件传值给子组件

vue中typescript装饰器的使用方法超实用教程 

父组件使用 v-bind 传递与js版本一样,在父组件接受是使用修饰器

@Prop({type:‘类型'})

readonly:传递的参数名称!:类型

一定要写全,不然后报错,也可以写个 接口 约束 类型

3.@Emit  子组件给父组件传值

vue中typescript装饰器的使用方法超实用教程 

@Emit('传给父组件的值')

callback

父组件接收与 js 版本一致

4.@Provide @Inject  混入

vue中typescript装饰器的使用方法超实用教程 

这个没什么说的, @Provide 声明一个值 , 在其他地方用 @Inject 接收

5.@Model 双向绑定

vue中typescript装饰器的使用方法超实用教程 

这个也很简单,v-model绑定一个值,在子组件使用 @Model('页面展示的值') 值类型

这里我偷懒,声明一样的 (手动笑哭)

5.@Watch   监听函数

vue中typescript装饰器的使用方法超实用教程 

@Watch('监听的值',{深度监听})

callback 回调函数

6.钩子函数的声明

与js基本一致

Ts          -> Js
public create() {} -> create() {}
public mounted() {}  ->  mounted() {}
eg:
private _changeMsg() {} ->  methods: {
_changeMsg() {}
}
eg:
private get _changeValue() {} -> computed: {
_changeValue() {}
}
public destory() {}      -> destory() {}

7.@State vuex中state的值

vue中typescript装饰器的使用方法超实用教程 

@State(state => state数据里的参数) 页面展示的值

!!!!!! 注意vuex的数据都要在钩子函数里 调用 !!!!!!!!!!!!!!

8.@Mutation  vuex中的mutation

vue中typescript装饰器的使用方法超实用教程 

使用与 @State 一致

!!!!!!!!!!!!!需要注意的是要写一个接口 将state里面的数据类型写进去,如果直接用

state编辑器会报错 , 当然声明any类型也是可以的, 但是用了Ts还是尽量不要用any吧  

    !!!!!!!!!!!!!!!!!!!!

9.@Action vuex 中的action

vue中typescript装饰器的使用方法超实用教程 

@Action('action里的方法名') 页面展示的方法

!!!!!!!!  由于异步,需要加async await 不然会一直处在padding状态,

 使用promise也是可以的            !!!!!!!!!!!!!!!

至于 vue.config.js 网上很多方法,有兴趣的可以去找下,在这里贴下自己的

vue中typescript装饰器的使用方法超实用教程vue中typescript装饰器的使用方法超实用教程

     vue中typescript装饰器的使用方法超实用教程

      !!!!!!!!!!!!!!!!!!!!!!!

       使用时一定引入修饰器  

以上就是小编给大家姐的vue中typescript装饰器的使用方法超实用教程,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 #Javascript
js/jQuery实现全选效果
Jun 17 #jQuery
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 #Javascript
通过说明与示例了解js五种设计模式
Jun 17 #Javascript
简单了解vue.js数组的常用操作
Jun 17 #Javascript
送你43道JS面试题(收藏)
Jun 17 #Javascript
通过实例学习React中事件节流防抖
Jun 17 #Javascript
You might like
其他功能
2006/10/09 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
Python3解释器知识点总结
2019/02/19 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python with标签使用方法解析
2020/01/17 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
打架检讨书800字
2014/01/10 职场文书
黄金搭档广告词
2014/03/21 职场文书
小学一年级学生评语
2014/04/22 职场文书
实习生工作证明范本
2014/09/14 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers