Vue.js
Created by Evan You
evanyou.me
What is Vue.js
- 一个构建数据驱动的 web 界面的库
- 目标：响应的数据绑定、可组合的视图组件
Is the holy place between Angular and React
Why so much hype?
- Simple API
- Easy to get started with
- Combined with vue-router can create nice SPA's
Plus the Laravel Community
Creator of Laracasts.com
@taylorotwel
Creator of Laravel.com
Current React learning status: overwhelmed. Learning @vuejs because it looks easy and has pretty website.
Enough with the intro already
Vue.js
Simple Vue.js App
Template
ViewModel
End Result
Main Vue.js Concepts
- Constructors
- Components
- Directives
- Filters
- Transitions
Constructor
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
}
}
})A component is a vue instance without an element declared
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>A directive is a component without an element and template
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>Build in directives
- v-text (Updates the element’s textContent)
- v-html (Updates the element’s innerHTML
- v-if (Conditionally render the element)
- v-show (oggle’s the element’s display CSS property)
- v-else (Denote the “else block” for v-if and v-show
- v-for (Loop throuth an array of object)
- v-on (Used for events DOM or custom)
- v-bind (Bind html attribute)
- v-model (Create a two-way binding on a form input element)
- v-ref (Create ref to template element)
- v-el (Create reference to DOM element)
- v-pre (Dont evaluate contents)
- v-cloak (hide element until fully parsed)
Filters are used to filter looping objects in general
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
Creating a custom Filter
// 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')
Reactivity with Object.defineProperty
new Vue({
el: '#container',
data: {
name: "John",
last: "Doe"
}
})Object.defineProperty(ViewInstance, 'name', {
get: function() { return bValue; },
set: function(newValue) { bValue = newValue; },
});Caveats
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 // ->Demo Time
Now what?
- Vue.js API Docs
- Vue-router (https://github.com/vuejs/vue-router)
- Vuex (https://github.com/vuejs/vuex)
- Awesome Vue (https://github.com/vuejs/awesome-vue)
- Vue-validator (https://github.com/vuejs/vue-validator)
Thank you
@pixel_grid
copy Vue.js 和 Vuex 的实践
By helinjiang
