6. The Founder
Evan You
• Previously worked as a Creative
Technologist at Google
• Core Dev at Meteor
• From 2016 working full-time on
Vue.JS framework.
—> patreon.com/evanyou
7. History
• Started in late 2013
• First release Feb. 2014 (v0.6)
• v1.0.0 Evangelion Oct. 2015
• Latest release v2.3.3
13. Who is using it?
• GitLab
https://about.gitlab.com/2016/10/20/why-we-chose-vue/
• Weex
https://weex.apache.org/ Maintained by Alibaba Group
• Baidu
Chinese search engine
15. How it works?
• Inspired by Model–view–
viewmodel (MVVM)
architectural pattern
• Uses Declarative Rendering
• Dependency tracking system
with getter/setters
16. The Vue Instance
• Vue Constructor function
• Properties and Methods (data / events)
• Instance Lifecycle Hooks
var vm = new Vue({
// options
})
19. var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` points to the vm instance
console.log('a is: ' + this.a)
}
})
vm.$watch('a', function (newVal, oldVal) {
// this callback will be called when `vm.a` changes
})
21. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="vue.js"></script>
</head>
<body>
<div id="selector">
<h1>{{ message }}</h1>
</div>
</body>
</html>
// Define a plain JSON
// object to hold the data
var data = {
message: "Hello"
};
// Instantiate Vue on an element
new Vue ({
el: "#selector",
data: data
})
// Works since getters/setters
// are now proxied
data.message = "Hi";
27. <!-- the click event's propagation will be stopped -->
<a @click.stop="oThis"></a>
<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>
<!-- also available .tab, .delete, .esc, .space, ...-->
<input @keyup.enter="submit">
Event & Key Modifiers
36. ? Project name vue-webpack
? Project description A Vue.js project
? Author davidlicen <david@artnetik.si>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Airbnb
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
We’re packed!
43. Some say…
• Vue initiated by a single developer
• The community is not yet as large as the ones of
Angular or React
• Currently, there’s not so many libraries for Vue…