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 += 1
this.$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>
子组件自定义了个事件,然后把这个事件发射出去,父组件使用这个事件
vue-property-decorator vue typescript写法的更多相关文章
- [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as for ...
- 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象
用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...
- 如何在Vue项目中使用Typescript
0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...
- Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...
使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...
- vue cli4构建基于typescript的vue组件并发布到npm
基于vue cli创建一个vue项目 首先安装最新的vue cli脚手架, npm install --global @vue/cli npm WARN optional SKIPPING OPTIO ...
- Vue项目中应用TypeScript
一.前言 与如何在React项目中应用TypeScript类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-c ...
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
随机推荐
- android ——ListView
谷歌官方文档的介绍:https://developer.android.com/reference/android/widget/ListView.html 显示可垂直滚动的视图集合,其中每个视图都立 ...
- 使用pandoc简单教程
使用pandoc作为过滤器 {#step-4-using-pandoc-as-a-filter} 类型 pandoc 并按Enter键.你应该看到光标就在那里,等着你输入一些东西.输入: Hello ...
- 在linux中部署项目并创建shell脚本
1.首先要在idea中父工程maven包下执行clean生成的target包 2.执行package打包,打包时候讲test勾去掉 3.将target包中生成的jar包cp出来 此处注意打包时必须要保 ...
- set集合的常用方法
set集合是一种无序不重复的集合 add (self, *args, **kwargs) ...
- spark sql/hive小文件问题
针对hive on mapreduce 1:我们可以通过一些配置项来使Hive在执行结束后对结果文件进行合并: 参数详细内容可参考官网:https://cwiki.apache.org/conflue ...
- Python爬虫(二)正则表达式
一.介绍 1.概念 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串"用来 ...
- docker方式部署elk日志搜索平台
Docker部署ELKF操作文档 前提介绍 1.之前搭建elk+f+k使用原生系统软件安装方式,由于docker镜像日趋成熟,docker官网和elastic官网都有相关镜像和各自安装文档可供参考,各 ...
- Flink中watermark为什么选择最小一条(源码分析)
昨天在社区群看到有人问,为什么水印取最小的一条?这里分享一下自己的理解 首先水印一般是设置为:(事件时间 - 指定的值) 这里的作用是解决迟到数据的问题,从源码来看一下它如何解决的 先来看下wind ...
- C#ORM中的对象映射
使用Linq.Expressions来动态生成映射方法 1.我们先写个简单的类Test,包含一个ID和Name. public class Test { public int? ID { get; s ...
- elk安装与搭建
Elasticsearch安装配置 ·下载elasticsearch.tar.gz包,解压压缩包.(此处为单机版es,集群请参考 https://www.cnblogs.com/lazycxy/p/9 ...