TypeScript优势：
- 可读性
- 面向对象的编程思想
- 静态类型检查
- 代码提示（vscode）
- 可以使用vue特性 v-model v-on
<Input
size='large'
placeholder={ this.$l('phonePlaceholder') }
v-model={ this.formData.phone }/>
- 生命周期函数直接使用
public created():void{}
-
data, computed, watch, methods
data => ts变量声明private value= ''
computed => get 变量(){}public get valueLen(){return this.value.length}
watch => vue-property-decorator提供的@Watch
@Watch('value')
protected valueWatch(newV: any, oldV: any){}
methods => 函数声明 public change(): void {}
-
引入外部css
如果需要使用css module，需要将文件名声明为xxx.module.less/xxx.module.css，表示使用css module,如果文件名不想写module,可以在vue.config.js中配置css:{ modules: true }
import style from './module.less'
@Component
export default class MyComponent extends Vue{
protected render(){
return (
<div class={style.container}>
)
}
}
// module.less
.container{
background: #fff;
:global(.main) { // css穿透
background: red;
}
}
穿透css：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而用不想去除scoped属性造成组件之间的样式污染。
<style scoped>
外层 >>> 第三方组件 {
样式
}
</style>
🎈需要注意的，导入less时如果被提示找不到模块xxx.less,需要在项目的shims-vue.d.ts中添加以下内容：
declare module "*.less" {
const less: any;
export default less;
}
-
iview表单验证，validate报错（不存在该属性）
解决方案：
// 法一：
（this.$refs.form as Vue &{validate: () => boolean}).validate()
// (<Vue>this.$refs.form).validate()
// 法二：
// 当在一个组件里被使用多次
public get form() : Vue & {validate: () => boolean} {
return this.$refs.form as Vue &{validate: () => boolean}
}
this.form.validate()
// 法三：
// 当这个组件在项目中被使用多次
//xxx.ts
export type VForm = Vue &{validate: () => boolean}
// component.tsx
import VForm
public get form(): VForm{
return this.$refs.form as VForm
}
this.$refs return Vue | Element | Vue[] | Element[], We cast it to Vue because v-formis a Vue instance(component) and not an Element
- v-html无效，改用domPropsInnerHTML
<p domPropsInnerHTML={childCategory.content}/>
- 原生事件
@click.native ---> nativeOnClick
@submit.prevent.native ---> nativeOnSubmit = {(e)=> {e.stopPropagation()}}
参考内容
