Using vue.js in existing websites, the easy way.

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>

Just create cool things on the internet

Vue.component('todo-component', {
template: '#todo-component',
data: function () {
return {
items: [
{
id: 'item-1',
title: 'Checkout vue',
completed: false
}, {
id: 'item-2',
title: 'Use this stuff!!',
completed: false
}
],
newItem: ''

};
},
methods: {
addItem: function () {
if (this.newItem) {
var item = {
id: Math.random(0, 10000),
title: this.newItem,
completed: false
};

this.items.push(item);
this.newItem = '';
}
}
}
});
var app = new Vue({
el: '#vue-app'
});
<div class="container" id="vue-app"></div>
<script type="x-template" id="todo-component">
<div>
<h3>Example todo component</h3>
<div v-for="item in items" class="form-group" :class="{'has-success': item.completed}">
<div class="input-group">
<div class="input-group-addon">
<input type="checkbox" v-model="item.completed">
</div>
<input type="text" v-model="item.title" class="form-control">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" v-model="newItem" class="form-control">
<div class="input-group-btn">
<button class="btn" :class="{'btn-primary': newItem}" @click="addItem()">add!</button>
</div>
</div>
</div>
</div>
</script>

--

--

--

Creating awesome things on the internet

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Helmet + Segment.io

It’s getting DEEP!

Implementing serverside rendering

Xamarin Tips: Convert string to a Page in Xamarin.Forms

7 Negative Attitudes of Hopeless Developers

Isomorphic React WebApp with NodeJS, Express, Redux and Webpack — Part 2 Redux

Network Layer : Extract your API to a client side library using redux-saga

Handling “loading” states globally in @ngrx/store

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
disjfa

disjfa

Creating awesome things on the internet

More from Medium

Vue — Computed Properties — Ch 04

PixelSnap 2 for Mac | Made with Vue JS

PixelSnap2 | Made with Vue JS | Made with Javascript Club

How to filter todo items? Vue 3 Composition API

How to Use Toggle Buttons in Vuetify