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 相关文章推荐
jQuery实现的类flash菜单效果代码
May 17 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
数组Array的排序sort方法
Feb 17 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
简单学习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
php自定义apk安装包实例
2014/10/20 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
Python利用ansible分发处理任务
2015/08/04 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
我爱我校演讲稿
2014/05/21 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA