Vue

Vue

Notes based in part on the Framework Field Guide.

Components in Vue are named based on the filename they are in.

Properties

Properties, named props, can be defined on components.

defineProps(['my_value'])

The type of a prop can be defined.

const props = defineProps({
  foo: { type: String, required: true },
})

The value is set as an attribute on the component.

<MyComponent my_value="test"/>

Reactivity

For changes to values to be reflected automatically in the UI, the values need to be wrapped with ref(). There are no changes necessary in the template.

const dateStr = ref(formatDate(new Date()));

When modifying the value, .value needs to be changed.

dateStr.value = formatDate(tomorrow);

Attributes of html elements can also be bound to a value. v-bind can be omitted.

<span v-bind:aria-label="labelText"></span>
<span :aria-label="labelText"></span>

v-on is used to bind to events. The @ symbol can be used as a shortform.

<button v-on:click="selectFile()"></button>
<button @click="selectFile()"></button>