如果想要在 vue2.0 中使用ts语法,需要引用 vue-property-decorator 这个第三方js库
此组件基本依赖于 vue-class-component 用于以下属性:
vue-class-component)一.安装
npm install --save vue-property-decorator
二. ts页面中基本写法
import { Component, Vue, Inject } from "vue-property-decorator";
@Component({
components: {}
})
export default class SubjectList extends Vue {
dialogVisible: boolean = false;
storageVisible: boolean = false;
config: any = {
style: "table-form",
queryUrl: "Subject/GetAll",
isCustom: true,
params: {}
};
created() {
}
}
可以看到,这里的变量,与钩子都属于同级,会少些一些代码
三.下面讲几个用的较多的几个属性
1.组件引用
import { Component, Vue, Inject } from "vue-property-decorator";
import addSelectProduct from "../../coupon/components/addSelectProduct/addSelectProduct.component.vue";
@Component({
components: {
addSelectProduct,
}
})
export default class SubjectList extends Vue {
dialogVisible: boolean = false;
storageVisible: boolean = false;
config: any = {
style: "table-form",
queryUrl: "Subject/GetAll",
isCustom: true,
params: {}
};
created() {
}
}
2. watch 监听属性
import { Component, Vue, Inject,Watch } from "vue-property-decorator";
@Component({
components: {}
})
export default class SubjectList extends Vue {
dialogVisible: boolean = false;
storageVisible: boolean = false;
config: any = {
style: "table-form",
queryUrl: "Subject/GetAll",
isCustom: true,
params: {}
};
productList: any = []
// 监听属性
@Watch("dialogVisible")
onCountChanged(val: any, oldVal: any) {
console.log(val);
}// 监听属性
@Watch("productList",{ deep: true })
onCountChanged2(val: any, oldVal: any) {
console.log(val);
}
created() {
}
}
3.计算属性
import { Component, Vue, Inject } from "vue-property-decorator";
@Component({
components: {}
})
export default class SubjectList extends Vue {
dialogVisible: boolean = false;
storageVisible: boolean = false;
config: any = {
style: "table-form",
queryUrl: "Subject/GetAll",
isCustom: true,
params: {}
};
limitType : number = 0
// 计算属性
get shouldEdit() {
return !router.currentRoute.query.id;
}
get getButtonName() {
let type: any = {
1: ‘拼团‘,
2: ‘限时折扣‘,
};
return type[this.limitType];
}
created() {
}
}
4. 混入公共方法 mixins
import { Component, Vue, Inject } from "vue-property-decorator";
import PublicMethod from ‘@/plugins/mixins/provides/service/publicMethod‘;
@Component({
components: {},
mixins:[PublicMethod]
})
export default class SubjectList extends Vue {
dialogVisible: boolean = false;
storageVisible: boolean = false;
config: any = {
style: "table-form",
queryUrl: "Subject/GetAll",
isCustom: true,
params: {}
};
created() {
(<any>this).WxShare({ infoId : this.config.params.id , infoType : 7 });
}
}
分享一刻:
labuladong 的算法小抄 100 多道 LeetCode 算法题目的中文解释
原文：https://www.cnblogs.com/huangaiya/p/13628291.html