SlideShare a Scribd company logo
1
WHY VUE.JS?
“The Progressive JavaScript Framework”
Introduction to Vue.js
Jonathan Goode
2 . 1
WHAT IS VUE.JS?
Vue (pronounced /vjuː/, like view) is a progressive framework for
building user interfaces
The core library is focused on the view layer only
The library was created by who released v1 on 26
October 2015
The project is permanently backed by pledgers on
$7,572 (~£6,145) per month
Evan You
Patreon.com
2 . 2
WHO USES VUE?
Rank Site Detections
1st laravel.com 49,476
2nd laracasts.com 29,185
3rd gitlab.com 26,522
8th codeship.com 3,069
Detections by Wappalyzer in the last 7 days
INTERNATION ADOPTION
China: Alibaba and Baidu, Japan: Nintendo and UK:
Sainsbury's
2 . 3
USING VUE
Getting started with Vue.js is extremely easy
Its source code is very readable, and the documentation is the
only tutorial you will need
You don't need external libraries
You can use it with or without jQuery
You won't even need to install any plugins, though many are
available
2 . 4
USING VUE
Hooking Vue up to existing code is very straightforward
Vue makes no assumptions about your code
It really only assumes that your data will change
Real-life usage is as simple as the docs demonstrate it to
be
3 . 1
PERFORMANCE
Vue.js 2.0 was released on Sep 30 - current release is v2.0.3 - 16kb min+gzip
Based on , lower is better3rd party benchmark
3 . 2
VUE.JS 2.0
The rendering layer has been rewritten using a light-weight
Virtual DOM implementation forked from .
On top of that, Vue's template compiler is able to apply some
smart optimizations during compilation, such as analyzing and
hoisting static sub trees to avoid unnecessary diffing on re-
render.
The new rendering layer provides significant performance
improvements compared to v1, and makes Vue 2.0 one of the
fastest frameworks.
In addition, it requires minimal effort in terms of optimization
because Vue's reactivity system is able to precisely determine
components that need to be re-rendered in a large and complex
component tree.
snabbdom
4 . 1
VUE AND CONDITIONAL LOGIC
V‐IF / V‐ELSE
// JavaScript 
var example = new Vue({ 
    el:   '.example', 
    data: { cond: (1 > 0), }, // true 
}); 
<div class="example"> 
    <div v­if="cond">Yes</div> 
    <div v­else>No</div> 
</div>
4 . 2
V‐SHOW
// JavaScript 
var example = new Vue({ 
    el:   '.example', 
    data: { cond: (1 > 0), }, // true 
}); 
<!­­ HTML ­­> 
<div class="example"> 
    <div v­show="cond">Yes</div> 
    <div v­show="!cond">No</div> 
</div>
4 . 3
WITH A TEMPLATE
<!­­ HTML ­­> 
<template v­if="cond"> 
    <h1>Title</h1> 
    <p>Paragraph 1</p> 
    <p>Paragraph 2</p> 
</template> 
=
<!­­ HTML ­­> 
<h1>Title</h1> 
<p>Paragraph 1</p> 
<p>Paragraph 2</p> 
4 . 4
V‐FOR
// JavaScript 
var example = new Vue({ 
    el:   '.example', 
    data: { items: { message: 'Foo' }, { message: 'Bar' }, }, 
}); 
<!­­ HTML ­­> 
<ul class="example"> 
    <li v­for="item in items">{{ item.message }}</li> 
</ul>
4 . 5
V‐FOR USING AN OBJECT
// JavaScript 
var example = new Vue({ 
    el:   '.example', 
    data: { object: FirstName: 'Jonathan', LastName: 'Goode', Age: 30, }, 
}); 
<!­­ HTML ­­> 
<ul class="example"> 
    <li v­for="value in object">{{ $key }}: {{ value }}</li> 
</ul>
4 . 6
V‐FOR USING A RANGE
// JavaScript 
var example = new Vue({ 
    el: '.example', 
}); 
<!­­ HTML ­­> 
<ul class="example"> 
    <li v­for="n in 10">{{ n }}</li> 
</ul>
4 . 7
V‐FOR USING A FILTER
What will the output
be?
// JavaScript 
var example = new Vue({ 
    el:   '.example', 
    data: { array: [2, 4, 6, 8, 10,], }, 
}); 
<!­­ HTML ­­> 
<ul class="example"> 
    <li v­for="n in array | limitBy 3">{{ n }}</li> 
</ul>
5
VUE AND EVENT HANDLING
<!­­ HTML ­­> 
<a v­on:click="doSomething">Link</a> 
<a @click="doSomething">Link</a><!­­ shorthand syntax ­­> 
// Modifiers 
<!­­ with event.preventDefault() ­­> 
<a @click.prevent="doSomething">Link</a> 
<!­­ with event.stopPropagation() ­­> 
<a @click.stop="doSomething">Link</a> 
<!­­ with event.preventDefault() and event.stopPropagation() ­­> 
<a @click.stop.prevent="doSomething">Link</a> 
6
VUE AND LARAVEL
// JavaScript ­ for Laravel (requires jQuery) 
Vue.http.headers.common['X­CSRF­TOKEN'] = 
$('meta[name="csrf­token"]').attr('content'); 
// PHP ­ escape Blade syntax 
@{{ item.message }}
(Recommended Combination)
7
INSTALLING VUE
package.json
"dependencies": { 
  "vue": "*" 
} 
Run
npm
$ npm install 
8
VUE EXPLAINED
HELLO WORLD EXAMPLE ⇲
The data for the view goes in an object called data
This can get there and look however you want
Functions are written as callbacks that go into a methods
object
They can do or return whatever you want
var journal = new Vue({ 
    el: '.journal', 
    data: { message: 'Hello World' }, methods: { }, 
});
<div class="journal"> 
    <input type="text" v­model="message"><pre>{{ message | json }}</pre> 
</div>
9
INPUT COUNTER EXAMPLE ⇲
// JavaScript 
new Vue({ 
    el:      '.question­text', 
    data:    { questions: [{ question_text: '', }], }, 
    methods: { getLength: function(key){ 
        return mb_strlen(this.questions[0][key]); 
    }, }, 
});
<!­­ HTML ­­> 
<small v­bind:class="{ 'red': getLength('question_text') > 499 }" 
       v­cloak class="pull­right">Characters: 
    <span v­bind:class="{'text­embolden': getLength('question_text') > 500}"
        @{{ getLength('question_text') }} 
    </span> / 500 
</small>
10 . 1
VUE DIRECTIVES
Custom directives provide a mechanism for mapping data changes to arbitrary DOM behaviour
"seiyria‐bootstrap‐slider": "7.0.3"
Vue.directive('slider', { 
    bind: function(){ /* do preparation work */ 
        var vm  = this.vm; 
        var key = this.expression; 
        var slider = $(this.el).slider() 
            .on('change', function(ev){ vm.$set(key, ev.value.newValue); })
            .data('slider'); 
    }, 
    update: function(val){ /* do something based on initial/updated value */
        val = parseFloat(val); 
        if(!isNaN(val)){ $(this.el).slider('setValue', val); } 
    }, 
    unbind: function(){ /* do clean up work */ }, 
});
10 . 2
SLIDER EXAMPLE ⇲
// JavaScript 
new Vue({ 
    el:   '.form­alerts', 
    data: alerts: [{ id: '', alert_message: '', alert_time: '' }], 
});
<!­­ HTML ­­> 
<template v­for="alert in alerts"> 
    <input 
        class="form­control station­alert­time" 
        name="station_alert_time" 
        type="text" 
        v­slider="alerts[$index].alert_time" 
        v­model="alerts[$index].alert_time" 
        data­slider­min="0.5" 
        data­slider­max="5" 
        data­slider­step="0.5" 
        data­slider­value="2.5"> 
</template>
11
VUE PLUGINS
Provides services for making web requests and handling responses using an
XMLHttpRequest or JSONP
The HTTP client for Vue.js
Centralised State Management for Vue.js
Similar to (Re)Flux for React
Bootstrap components built with Vue.js
No jQuery, bootstrap.js, or any third party plugins required
VueResource
VueRouter
VueX
VueStrap
12
MORE RESOURCES
https://vuejs.org
https://github.com/vuejs/vue
Vue.js DevTools - Chrome
Extension

More Related Content

What's hot

An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
 
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro
Muhammad Rizki Rijal
 
VueJS Introduction
VueJS IntroductionVueJS Introduction
VueJS Introduction
David Ličen
 
Basics of VueJS
Basics of VueJSBasics of VueJS
Basics of VueJS
Squash Apps Pvt Ltd
 
Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
Rafael Casuso Romate
 
Vue.js
Vue.jsVue.js
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react js
dhanushkacnd
 
State manager in Vue.js, from zero to Vuex
State manager in Vue.js, from zero to VuexState manager in Vue.js, from zero to Vuex
State manager in Vue.js, from zero to Vuex
Commit University
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
선협 이
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
Dalibor Gogic
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
Chandrasekar G
 
Vue Vuex 101
Vue Vuex 101Vue Vuex 101
Vue Vuex 101
LocNguyen362
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
Apaichon Punopas
 
React hooks
React hooksReact hooks
React hooks
Ramy ElBasyouni
 
React for Beginners
React for BeginnersReact for Beginners
React for Beginners
Derek Willian Stavis
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
Emanuele DelBono
 
Getting Started with React.js
Getting Started with React.jsGetting Started with React.js
Getting Started with React.js
Smile Gupta
 

What's hot (20)

An introduction to Vue.js
An introduction to Vue.jsAn introduction to Vue.js
An introduction to Vue.js
 
Vue JS Intro
Vue JS IntroVue JS Intro
Vue JS Intro
 
VueJS Introduction
VueJS IntroductionVueJS Introduction
VueJS Introduction
 
Basics of VueJS
Basics of VueJSBasics of VueJS
Basics of VueJS
 
Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
 
VueJS: The Simple Revolution
VueJS: The Simple RevolutionVueJS: The Simple Revolution
VueJS: The Simple Revolution
 
Vue.js
Vue.jsVue.js
Vue.js
 
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex
 
Build web apps with react js
Build web apps with react jsBuild web apps with react js
Build web apps with react js
 
State manager in Vue.js, from zero to Vuex
State manager in Vue.js, from zero to VuexState manager in Vue.js, from zero to Vuex
State manager in Vue.js, from zero to Vuex
 
Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js
 
Love at first Vue
Love at first VueLove at first Vue
Love at first Vue
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
 
Vue Vuex 101
Vue Vuex 101Vue Vuex 101
Vue Vuex 101
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
 
React hooks
React hooksReact hooks
React hooks
 
React for Beginners
React for BeginnersReact for Beginners
React for Beginners
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 
Getting Started with React.js
Getting Started with React.jsGetting Started with React.js
Getting Started with React.js
 

Viewers also liked

Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
 
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
 
Vue js and Vue Material
Vue js and Vue MaterialVue js and Vue Material
Vue js and Vue Material
Eueung Mulyana
 
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingVue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thing
Joonas Lehtonen
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
TechExeter
 
Vue.js
Vue.jsVue.js
Javascript MVVM with Vue.JS
Javascript MVVM with Vue.JSJavascript MVVM with Vue.JS
Javascript MVVM with Vue.JS
Eueung Mulyana
 
Vue.js
Vue.jsVue.js
Vue.js
ZongYing Lyu
 
Vue.js - o framework progressivo
Vue.js - o framework progressivoVue.js - o framework progressivo
Vue.js - o framework progressivo
Vinicius Reis
 
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
pascallaliberte
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
 
Dojo vue.js
Dojo vue.jsDojo vue.js
Dojo vue.js
Luís Felipe Souza
 
Desmistificando o PostCSS
Desmistificando o PostCSSDesmistificando o PostCSS
Desmistificando o PostCSS
Luís Felipe Souza
 
Membangun Moderen UI dengan Vue.js
Membangun Moderen UI dengan Vue.jsMembangun Moderen UI dengan Vue.js
Membangun Moderen UI dengan Vue.js
Froyo Framework
 
How tovuejs
How tovuejsHow tovuejs
How tovuejs
Daniel Chou
 
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
Publicis Sapient Engineering
 
VueJS - Uma alternativa elegante
VueJS - Uma alternativa eleganteVueJS - Uma alternativa elegante
VueJS - Uma alternativa elegante
Jonathan Bijos
 
Vue 淺談前端建置工具
Vue 淺談前端建置工具Vue 淺談前端建置工具
Vue 淺談前端建置工具
andyyou
 
GraphQL
GraphQLGraphQL
Vue.js
Vue.jsVue.js
Vue.js
BADR
 

Viewers also liked (20)

Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
 
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.jsVue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
 
Vue js and Vue Material
Vue js and Vue MaterialVue js and Vue Material
Vue js and Vue Material
 
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingVue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thing
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
Vue.js
Vue.jsVue.js
Vue.js
 
Javascript MVVM with Vue.JS
Javascript MVVM with Vue.JSJavascript MVVM with Vue.JS
Javascript MVVM with Vue.JS
 
Vue.js
Vue.jsVue.js
Vue.js
 
Vue.js - o framework progressivo
Vue.js - o framework progressivoVue.js - o framework progressivo
Vue.js - o framework progressivo
 
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
Making Turbolinks work with Vue.js: Fast server-generated pages with reactive...
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
 
Dojo vue.js
Dojo vue.jsDojo vue.js
Dojo vue.js
 
Desmistificando o PostCSS
Desmistificando o PostCSSDesmistificando o PostCSS
Desmistificando o PostCSS
 
Membangun Moderen UI dengan Vue.js
Membangun Moderen UI dengan Vue.jsMembangun Moderen UI dengan Vue.js
Membangun Moderen UI dengan Vue.js
 
How tovuejs
How tovuejsHow tovuejs
How tovuejs
 
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
XebiCon'16 : Angular2, React, Vue.js - Bien choisir son framework Front-End. ...
 
VueJS - Uma alternativa elegante
VueJS - Uma alternativa eleganteVueJS - Uma alternativa elegante
VueJS - Uma alternativa elegante
 
Vue 淺談前端建置工具
Vue 淺談前端建置工具Vue 淺談前端建置工具
Vue 淺談前端建置工具
 
GraphQL
GraphQLGraphQL
GraphQL
 
Vue.js
Vue.jsVue.js
Vue.js
 

Similar to Why Vue.js?

Vue js & vue cli 3 plugins to boost up the performance of your application
Vue js & vue cli 3 plugins to boost up the performance of your applicationVue js & vue cli 3 plugins to boost up the performance of your application
Vue js & vue cli 3 plugins to boost up the performance of your application
Katy Slemon
 
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Adam Khan
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
David Ličen
 
41 best vue component libraries to archive for 2021
41 best vue component libraries to archive for 202141 best vue component libraries to archive for 2021
41 best vue component libraries to archive for 2021
Katy Slemon
 
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Katy Slemon
 
Reactjs
ReactjsReactjs
What is Vue.js in Software Development.docx.pdf
What is Vue.js in Software Development.docx.pdfWhat is Vue.js in Software Development.docx.pdf
What is Vue.js in Software Development.docx.pdf
MPIRIC Software
 
Seven Simple Reasons to Use AppFuse
Seven Simple Reasons to Use AppFuseSeven Simple Reasons to Use AppFuse
Seven Simple Reasons to Use AppFuse
Matt Raible
 
235042632 super-shop-ee
235042632 super-shop-ee235042632 super-shop-ee
235042632 super-shop-ee
homeworkping3
 
Why Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptxWhy Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptx
Scala Code
 
React vs. vue which framework to select and when
React vs. vue  which framework to select and when React vs. vue  which framework to select and when
React vs. vue which framework to select and when
MoonTechnolabsPvtLtd
 
Key Advantages of Vue.js in Web App Development.pdf
Key Advantages of Vue.js in Web App Development.pdfKey Advantages of Vue.js in Web App Development.pdf
Key Advantages of Vue.js in Web App Development.pdf
WDP Technologies
 
Benefits of vue.js technology for business
Benefits of vue.js technology for businessBenefits of vue.js technology for business
Benefits of vue.js technology for business
9 series
 
learning react
learning reactlearning react
learning react
Eueung Mulyana
 
Netbeans 6.1 Talk
Netbeans 6.1 TalkNetbeans 6.1 Talk
Netbeans 6.1 Talk
Angad Singh
 
React vs. vue which framework to select and when
React vs. vue  which framework to select and when React vs. vue  which framework to select and when
React vs. vue which framework to select and when
Moon Technolabs Pvt. Ltd.
 
Learn react-js
Learn react-jsLearn react-js
Is Vue catching up with React.pdf
Is Vue catching up with React.pdfIs Vue catching up with React.pdf
Is Vue catching up with React.pdf
Mindfire LLC
 
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
Gavin Pickin
 
Asp.net Vs Vue.js.pdf
Asp.net Vs Vue.js.pdfAsp.net Vs Vue.js.pdf
Asp.net Vs Vue.js.pdf
Integrated IT Solutions
 

Similar to Why Vue.js? (20)

Vue js & vue cli 3 plugins to boost up the performance of your application
Vue js & vue cli 3 plugins to boost up the performance of your applicationVue js & vue cli 3 plugins to boost up the performance of your application
Vue js & vue cli 3 plugins to boost up the performance of your application
 
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
Between a SPA and a JAMstack: Building Web Sites with Nuxt/Vue, Strapi and wh...
 
Drupal point of vue
Drupal point of vueDrupal point of vue
Drupal point of vue
 
41 best vue component libraries to archive for 2021
41 best vue component libraries to archive for 202141 best vue component libraries to archive for 2021
41 best vue component libraries to archive for 2021
 
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
Why do JavaScript enthusiast think of Vue.js for building real-time web appli...
 
Reactjs
ReactjsReactjs
Reactjs
 
What is Vue.js in Software Development.docx.pdf
What is Vue.js in Software Development.docx.pdfWhat is Vue.js in Software Development.docx.pdf
What is Vue.js in Software Development.docx.pdf
 
Seven Simple Reasons to Use AppFuse
Seven Simple Reasons to Use AppFuseSeven Simple Reasons to Use AppFuse
Seven Simple Reasons to Use AppFuse
 
235042632 super-shop-ee
235042632 super-shop-ee235042632 super-shop-ee
235042632 super-shop-ee
 
Why Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptxWhy Choose Vue.js For Web Development Projects.pptx
Why Choose Vue.js For Web Development Projects.pptx
 
React vs. vue which framework to select and when
React vs. vue  which framework to select and when React vs. vue  which framework to select and when
React vs. vue which framework to select and when
 
Key Advantages of Vue.js in Web App Development.pdf
Key Advantages of Vue.js in Web App Development.pdfKey Advantages of Vue.js in Web App Development.pdf
Key Advantages of Vue.js in Web App Development.pdf
 
Benefits of vue.js technology for business
Benefits of vue.js technology for businessBenefits of vue.js technology for business
Benefits of vue.js technology for business
 
learning react
learning reactlearning react
learning react
 
Netbeans 6.1 Talk
Netbeans 6.1 TalkNetbeans 6.1 Talk
Netbeans 6.1 Talk
 
React vs. vue which framework to select and when
React vs. vue  which framework to select and when React vs. vue  which framework to select and when
React vs. vue which framework to select and when
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
 
Is Vue catching up with React.pdf
Is Vue catching up with React.pdfIs Vue catching up with React.pdf
Is Vue catching up with React.pdf
 
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
 
Asp.net Vs Vue.js.pdf
Asp.net Vs Vue.js.pdfAsp.net Vs Vue.js.pdf
Asp.net Vs Vue.js.pdf
 

Recently uploaded

E-commerce Application Development Company.pdf
E-commerce Application Development Company.pdfE-commerce Application Development Company.pdf
E-commerce Application Development Company.pdf
Hornet Dynamics
 
GraphSummit Paris - The art of the possible with Graph Technology
GraphSummit Paris - The art of the possible with Graph TechnologyGraphSummit Paris - The art of the possible with Graph Technology
GraphSummit Paris - The art of the possible with Graph Technology
Neo4j
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
Grant Fritchey
 
SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024
Hironori Washizaki
 
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissancesAtelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Neo4j
 
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
Crescat
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
kalichargn70th171
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j
 
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CDKuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
rodomar2
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
mz5nrf0n
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptxLORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
lorraineandreiamcidl
 
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise EditionWhy Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Envertis Software Solutions
 
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
Łukasz Chruściel
 
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdfRevolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Undress Baby
 
How to write a program in any programming language
How to write a program in any programming languageHow to write a program in any programming language
How to write a program in any programming language
Rakesh Kumar R
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s EcosystemUI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
Peter Muessig
 
What is Master Data Management by PiLog Group
What is Master Data Management by PiLog GroupWhat is Master Data Management by PiLog Group
What is Master Data Management by PiLog Group
aymanquadri279
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
lorraineandreiamcidl
 

Recently uploaded (20)

E-commerce Application Development Company.pdf
E-commerce Application Development Company.pdfE-commerce Application Development Company.pdf
E-commerce Application Development Company.pdf
 
GraphSummit Paris - The art of the possible with Graph Technology
GraphSummit Paris - The art of the possible with Graph TechnologyGraphSummit Paris - The art of the possible with Graph Technology
GraphSummit Paris - The art of the possible with Graph Technology
 
Using Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query PerformanceUsing Query Store in Azure PostgreSQL to Understand Query Performance
Using Query Store in Azure PostgreSQL to Understand Query Performance
 
SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024SWEBOK and Education at FUSE Okinawa 2024
SWEBOK and Education at FUSE Okinawa 2024
 
Atelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissancesAtelier - Innover avec l’IA Générative et les graphes de connaissances
Atelier - Innover avec l’IA Générative et les graphes de connaissances
 
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
Introducing Crescat - Event Management Software for Venues, Festivals and Eve...
 
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf8 Best Automated Android App Testing Tool and Framework in 2024.pdf
8 Best Automated Android App Testing Tool and Framework in 2024.pdf
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
 
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit ParisNeo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
Neo4j - Product Vision and Knowledge Graphs - GraphSummit Paris
 
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CDKuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
KuberTENes Birthday Bash Guadalajara - Introducción a Argo CD
 
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
原版定制美国纽约州立大学奥尔巴尼分校毕业证学位证书原版一模一样
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptxLORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
LORRAINE ANDREI_LEQUIGAN_HOW TO USE WHATSAPP.pptx
 
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise EditionWhy Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
Why Choose Odoo 17 Community & How it differs from Odoo 17 Enterprise Edition
 
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf2024 eCommerceDays Toulouse - Sylius 2.0.pdf
2024 eCommerceDays Toulouse - Sylius 2.0.pdf
 
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdfRevolutionizing Visual Effects Mastering AI Face Swaps.pdf
Revolutionizing Visual Effects Mastering AI Face Swaps.pdf
 
How to write a program in any programming language
How to write a program in any programming languageHow to write a program in any programming language
How to write a program in any programming language
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s EcosystemUI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
UI5con 2024 - Keynote: Latest News about UI5 and it’s Ecosystem
 
What is Master Data Management by PiLog Group
What is Master Data Management by PiLog GroupWhat is Master Data Management by PiLog Group
What is Master Data Management by PiLog Group
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOMLORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
LORRAINE ANDREI_LEQUIGAN_HOW TO USE ZOOM
 

Why Vue.js?

  • 1. 1 WHY VUE.JS? “The Progressive JavaScript Framework” Introduction to Vue.js Jonathan Goode
  • 2. 2 . 1 WHAT IS VUE.JS? Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces The core library is focused on the view layer only The library was created by who released v1 on 26 October 2015 The project is permanently backed by pledgers on $7,572 (~£6,145) per month Evan You Patreon.com
  • 3. 2 . 2 WHO USES VUE? Rank Site Detections 1st laravel.com 49,476 2nd laracasts.com 29,185 3rd gitlab.com 26,522 8th codeship.com 3,069 Detections by Wappalyzer in the last 7 days INTERNATION ADOPTION China: Alibaba and Baidu, Japan: Nintendo and UK: Sainsbury's
  • 4. 2 . 3 USING VUE Getting started with Vue.js is extremely easy Its source code is very readable, and the documentation is the only tutorial you will need You don't need external libraries You can use it with or without jQuery You won't even need to install any plugins, though many are available
  • 5. 2 . 4 USING VUE Hooking Vue up to existing code is very straightforward Vue makes no assumptions about your code It really only assumes that your data will change Real-life usage is as simple as the docs demonstrate it to be
  • 6. 3 . 1 PERFORMANCE Vue.js 2.0 was released on Sep 30 - current release is v2.0.3 - 16kb min+gzip Based on , lower is better3rd party benchmark
  • 7. 3 . 2 VUE.JS 2.0 The rendering layer has been rewritten using a light-weight Virtual DOM implementation forked from . On top of that, Vue's template compiler is able to apply some smart optimizations during compilation, such as analyzing and hoisting static sub trees to avoid unnecessary diffing on re- render. The new rendering layer provides significant performance improvements compared to v1, and makes Vue 2.0 one of the fastest frameworks. In addition, it requires minimal effort in terms of optimization because Vue's reactivity system is able to precisely determine components that need to be re-rendered in a large and complex component tree. snabbdom
  • 8. 4 . 1 VUE AND CONDITIONAL LOGIC V‐IF / V‐ELSE // JavaScript  var example = new Vue({      el:   '.example',      data: { cond: (1 > 0), }, // true  });  <div class="example">      <div v­if="cond">Yes</div>      <div v­else>No</div>  </div>
  • 10. 4 . 3 WITH A TEMPLATE <!­­ HTML ­­>  <template v­if="cond">      <h1>Title</h1>      <p>Paragraph 1</p>      <p>Paragraph 2</p>  </template>  = <!­­ HTML ­­>  <h1>Title</h1>  <p>Paragraph 1</p>  <p>Paragraph 2</p> 
  • 12. 4 . 5 V‐FOR USING AN OBJECT // JavaScript  var example = new Vue({      el:   '.example',      data: { object: FirstName: 'Jonathan', LastName: 'Goode', Age: 30, },  });  <!­­ HTML ­­>  <ul class="example">      <li v­for="value in object">{{ $key }}: {{ value }}</li>  </ul>
  • 13. 4 . 6 V‐FOR USING A RANGE // JavaScript  var example = new Vue({      el: '.example',  });  <!­­ HTML ­­>  <ul class="example">      <li v­for="n in 10">{{ n }}</li>  </ul>
  • 14. 4 . 7 V‐FOR USING A FILTER What will the output be? // JavaScript  var example = new Vue({      el:   '.example',      data: { array: [2, 4, 6, 8, 10,], },  });  <!­­ HTML ­­>  <ul class="example">      <li v­for="n in array | limitBy 3">{{ n }}</li>  </ul>
  • 15. 5 VUE AND EVENT HANDLING <!­­ HTML ­­>  <a v­on:click="doSomething">Link</a>  <a @click="doSomething">Link</a><!­­ shorthand syntax ­­>  // Modifiers  <!­­ with event.preventDefault() ­­>  <a @click.prevent="doSomething">Link</a>  <!­­ with event.stopPropagation() ­­>  <a @click.stop="doSomething">Link</a>  <!­­ with event.preventDefault() and event.stopPropagation() ­­>  <a @click.stop.prevent="doSomething">Link</a> 
  • 18. 8 VUE EXPLAINED HELLO WORLD EXAMPLE ⇲ The data for the view goes in an object called data This can get there and look however you want Functions are written as callbacks that go into a methods object They can do or return whatever you want var journal = new Vue({      el: '.journal',      data: { message: 'Hello World' }, methods: { },  }); <div class="journal">      <input type="text" v­model="message"><pre>{{ message | json }}</pre>  </div>
  • 19. 9 INPUT COUNTER EXAMPLE ⇲ // JavaScript  new Vue({      el:      '.question­text',      data:    { questions: [{ question_text: '', }], },      methods: { getLength: function(key){          return mb_strlen(this.questions[0][key]);      }, },  }); <!­­ HTML ­­>  <small v­bind:class="{ 'red': getLength('question_text') > 499 }"         v­cloak class="pull­right">Characters:      <span v­bind:class="{'text­embolden': getLength('question_text') > 500}"         @{{ getLength('question_text') }}      </span> / 500  </small>
  • 20. 10 . 1 VUE DIRECTIVES Custom directives provide a mechanism for mapping data changes to arbitrary DOM behaviour "seiyria‐bootstrap‐slider": "7.0.3" Vue.directive('slider', {      bind: function(){ /* do preparation work */          var vm  = this.vm;          var key = this.expression;          var slider = $(this.el).slider()              .on('change', function(ev){ vm.$set(key, ev.value.newValue); })             .data('slider');      },      update: function(val){ /* do something based on initial/updated value */         val = parseFloat(val);          if(!isNaN(val)){ $(this.el).slider('setValue', val); }      },      unbind: function(){ /* do clean up work */ },  });
  • 21. 10 . 2 SLIDER EXAMPLE ⇲ // JavaScript  new Vue({      el:   '.form­alerts',      data: alerts: [{ id: '', alert_message: '', alert_time: '' }],  }); <!­­ HTML ­­>  <template v­for="alert in alerts">      <input          class="form­control station­alert­time"          name="station_alert_time"          type="text"          v­slider="alerts[$index].alert_time"          v­model="alerts[$index].alert_time"          data­slider­min="0.5"          data­slider­max="5"          data­slider­step="0.5"          data­slider­value="2.5">  </template>
  • 22. 11 VUE PLUGINS Provides services for making web requests and handling responses using an XMLHttpRequest or JSONP The HTTP client for Vue.js Centralised State Management for Vue.js Similar to (Re)Flux for React Bootstrap components built with Vue.js No jQuery, bootstrap.js, or any third party plugins required VueResource VueRouter VueX VueStrap