<template>
</template>
<script>
export default {
props: [],
data: function() {
return {
}
},
mounted() {
},
methods: {
getSomething: function() {
this.${DS}http.get('api/something').then((response) => {
this.booking = something.data
})
},
createSomething: function () {
this.${DS}http.post('api/something', this.guest).then((response) => {
})
},
updateSomething: function(id) {
this.${DS}http.put('api/something/' + id, this.guest).then((response) => {
})
},
patchSomething: function(id) {
this.${DS}http.patch('api/something', { selected_product: id } ).then((response) => {
})
},
deleteSomething: function (id) {
this.${DS}http.delete('api/guest/' + id).then((response) => {
})
}
}
}
</script>
<template>
<div>
<header-component/>
<div>this is template body</div>
<other-component/>
<a v-bind:href="url"></a>
<div v-if="1>2">
<h1>Hello</h1>
<div v-else>
<h1>Goodbye</h2>
</div>
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.prevent="counter += 1">Add 1</button>
<img v-attr="src: imageLink">
</div>
</template>
<style>
body{
background-color:#ff0000;
}
</style>
<script>
import HeaderComponent from './components/header.vue'
import OtherComponent from './components/other.vue'
export default{
data(){
return{
msg:'hello vue'
}
},
components:{
'other-component':OtherComponent,
HeaderComponent,
},
created: function() {
},
mounted: function () {
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
},
middlename: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
},
computed: {
},
methods: {
sampleFunction: function(params) {
var that = this;
},
sampleGet: function(params) {
this.$http.get('/url').then((response) => {
// all good
}, (response) => {
// bad
})
},
samplePost: function(params) {
data = {};
data.url = this.url;
this.$http.post('/url',data).then((response) => {
// all good
}, (response) => {
// bad
})
}
}
}
</script>
<script>
beforeRouteEnter(route, redirect, next) {
next(vm => {
vm.get();
console.log('In page 1')
})
},
</script>
Note you have to make sure $ dollar signs are excaped using
${DS}
more
Add in Preferences>Editor:
Now when you create a new file you will have this template ready to edit :)