VueJS Introduction

Vue.JSThe progressive JavaScript Framework

Yet Another JS Framework
Or Is it?

David Ličen,  
Freelance Front-End Developer
 
Twitter: @davision 
Blog: davidlicen.com

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

History
• Started in late 2013
• First release Feb. 2014 (v0.6)
• v1.0.0 Evangelion Oct. 2015
• Latest release v2.3.3

VueJS gets into in Laravel 5.3
Optional

Today (on 24.5.2017)
vs. AngularJS
vs. React

Today (on 24.5.2017)
vs. Ruby ;)

Today (on 24.5.2017)
562K downloads/month

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

How does it work?
Technical stuff

How it works?
• Inspired by Model–view–
viewmodel (MVVM)
architectural pattern
• Uses Declarative Rendering
• Dependency tracking system
with getter/setters

The Vue Instance
• Vue Constructor function
• Properties and Methods (data / events)
• Instance Lifecycle Hooks
var vm = new Vue({
// options
})

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
})

Let see some code examples
Practical stuff

<!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";

Directives
v-bind

<a v-bind:href="url"></a>

<a :href="url"></a> 
v-on

<a v-on:click="doSomething"></a>

<a @click="doSomething"></a>

<div :class="{
'active': isActive,
'text-danger': HasError }
">
</div> 
data: {
isActive: true,
hasError: false
}
Binding HTML Classes

<div id="events">
<button v-on:click="counter += 1”>
Add +1</button>
<p>You clicked {{ counter }}</p>
<button @click=“say(‘what')">
Say what</button>
</div> 
new Vue ({
el: '#events',
data: {
counter: 0
},
methods: {
say: function (message) {
alert(message)
}
}
})
Event handling

<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>
Conditional Rendering

<ul id=“list">
<li v-for="(item, index) in items">
{{ parentMessage }} -
{{ index }} -
{{ item.message }}
</li>
</ul> 
new Vue({
el: '#list',
data: {
parentMessage: ‘Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
Loops

<a @click.stop="oThis"></a>

<form @submit.prevent="onSubmit"></form>

<a @click.stop.prevent="doThat"></a>

<input @keyup.enter="submit">
Event & Key Modiﬁers

Etc..
https://vuejs.org/v2/guide/

Single File Components
Introducing
Made by Webpack (or Browserify)

Now we get
• Complete syntax highlighting
• CommonJS modules
• Component-scoped CSS
• Use of preprocessors (Pug, Babel, Stylus, Sass…)

new Vue ({
el: "#selector",
data: {
message: 'Hello'
}
}) 
export default {
data () {
return {
message: 'Hello'
}
}
}
Mind the difference

Let’s do some 💩
and build our first VueJS app

? 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!

cd my-project
npm install
npm run dev
yarn anyone?

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…

Sauce!
github.com/vuejs/awesome-vue

WROCŁAW, POLAND • JUNE 21-23, 2017

VueJS Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to VueJS Introduction

Similar to VueJS Introduction (20)

Recently uploaded

Recently uploaded (20)

VueJS Introduction