Introduction

Vue.js is a front-end framework for building interactive web pages — the same job as React, with a gentler learning curve. Its core promise is reactivity: change your data, and the page updates itself, without you touching the DOM by hand.

If you know basic HTML and JavaScript, you can build something real in Vue within an afternoon.

Your first reactive value

Vue's ref wraps a value so Vue can watch it. Change the value, and anything displaying it updates automatically.

<script setup > import { ref } from ' vue '

const count = ref ( 0 )

function increment () { count . value ++ } </script>

<template> <button @ click= "increment" > Clicked {{ count }} times </button> </template>

Enter fullscreen mode

Exit fullscreen mode

Two things to notice. First, count.value in the script, but just count in the template — Vue unwraps refs in templates for you. Second, @click is Vue's shorthand for listening to a click event.…