# Vue
# CDN with HTML File
Use this boilerplate for your standard HTML page. It works well when you need to display data from a simple JSON file without using routes.
<div id="app">
{{ message }}
</div>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
computed: {
reversedMessageComputed: function () {
// this should always return something
}
},
methods: {
reverseMessageMethod: function () {
// no need to return anything
}
},
watch: {
dataName: function() {
// dataName is the key in the data object that is watching for a change
}
}
})
</script>
Use the following if you are ready for production
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
# *.vue Page Templates
The template for the .vue
files are written slightly differently.
<template>
<div id="app">
<Navbar />
<!-- You must use a parent element within the template element -->
</div>
</template>
<script>
import Navbar from './Navbar'
export default {
name: 'app',
components: {
Navbar
},
data() {
return {
message: 'Hello World'
}
}
}
</script>
<style lang="scss" scoped>
</style>
# Basic Commands
v-bind:class="something"
(:class="something"
)v-on:click="someting"
(@click="something"
)v-model="something"
v-if="something"
,v-else-if="something"
,v-else="something"
v-for="thing in things" :key="thing.id"
,v-for="(thing, index) in things" :key="index"
- For more details, see the Vue.js Essentials Cheat Sheet by Vue Mastery.
# Props and Emits
A note about props and emits, they only work if passing data to a componenet. It will not work if you are trying to send the prop to another page. Here is an example of how you would use a prop:
<template>
<div class="container">
<h1>Nuxt Sandbox</h1>
<UserProp :user="individual">Passing a prop</UserProp>
</div>
</template>
<script>
import UserProp from '@/components/UserProp'
export default {
components: {
UserProp
},
data() {
return {
individual: {
name: 'Brian',
username: 'beaker',
email: 'brian@mail.com',
img: 'https://i.pravatar.cc/300'
}
}
}
}
</script>
// UserProp component
export default {
props: ['user']
}
# Axios with Vue
Axios is a library that handles asynchronous requests. This is much more backwards compatable than using fetch()
, but it does require loading it through either NPM or as a CDN. For a full example on how to use Axios with Vue, check out the Vue Cookbook.
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
Axios should be loaded in the created()
lifecycle hook. Use the following code to get started with Axios and Vue:
<script>
new Vue({
el: '#app',
data() {
return {
users: null,
loading: true
}
},
created() {
axios
.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
this.users = response.data
})
.catch(error => {
console.error(error)
})
.finally(() => this.loading = false)
}
})
</script>
Using Axios with a .vue
file looks essentially the same, however you need to import Axios to the page. Use the following code:
import axios from 'axios';
Vue CLI →