Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</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>
</body>
</html>
 
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);
})
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers