Skip to content

Instantly share code, notes, and snippets.

@mike-casas

mike-casas/index.html

Last active September 1, 2017 19:13
Show Gist options
  • Save mike-casas/fb0addc36e996954d38ca04751e25fe0 to your computer and use it in GitHub Desktop.
Save mike-casas/fb0addc36e996954d38ca04751e25fe0 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/zopiximebi sample vuejs
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.change-color {
color: red;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div :data='message' id="app">
</div>
<template id='temp'>
<div>
<p v-bind:class="{'change-color': changeColor}">{{message}}</p>
<ul v-if='bandera'>
<li v-for="item in todos">
{{ item.text }}
</li>
</ul>
<input v-uppercase='inputmsg' v-model='inputmsg'>
{{inputmsg}}
<input type='checkbox' id='d1' value='d1' v-model='checkinput'>
<input type='checkbox' id='d2' value='d2' v-model='checkinput'>
<input type='checkbox' id='d3' value='d3' v-model='checkinput'>
<input v-model="msg" >
{{msg}}
<input v-model="age" type="number">
{{age}}
<button @click='addTodo' >change</button>
<ul>
<li is='todo' :title='value' v-for="value in object">
</li>
</ul>
<input
v-model="newTodoText"
v-on:keyup.enter="addNewTodo"
placeholder="Add a todo"
>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos1"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="removeTodo(index)"
></li>
</ul>
</div>
</template>
<script id="jsbin-javascript">
var simpleMixin={
created: function(){
this.sayHello()
},
methods: {
sayHello: function(){
console.log('hola nunca iba a mostrar')
}
}
}
Vue.directive('uppercase', function(el, binding){
el.value= binding.value.toUpperCase()
}
)
Vue.mixin({
created: function () {
var myOption = this.$options.data
if (myOption) {
//console.log(myOption)
}
}
})
Vue.component('todo', {
template: '<li>{{title}}</li>',
props: ['title']
})
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
props: ['title']
})
const app2 = new Vue({
el: '#app',
mixins: [simpleMixin],
template:'#temp',
data: {
message: 'hello world',
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
],
bandera: true,
inputmsg:'',
checkinput:[],
msg:'',
age:'',
changeColor: true,
object: {
firstName: 'John',
lastName: 'Doe',
age: 30,
},
newTodoText: '',
todos1: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addTodo: function () {
this.message = 'nene'
},
addNewTodo: function () {
this.todos1.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
},
removeTodo: function(index) {
this.todos1.splice(index, 1)
}
}
})
app2.$watch('inputmsg', (newVal, oldVal) => {
console.log(oldVal);
})
</script>
<script id="jsbin-source-css" type="text/css">.change-color {
color: red;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var simpleMixin={
created: function(){
this.sayHello()
},
methods: {
sayHello: function(){
console.log('hola nunca iba a mostrar')
}
}
}
Vue.directive('uppercase', function(el, binding){
el.value= binding.value.toUpperCase()
}
)
Vue.mixin({
created: function () {
var myOption = this.$options.data
if (myOption) {
//console.log(myOption)
}
}
})
Vue.component('todo', {
template: '<li>{{title}}</li>',
props: ['title']
})
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
props: ['title']
})
const app2 = new Vue({
el: '#app',
mixins: [simpleMixin],
template:'#temp',
data: {
message: 'hello world',
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
],
bandera: true,
inputmsg:'',
checkinput:[],
msg:'',
age:'',
changeColor: true,
object: {
firstName: 'John',
lastName: 'Doe',
age: 30,
},
newTodoText: '',
todos1: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addTodo: function () {
this.message = 'nene'
},
addNewTodo: function () {
this.todos1.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
},
removeTodo: function(index) {
this.todos1.splice(index, 1)
}
}
})
app2.$watch('inputmsg', (newVal, oldVal) => {
console.log(oldVal);
})</script></body>
</html>
Raw
jsbin.zopiximebi.css
.change-color {
color: red;
}
Raw
jsbin.zopiximebi.js
var simpleMixin={
created: function(){
this.sayHello()
},
methods: {
sayHello: function(){
console.log('hola nunca iba a mostrar')
}
}
}
Vue.directive('uppercase', function(el, binding){
el.value= binding.value.toUpperCase()
}
)
Vue.mixin({
created: function () {
var myOption = this.$options.data
if (myOption) {
//console.log(myOption)
}
}
})
Vue.component('todo', {
template: '<li>{{title}}</li>',
props: ['title']
})
Vue.component('todo-item', {
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
props: ['title']
})
const app2 = new Vue({
el: '#app',
mixins: [simpleMixin],
template:'#temp',
data: {
message: 'hello world',
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
],
bandera: true,
inputmsg:'',
checkinput:[],
msg:'',
age:'',
changeColor: true,
object: {
firstName: 'John',
lastName: 'Doe',
age: 30,
},
newTodoText: '',
todos1: [
{
id: 1,
title: 'Do the dishes',
},
{
id: 2,
title: 'Take out the trash',
},
{
id: 3,
title: 'Mow the lawn'
}
],
nextTodoId: 4
},
methods: {
addTodo: function () {
this.message = 'nene'
},
addNewTodo: function () {
this.todos1.push({
id: this.nextTodoId++,
title: this.newTodoText
})
this.newTodoText = ''
},
removeTodo: function(index) {
this.todos1.splice(index, 1)
}
}
})
app2.$watch('inputmsg', (newVal, oldVal) => {
console.log(oldVal);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment