Skip to content

Instantly share code, notes, and snippets.

@vuejsdevelopers
vuejsdevelopers / component.js
Last active September 9, 2018 20:12
7 Ways To Define A Component Template in Vue.js - Snippet 01
Vue.component('my-checkbox', {
template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title">{{ title }}</div></div>`,
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
@vuejsdevelopers
vuejsdevelopers / component.js
Created May 4, 2017 07:46
7 Ways To Define A Component Template in Vue.js - Snippet 02
Vue.component('my-checkbox', {
template: `<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title">{{ title }}</div>
</div>`,
data() {
return {
checked: false,
title: 'Check me'
}
@vuejsdevelopers
vuejsdevelopers / component.js
Last active May 4, 2017 07:50
7 Ways To Define A Component Template in Vue.js - Snippet 03
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
@vuejsdevelopers
vuejsdevelopers / component.js
Created May 4, 2017 07:51
7 Ways To Define A Component Template in Vue.js - Snippet 04
Vue.component('my-checkbox', {
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
@vuejsdevelopers
vuejsdevelopers / component.js
Created May 4, 2017 07:53
7 Ways To Define A Component Template in Vue.js - Snippet 05
Vue.component('my-checkbox', {
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
@vuejsdevelopers
vuejsdevelopers / component.js
Created May 4, 2017 07:54
7 Ways To Define A Component Template in Vue.js - Snippet 06
Vue.component('my-checkbox', {
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
@vuejsdevelopers
vuejsdevelopers / component.vue
Created May 4, 2017 07:56
7 Ways To Define A Component Template in Vue.js - Snippet 07
<template>
<div class="checkbox-wrapper" @click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</template>
<script>
export default {
data() {
return {
@vuejsdevelopers
vuejsdevelopers / index.html
Created May 10, 2017 07:21
What I Learned About VueJS From Building A Chrome Extension - Snippet 01
<body>
<div id="app">
<div>{{ message }}</div>
</div>
</body>
@vuejsdevelopers
vuejsdevelopers / script.js
Created May 10, 2017 07:23
What I Learned About VueJS From Building A Chrome Extension - Snippet 02
new Vue({
template: `<div>{{ message }}</div>`
});
@vuejsdevelopers
vuejsdevelopers / index.html
Last active May 10, 2017 07:27
What I Learned About VueJS From Building A Chrome Extension - Snippet 03
<body>
<div id="app">
<div>{{ message }}</div>
</div>
</body>