Introduction
Vue.js est un framework frontal très populaire qui permet de créer rapidement des applications interactives d'une seule page. vue-property-decorator est une bibliothèque de décorateurs pour Vue.js qui peut nous aider à écrire plus facilement les composants Vue.js. Expliquons en détail l'utilisation de vue-property-decorator.
vue-class-component est la bibliothèque officielle de vue. Sa fonction est d'écrire des composants sous forme de classes. Cette méthode d'écriture peut rendre la structure js du fichier .vue plus plate et permettre aux composants vue d'utiliser des fonctionnalités avancées telles que l'héritage et mélange.
Actuellement, l'intégration de 2.x et TS nécessite généralement l'écriture de composants basés sur les classes basées sur vue-class-component.
Le site officiel de vue en anglais recommande un package appelé vue-class-component, qui peut écrire des composants vue en mode classe. vue-class-component (ci-après dénommé Component) apporte beaucoup de commodité :
documentation officielle : https://class-component.vuejs.org/
vue-property-decorator est issu de la communauté.
Le site officiel https://www.npmjs.com/package/vue-property-decorator
vue-property-decorator nous permet d'écrire la syntaxe TypeScript dans les composants vue.
vue-property-decorator s'appuie profondément sur vue-class-component et étend davantage d'opérateurs @Prop @Model @Watch @Provide @Inject @Emit, etc. On
peut dire que vue-property-decorator est une super version de vue-class -component. Pendant
le développement normal, il vous suffit d'utiliser les opérateurs fournis dans vue-property-decorator sans avoir à importer vue et composant depuis vue-class-componen.
Un décorateur est un type spécial de déclaration qui peut être attaché à une déclaration de classe, une méthode, un accesseur, une propriété ou un paramètre. Le décorateur utilise la forme @expression. Une fois l'expression évaluée, il doit s'agir d'une fonction. Elle sera appelée au moment de l'exécution et les informations de déclaration décorées sont transmises en tant que paramètre.
2.Installation
1. Installation originale du projet
npm i -S vue-class-component
npm i -S vue-property-decorator
2. Utilisez vue-cli pour créer un nouveau projet
vue create hello-world
sélectionnez "Sélectionner manuellement les fonctionnalités" pour sélectionner manuellement les fonctionnalités,
cochez TypeScript (car vous devez utiliser la syntaxe du décorateur)
et cochez "Utiliser la syntaxe des composants de style classe ?"
3. Utiliser
1. Méthode d'écriture de base
La méthode d'écriture du modèle et du CSS reste inchangée, mais la méthode d'écriture en script doit être prise en compte.
<script lang='ts'>
import {Component, Vue} from vue-property-decorator;
@Component
export default class App extends Vue {
};
</script>
lang="ts": Le script déclare que la langue actuelle est ts
@Component : Indique que cette classe est un composant vue
Nom du composant de l'application
classe par défaut d'exportation Le test étend Vue : export La classe de composant actuelle hérite de vue
2、@component
@Component({}) peut déclarer des composants, des filtres, des directives et d'autres options de vue qui ne fournissent pas de décorateurs. Il peut également déclarer des fonctions calculées, de surveillance, de garde de route (beforeRouteEnter, beforeRouteLeave), etc.
Même s'il n'y a pas de composant, @Component ne peut pas être omis, sinon une erreur sera signalée.
<template>
<div>
<componentA></componentA>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { componentA } from "@/components";
@Component({
//组件
components: {
componentA,
},
})
export default class HelloWorld extends Vue {
}
</script>
3. Attribut de données
L'initialiseur d'attribut de données peut être déclaré comme attribut de classe.
<template>
<div>{
{ message }}</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
// 即使没有组件也不能省略@Component
@Component({})
export default class HelloWorld extends Vue {
// 定义的变量
message: string = "Hello World!";
}
</script>
4. Attribut Méthodes
Les méthodes des composants peuvent être déclarées directement comme méthodes prototypes de la classe :
<template>
<button v-on:click="hello">Click</button>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({})
export default class HelloWorld extends Vue {
// 方法
hello() {
console.log("Hello World!");
}
}
</script>
5. Propriétés calculées calculées
Les propriétés calculées peuvent être déclarées comme getters/setters de propriétés de classe :
pour les propriétés calculées dans Vue, il suffit de définir le nom de la propriété calculée en tant que fonction et d'ajouter le mot-clé get avant la fonction.
<template>
<input v-model="name" />
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({})
export default class HelloWorld extends Vue {
// 定义的变量
firstName: string = "John";
lastName: string = "Doe";
// 计算属性
get name() {
return this.firstName + " " + this.lastName;
}
// 计算属性
set name(value) {
const splitted = value.split(" ");
this.firstName = splitted[0];
this.lastName = splitted[1] || "";
}
}
</script>
6、@Regarder
@Watch est très simple à utiliser. Il accepte le premier paramètre comme nom d'attribut à surveiller. Le deuxième attribut est un objet facultatif
{immediate?: boolean, deep?: boolean}. Le premier indique s'il faut appeler la fonction de rappel. immédiatement après le début de la surveillance. Deux indiquent s'il faut appeler la fonction de rappel lorsque les propriétés surveillées changent.
<template>
<button v-on:click="hello">Click</button>
</template>
<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
@Component({})
export default class HelloWorld extends Vue {
// 侦听器
@Watch("message", { immediate: true, deep: true })
onChangeValue(newVal: string, oldVal: string) {}
// 定义的变量
message: string = "Hello World!";
// 方法
hello() {
this.message = "This is an test page!";
}
}
</script>
7、@Prop
Le composant enfant reçoit le paramètre passé par le composant parent.
@Prop accepte un paramètre, qui peut être une variable de type, un objet ou un tableau. Le type accepté par @Prop, tel que Number, est un type JavaScript et le type d'attribut défini plus tard est un type TypeScript // Les fonctions d'ordre supérieur acceptent les paramètres
. , compatible avec les méthodes d'écriture suivantes
@Prop(String) nom!: chaîne | indéfini;
@Prop([String, Number]) count!: string | nombre;
@Prop({type : Nombre, par défaut : 0, (obligatoire、validateur)}) age!: nombre;
@Prop() nom privé ! : chaîne ;
//父组件HomeView.vue
<template>
<div>
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue";
@Component({
//组件
components: {
HelloWorld,
},
})
export default class HomeView extends Vue {}
</script>
//子组件HelloWorld.vue
<template>
<div>
{
{ msg }}
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({})
export default class HelloWorld extends Vue {
// 父组件传递的参数
//这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值
@Prop({ type: String, default: "" }) msg!: string;
}
</script>
8、@Emit
@Emit utilisera la valeur de retour de la fonction de rappel comme deuxième paramètre. Si la valeur de retour est un objet Promise, l'émission sera déclenchée après la résolution de la promesse.
@Emit('del') private delEmit(e: MouseEvent){}
@Emit()//L'omission des paramètres utilisera le nom de la fonction de rappel et le convertira en trait de soulignement @add-data
addData(data: any){return '' ; }//S'il n'y a pas de retour ici, utilisez le paramètre de fonction data
//父组件HomeView.vue
<template>
<div>
<HelloWorld @editHandleEmit="editHandle" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue";
@Component({
//组件
components: {
HelloWorld,
},
})
export default class HomeView extends Vue {
// 方法
editHandle(row: any) {
console.log(row);
}
}
</script>
//子组件HelloWorld.vue
<template>
<div>
<button v-on:click="editHandle">Click</button>
</div>
</template>
<script lang="ts">
import { Component, Vue, Emit } from "vue-property-decorator";
@Component({})
export default class HelloWorld extends Vue {
// 定义的变量
count: number = 0;
// Emit方法
@Emit("editHandleEmit")
private editHandle() {
return this.count;
}
}
</script>
9、Mixins
Les composants de la classe Vue fournissent des fonctions auxiliaires de mixins pour utiliser les mixins à la manière d'une classe. En utilisant des assistants mixins, TypeScript peut déduire des types mixin et en hériter sur les types de composants.
Remarque : tous les mixins doivent être déclarés en tant que composants de classe.
// mixins.ts
import { Vue, Component } from 'vue-property-decorator';
//定义vue/type/vue模块
declare module 'vue/types/vue' {
interface Vue {
value: string;
}
}
@Component
export default class myMixins extends Vue {
// 定义的变量
value: string = 'Hello'
}
//页面HelloWorld.vue
import { Vue, Component, Prop } from 'vue-property-decorator';
import myMixins from './mixins';
@Component({
//混入
mixins: [myMixins]
})
export default class myComponent extends Vue {
// 生命周期
created() {
console.log(this.value) // => Hello
}
}
Résumer
- Les méthodes et les hooks peuvent être directement écrits en tant que méthodes de classe.
- L'attribut calculé peut être obtenu directement via get
- Les données d'initialisation peuvent être déclarées comme attribut de la classe
- Tout le reste peut être placé dans le décorateur de composants