Testing how components work in Vue.Js
Simple Example: https://jsfiddle.net/4v6khn77/
var Testing_Component = Vue.extend({ template: 'Hello World' }); var mainViewModel = new Vue({ el: '#myApp', components: { 'testing-component': Testing_Component } });
Component inside list Example: https://jsfiddle.net/3d91z7pe/
var Person_Component = Vue.extend({ template: ' <li style="color:{{ color }}">{{ foreName }} {{ lastName }}</li> ' }); var listOfPeople = [{ foreName: 'Wade', lastName: 'Wilson', color: 'red' }, { foreName: 'Peter', lastName: 'Parker', color: 'blue' }]; var mainViewModel = new Vue({ el: '#myApp', data: { peopleList: listOfPeople }, components: { 'person-component': Person_Component }, template: ' <ul><person-component v-repeat="peopleList"></person-component></ul> ' });