[NativeScript-Vue Class Components] Cheatsheet for Nativescript-Vue class component syntax #nativescript-vue #vuejs #cheatsheet

nativescript-vue_class_components.md

Input properties

Consider the following component :

<template>

	<Label :text="msg"/>

</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class MyComp extends Vue {

  	@Prop() private msg: string;
  
}
</script>

It will be used as :

<template>

	<MyComp msg="Hello World !"/>

</template>

Data

<template>

    <Label text="First Name"/>
	<TextField v-model="firstName"/>

</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class PersonClassComponent extends Vue {

  	firstName = "John";
  
}
</script>

Watch

<template>

    <Label text="First Name"/>
    <TextField v-model="firstName"/>

</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class PersonClassComponent extends Vue {
  
  	firstName = "John";

  	@Watch("firstName")
  	onFirstNameChanged() {
    	console.log('First name changed !');
  	}

}
</script>

Computed

<template>

	<Label text="Full Name"/>
    <Label :text="fullName"/>

</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class PersonClassComponent extends Vue {

	firstName = "John";
	lastName = "Doe";

	get fullName() {
		return `${this.firstName} ${this.lastName}`;
  	}

}
</script>

Methods

<template>

    <Button text="SPEAK" @tap="speak"/>
    
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class PersonClassComponent extends Vue {

  	speak() {
    	alert("This is your captain speaking !");
  	}
  
}
</script>