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 框架,简单易上手不说,教程详尽 ...
随机推荐
- Maven安装配置及其插件m2e(Eclipse Indigo 和 MyEclipse8.5)的安装配置
Maven安装配置及其插件m2e(Eclipse Indigo 和 MyEclipse8.5)的安装配置 系统:Windows7 使用软件: Maven3.0.3 + Eclipse Indigo ...
- JavaWeb——使用会话维持状态3
这次的例子是使用会话给上一个例子添加登陆功能 1.页面逻辑 首先是登陆页面,这里需要输入账号和密码,输入正确后将进入商品列表页面,输入错误将会提示账号或者密码错误 其次是商品列表和购物车页面,添加了注 ...
- 如何搭建环境---初识mybatis
一:mybatis概念1:简介 MyBatis本是apache的一个开源项目iBatis,2010年改名为 MyBatis, MyBatis 是一个基于Java的持久层框架.( ...
- python中下标和切片的使用
下标 所谓下标就是编号,就好比超市中存储柜的编号,通过这个编号就能找到相应的存储空间. Python中字符串,列表,元祖均支持下标索引. 例如: # 如果想取出部分字符,可使用下标 name=&quo ...
- 大白话5分钟带你走进人工智能-第32节集成学习之最通俗理解XGBoost原理和过程
目录 1.回顾: 1.1 有监督学习中的相关概念 1.2 回归树概念 1.3 树的优点 2.怎么训练模型: 2.1 案例引入 2.2 XGBoost目标函数求解 3.XGBoost中正则项的显式表达 ...
- centos7之Python3.74安装
安装版本:Python3.74 系统版本:centos7 系统默认安装Python2.7,保留. 安装/usr/bin/Python3 安装需要root权限. 安装Python3的准备工作: 1.安装 ...
- GitPage部署
前言 该文章主要为了记录我如何在GitPage上面部署博客网站,这里的话,码云上面也有相同的功能. 若有小伙伴担心GitHub担心把中国的访问也禁了的话(大概不会吧),可以在码云上面部署.流程应该是差 ...
- CentOS 安装 JDK 三种形式详细总结
一.下载 JDK 点击下载:jdk-8u211-linux-x64.tar.gz 根据需要选择对应版本和位数,并将文件放入CentOS中的相关目录中,以 /java/jdk 目录为例,执行 m ...
- SQL Server 数据完整性的实现——约束
SQL Server数据库采用的是关系数据模型,而关系数据模型本身的优点之一就是模型本身集成了数据完整性.作为模型一部分而实施的数据完整性(例如在创建数据表时的列属性定义)称作为声明式(Declara ...
- Nginx+Zuul集群实现高可用网关
代码参考:https://github.com/HCJ-shadow/Zuul-Gateway-Cluster-Nginx Zuul的路由转发功能 前期准备 搭建Eureka服务注册中心 服务提供者m ...