Vuejs-Cheatsheet
๐ Hello Vue <!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return { message: 'Hello Vue 3!' }
}
}).mount('#app')
</script>
</body>
</html>
๐ก Tip: Vue 3 uses createApp() instead of the global new Vue() constructor. ๐ฆ Data & Methods <div id="app">
<p>{{ count }}</p>
<button @click="increment">+1</button>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
}).mount('#app')
</script>
๐ก Tip: All reactive data must be returned from the data() function. ๐ง Directives <div v-if="isVisible">Visible!<…