<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<p>{{ title }}</p>
</div>
new Vue({
el: "#app",
data: {
title: "Hello World!"
}
});
Vue
instances are at the core of every Vue app, as they control their own HTML template rendered to the screen.
All the code is encapsulated in the component.
Output - HTML
<template>
<div class="user">
<h1>{{ user.name }}</h1>
</div>
</template>
Functionality - Javascript
A default object is exported i.e. component with a name of "User". The data()
method returns the state of the component.
<script>
export default {
name: "User",
data() {
return {
user: { name: "Foo" }
}
}
}
</script>
Style - CSS
<style scoped>
h1 {
font-size: 2 rem;
}
</style>
The main page served is index.html
located in the public
folder.
The entry point for a vue app is main.js
, located in src
. There we import the Vue
app object (where we mount the instance to the index.html
), and the App
component.
sudo npm i -g vue
vue --version
The framework can also be referenced with a CDN.
Qucik SPA scaffolding. It provides build setups for a modern frontend workflow, with hot-reload, lint-on-save, and production-ready builds.
vue create app-name
cd app-name
nom run serve
Chrome extension for debugging: Vue.js Devtools
VS Code Syntax highlighting: Vetur
Installing it overwrites the App.vue
files
State management library similar to Redux.