Vue.js

Experiments with Vue.j

by ischenkodv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.11.0/vue.min.js"></script>
<div id="root">
    
<my-title></my-title>

<ul id="xmen-list">
    <li v-repeat="characters">
        {{fields.name}}
    </li>
</ul>

<ul id="avengers-list">
    <li v-repeat="characters">
        {{fields.name}}
    </li>
</ul>

<div class="test">
    {{ myvar }}
</div>
    
    <div id="vtxt">
        <h3>v-text example</h3>
        <div v-text="message"></div>
    </div>

<my-list collection="xMen"></my-list>
  
<my-list collection="avengers"></my-list>

<button id="btn">Change value</button>
    
</div>

CSS

#vtxt {
    padding: 1em;
    border: 1px solid #eee;
    border-radius: 4px;
}
#vtxt h3 {
    padding-top: 0;
    margin-top: 0;
}
#vtxt div {
    font-style: italic;
}

JavaScript

Vue.component("my-title",{
  template: "<h1>{{title}}</h1>",
  ready : function() { 
    console.log("Ready!"); 
  },
  data : function () {
    return {
      title: "Hello World"
    }
  }
});

Vue.component("my-list",{
    paramAttributes: ['collection'], // permet d'utiliser des attributs <my-list collection="xMen"></my-list>
    template: [
      '<ul>',
      '   <li v-repeat="characters">',
      '       {{fields.name}}',
      '   </li>',
      '</ul>'
    ].join(''),
    ready : function() {
      this.$data = {
        characters:collections[this.collection] // modifier la propriété $data
      }
    },
    data : function () { // initialiser les données (facultatif)
      return {
        characters:[]
      }
    }
});

var Model = function (fields) {
    this.fields = fields
}

var collections = {
    xMen : [
      new Model({name: "Wolverine"}),
      new Model({name: "Colossus"}),
      new Model({name: "Cyclops"})
    ],
    avengers : [
      new Model({name: "Iron Man"}),
      new Model({name: "Captain America"}),
      new Model({name: "Thor"})
    ]
  }
var getListView = function(selector, collection) {
    return new Vue({
      el: selector,
      data: {
        characters: collection
      }
    })
}

getListView('#xmen-list', collections.xMen);
getListView('#avengers-list', collections.avengers);

var gView = new Vue({
    el: '.test',
    data: {
        myvar: 'YES!'
    }
});

document.querySelector('#btn').addEventListener('click', function() {
    var fields = collections.avengers[0].fields;
    fields.name = fields.name.toUpperCase();
    collections.xMen.push(new Model({name:"Tornado"}));
    gView.myvar = 'NO...';
});

var vtxt = new Vue({
    el: '#vtxt',
    data: {
        message: 'Foobar'
    }
});
new Vue({el: '#root'});

console.log(vtxt);