evanyou.me
Creator of Laracasts.com
Creator of Laravel.com
Current React learning status: overwhelmed. Learning @vuejs because it looks easy and has pretty website.
Template
ViewModel
End Result
new Vue({
el: '<jQueryStyleSelector>',
template: '<id || inline template>',
data: {
props: 'that are visible in templates',
they: 'can be referenced from methods with this.propName'
first_name: "John",
last_name: "Doe"
},
computed: {
full_name: function(){
return this.first_name + this.last_name; //John Doe
}
},
methods: {
// lifecycle hooks
created: function(){},
beforeCompile: function(){},
ready: function(){},
attached: function(){},
detached: function(){},
beforeDestroy: function(){},
destroyed: function(){},
customMethodsAlso: function(){
//here we have access to data, computed methods also
}
}
})
Can be used by other components or the main app in their templates
new Vue({
el: '.container'
template: `<div>
<profile-picture></profile-picture>
</div>`
})
ViewModel + Template
Profile Picture Component
Vue.component("profile-picture", {
template: "<img src='/pic.png' alt="Picture" />";
});
<div>
<img src="/pic.png" alt="Picture" />
</div>
Can be used to handle template filtering and structure
Vue.directive('my-directive', {
bind: function () {
// do preparation work
// e.g. add event listeners or expensive stuff
// that needs to be run only once
},
update: function (newValue, oldValue) {
// do something based on the updated value
// this will also be called for the initial value
},
unbind: function () {
// do clean up work
// e.g. remove event listeners added in bind()
}
})
<div v-my-directive="someValue"></div>
Arrays or objects
<ul>
<li v-for="todo in todos | filterBy true in completed">
</ul>
Used in templates with the pipe (|) symbol
Build in filters
// register
Vue.filter('my-filter', function (value) {
// return processed value
})
Use in templates with | myFilter arg1 arg2
Get in methods with
var myFilter = Vue.filter('my-filter')
new Vue({
el: '#container',
data: {
name: "John",
last: "Doe"
}
})
Object.defineProperty(ViewInstance, 'name', {
get: function() { return bValue; },
set: function(newValue) { bValue = newValue; },
});
Cannot detect array or object nested changes
Solution
var vm = new Vue({
data: {
a: {
b: 1
}
}
})
// set an existing path
vm.$set('a.b', 2)
vm.a.b // -> 2
// set a non-existent path, will force digest
vm.$set('c', 3)
vm.c // ->
@pixel_grid