Mais conteúdo relacionado Semelhante a Vue business first (20) 3. Agenda
• What is Vue?
• Why Vue became a popular?
• How to start with Vue?
• How component looks like?
• Events handling with Vue?
• Data-philosophy of Vue
• Vuex as official state manager
• Vue Router
• Weak sides of Vue
• Extra features of Vue
3/64
4. What is Vue?
• Component based framework
• Reactive (ES5)
• Virtual DOM (Snabbdom)
• Used in Alibaba/Taobao/Gitlab
4/64
5. Advantages of Vue
• Fast (~2x faster than React/Angular/Polymer)
• Small size (20kb min+gzip)
• Low feature delivery time
• Incrementaly adoptable
5/64
8. Why Vue became popular
• Learning curve looks smooth in Vue
• Component approach good as mental model
• Corporate support (Alibaba/Taobao)
8/64
11. Start with npm
$ npm install –g vue-cli
$ vue init webpack projectName
# choose some to configuritaons for project
$ cd projectName
$ npm install
$ npm run dev
11
15. Script
<script>
export default {
data () {
return {
name: ‘Lviv’,
isBold: false
}
},
methods: {
toggleMessageBoldness() {
this.isBold = !this.isBold;
}
}
}
</script>
15/64
Template
Script
Style
19. Preprocessors in Vue
<template lang=“pug”>
div
p.greeting Hello, {{ name }}
</template>
<style lang=“scss”>
$primary-color: red;
.greeting {
color: $primary-color;
}
</style>
19/64
28. Component state is reactive
export default {
data () {
return {
transactions: []
};
},
methods: {
loadTransactions () {
api.loadTransactions().then(transactions => {
this.transactions = transactions;
});
}
}
} 28/64
29. Watch changes
export default {
data () {
return {
transactionsCounter: 0
};
},
watch: {
transactionsCounter (newValue) {
// send to marketingTool metrics new value
}
}
} 29/64
30. Computed props
export default {
data () {
return {
firstName: ‘John’,
lastName: ‘Doe’,
alias: ‘Gun’
};
},
computed: {
formattedUserName() {
return this.firstName + this.firstName && this.alias ? ` (${this.alias)`:
this.alias + (this.firstName || this.alias) && this.lastName ?
`${lastName}`: this.lastName;
}
}
}
30/64
33. Props down from parent to child
<template>
<div>
<p>{{ selectedValue }}</p>
<custom-select :value=“selectedValue”
:options=“parentsOptions”>
</div>
</template>
33/64
34. Events up from Child to Parent
<script>
export default {
props: {
value: {
type: Array
}
},
methods: {
pickValue (newSelectedValue) {
this.$emit(‘change’, newSelectedValue);
}
}
}
</script>
34/64
35. Handle changes
<template>
<div>
<p>{{ selectedValue }}</p>
<custom-select @change=“handleChangeSelect” :value=“selectedValue”
:options=“parentsOptions”>
</div>
</template>
<script>
export default {
methods: {
handleChangeSelect (newSelectedValue) {
this.selectedValue = newSelectedValue;
}
}
}
</script>
35/64
36. Two way data-binding with .sync
<template>
<div>
<p>{{ selectedValue }}</p>
<custom-select :value.sync=“selectedValue”
:options=“parentsOptions”>
</div>
</template>
36
37. Update value from Child
<script>
export default {
props: {
value: {
type: Array
}
},
methods: {
pickValue (valueThatUserPickedInSelect) {
this.$emit(‘update:value’, valueThatUserPickedInSelect);
}
}
}
</script>
37/64
44. Route example
Import Tasks from ‘src/components/Tasks’
Import TaskById from ‘src/components/TaskById’
export default new Router({
… ,
routes: [{
path: '/tasks',
name: ‘Task',
component: Tasks,
children: [{
name: TaskByID',
path: ‘:id',
component: TaskById
}]
}]
}) 44/64
48. Vue supports JSX
<script>
export default {
data () {
name: ‘John Doe’
},
render(createElement) {
return createElement(<h1>Hello, { this.name }</h1>);
}
}
</script>
48/64
49. Dont forget plugin
{
test: /.vue$/,
exclude: [/node_modules/],
use: [{
loader: ‘babel-loader’,
options: { presets: [‘es2015’], plugins: [‘transfrom-vue-jsx’] }
}]
}
49/64
50. Typescript support
<template>
<h1 @click=“hello”> Hello {{ name }}</h1>
</template>
<script>
Import { Vue, Component } from ‘av-ts’
@Component
export default class App extends Vue {
name: string = ‘John Doe’
hello(): void { console.log(‘name’, this.name) }
}
</script>
50/64
51. IDE supports Vue
• Visual studio code has full Vue support
• JetBrains products has plugins for Vue
• Sublime/Atom has plugins for Vue
51/64
52. Weak parts of Vue
• Best practices
• Styles with preprocessors
• Plugins implemented by chinese comminuty (in very rare
situations)
52/64
58. Conclusion
• Vue is production ready
• Ecosystem became more and more stable
• Easy to learn
• Fast without optimizations
• Low feature delivery time
58/64
61. Thanks for attention
Vitalii Ratyshyi
Email: v.ratyshnij@gmail.com
SkypeId: misreadable
Official Russian Vue telegram-chat: @vuejs_ru
61/64
