vue-property-decorator vue typescript写法
什么是Typescript
TypeScript 是一种由微软开发的自由和开源的编程语言,它是 JavaScript 的一个超集,扩展了 JavaScript 的语法。作者是安德斯大爷, Delphi、C# 之父(你大爷永远是你大爷)。把弱类型语言改成了强类型语言,拥有了静态类型安全检查, IDE 智能提示和追踪,代码重构简单、可读性强等特点。
现在VUE 也支持了 TypeScript ,面对安德斯大爷放出的这些大招,果断用之。
安装使用
使用 vue-cli 创建项目的时候 选择Typescript就行了,
注意下几个配置文件
tsconfig.json
{"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"jsx": "preserve","importHelpers": true,"moduleResolution": "node","experimentalDecorators": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"sourceMap": true,"baseUrl": ".","types": ["webpack-env"],"paths": {"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]},"include": ["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],"exclude": ["node_modules"]
}
tslint.json
{"defaultSeverity": "warning","extends": ["tslint:recommended"],"linterOptions": {"exclude": ["node_modules/**"]},"rules": {"quotemark": [true, "single"],"indent": [true, "spaces", 2],"interface-name": false,"ordered-imports": false,"object-literal-sort-keys": false,"no-consecutive-blank-lines": false,"no-console": false, //允许使用console"member-access": [true, "no-public"], //禁止指定公共可访问性,因为这是默认值// "noImplicitAny": false, //允许参数而不声明其类型"one-variable-per-declaration": false, //允许在同一声明语句中使用多个变量定义"no-unused-expression": [true, "allow-fast-null-checks"], //允许使用逻辑运算符执行快速空检查并执行副作用的方法或函数调用( 例如e && e.preventDefault())"curly": [true, "ignore-same-line"],"arrow-parens": [true, "ban-single-arg-parens"],"semicolon": [true, "never"],//是否提示不必要的分号"trailing-comma": [true,{"multiline": {"objects": "ignore","arrays": "ignore","functions": "ignore","typeLiterals": "ignore"},"esSpecCompliant": true}]}
}
重要的是怎么在项目中使用Typescrit写法
1:安装npm install --save vue-property-decorator
此类库提供了7个装饰器
- @Emit
- @Inject
- @Model
- @Prop
- @Provide
- @Watch
- @Component
实现生成像原生 JavaScript class 那样的声明组件。
下面分别给出实例解释其用法:
- @Component
组件声明
原生写法
import UploadImage from '@/components/UploadImage'export default {name: 'user',components: { UploadImage },data() {return {name:"张三",sex: '男'}},methods: {funcA(params) {},funcB() {}}
}
使用Ts中写法
import UploadImage from '@/components/UploadImage'
import { Component, Vue, Provide } from 'vue-property-decorator'@Component(name:"user",components:{UploadImage})
export default class user extends Vue{private name:string="张三"private sex:string="男"private funcA(params:any){}private funcB(){}
}
其中使用 @Component 声明了 user组件 ,同时引用 子组件 UploadImage,写在 Components 参数中。
- @Prop
属性声明 在自定义组建中使用
原生写法
export default{name:"upload",props:{value:{type:String,default:''}}
}
在ts中写法
@Component()
export default class upload extends Vue{@Prop()private value:string='';
}
- computed
计算属性
这个很类似于c#中的 属性概念,属性值本身可以通过计算得出。
原生写法
computed: {imageUrl() {return 'http://xxxx.xxxx.com/' + this.value;//value是定义的一个字段}},
在ts中写法
get imageUrl(){return 'http://xxxx.xxxx.com/' + this.value;//value是定义的一个字段
}template 中一样使用{{imageUrl}}
- @watch
用来监测Vue实例上的数据变动
如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。
export default {name: 'index',data() {return {demo: {name: ''},value: ''};},computed: {newName() {return this.demo.name;}},watch: {newName(val) {this.value = val;}}};
ts写法
export default class index extends Vue{demo:any={name:''};value:string='';get newName(){ return this.demo.name;}@watch('wnewName')wnewName(val){this.value=val;}
}
- emit
我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!
每个 Vue 实例都实现了事件接口(Events interface),即:
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName)触发事件
Vue.component('counter', {template: `<button v-on:click="increment">{{ counter }}</button>`,data() {return {counter: 0}},methods: {increment: function () {this.counter += 1this.$emit('increment')}},
});new Vue({el: '#example',data: {total: 0},methods: {incrementTotal: function () {this.total += 1}}
})<div id="example"><p>{{ total }}</p><counter v-on:increment="incrementTotal"></counter>
</div>
子组件自定义了个事件,然后把这个事件发射出去,父组件使用这个事件
转载于:https://www.cnblogs.com/sands/p/11284596.html
vue-property-decorator vue typescript写法相关推荐
- [vue] 怎么配置使vue2.0+支持TypeScript写法?
[vue] 怎么配置使vue2.0+支持TypeScript写法? 配置ts-loader,tsconfig增加类型扩展,让ts识别vue文件vue文件中script里面换成ts写法, 需要增加几个t ...
- vue 保存全局变量_Vue+Typescript起手式
TypeScript是什么? TypeScript 是一种由微软开发的自由和开源的编程语言.它是 JavaScript 的一个超集,TypeScript 在 JavaScript 的基础上添加了可选的 ...
- vue非编译的模块化写法
项目目录 ●/ ●index.html ●js/ ●main.js ●myComponent.js ●routes.js ...
- [vue] vue和微信小程序写法上有什么区别?
[vue] vue和微信小程序写法上有什么区别?写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下 ...
- Vue CLI 3 可以使用 TypeScript 生成新工程
TypeScript 支持 在 Vue 2.5.0 中,我们大大改进了类型声明以更好地使用默认的基于对象的 API.同时此版本也引入了一些其它变化,需要开发者作出相应的升级.阅读博客文章了解更多详情. ...
- typescript vuex_将已有的Vue项目升级支持TypeScript
TypeScript是js的超集,是由微软开发的.越来越多的项目使用TypeScript.像现在很火的Visual Studio Code就是使用TypeScript开发. 本人开发过一段Angula ...
- vue的axios两种写法(不知道对不对,仅供参考)
vue的axios两种写法(不知道对不对,仅供参考) `methods () { getHomeInfo () { axios.get ('/api/index.json') ...
- vue中a的href写法
vue中a的href写法 注意点:href前面要加":"或者v-bind: 2.字符串要用单引号" ' "包住 加上了冒号是为了动态绑定数据,等号后面可以写变量 ...
- TypeScript深度剖析:Vue项目中应用TypeScript?
一.前言 与link类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-component库而来,这个库vue官 ...
最新文章
- confirm修改按钮文字_CAD教程来袭,CAD菜鸟们你知道CAD如何创建和设置文字样式吗?...
- AliOS Things KV组件的写平衡特性
- 将程序添加到自动启动
- 加速静态内容访问速度的CDN
- Asp.net在IE10、IE11下事件丢失经验总结
- 嵌入式linux 自动获取IP 及 自动校时
- 【招聘(广州)】 招聘.NET程序员
- sklearn.decomposition.FastICA实现FastICA算法
- Python read()/pack()/try
- SparkSql引起的一场灾难
- Android handleMessage和sendMessage 简单示例
- 车间调度建模系列1|复杂车间调度问题特点
- pptx文件怎么打开(ppt兼容包下载)
- 尝一尝HBuilderX香不香
- 三阶魔方大中小魔公式_三阶魔方的入门玩法教程|魔方玩法|魔方视频教程|魔方公式图解|--想成为魔方高手就来魔方乐园吧...
- 【雕爷学编程】Arduino动手做(2)---光敏电阻模块
- 如何应对大数据的三大挑战?
- UE4 皮革材质从简单到复杂
- 测试京东万象的Webservice接口
- 微信端跳转外部浏览器进行apk文件下载的实现原理及源码