Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 facts
The Founder
Evan You
• Previously worked as a Creative
Technologist at Google
• Core Dev at Meteor
• From 2016 working ful...
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/ Mainta...
How does it work?
Technical stuff
How it works?
• Inspired by Model–view–
viewmodel (MVVM)
architectural pattern
• Uses Declarative Rendering
• Dependency t...
The Vue Instance
• Vue Constructor function
• Properties and Methods (data / events)
• Instance Lifecycle Hooks
var vm = n...
The Vue Instance Lifecycle
var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` points to the vm instance
console.log('a is: ' + this....
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...
Directives
v-bind
<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>

v-on
<!-- full sy...
<div :class="{
'active': isActive,
'text-danger': HasError }
">
</div>

data: {
isActive: true,
hasError: false
}
Binding ...
<div id="events">
<button v-on:click="counter += 1”>
Add +1</button>
<p>You clicked {{ counter }}</p>
<button @click=“say(...
<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-...
<ul id=“list">
<li v-for="(item, index) in items">
{{ parentMessage }} -
{{ index }} -
{{ item.message }}
</li>
</ul>

new...
<!-- the click event's propagation will be stopped -->
<a @click.stop="oThis"></a>
<!-- the submit event will no longer re...
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, St...
new Vue ({
el: "#selector",
data: {
message: 'Hello'
}
})

export default {
data () {
return {
message: 'Hello'
}
}
}
Mind...
Let’s do some 💩
and build our first VueJS app
npm install --global vue-cli
vue init webpack my-project
? Project name vue-webpack
? Project description A Vue.js project
? Author davidlicen <david@artnetik.si>
? Vue build stan...
cd my-project
npm install
npm run dev
yarn anyone?
Dev tools ⚒
Doubts 🤔
Some say…
• Vue initiated by a single developer
• The community is not yet as large as the ones of
Angular or React
• Curr...
Sauce!
github.com/vuejs/awesome-vue
Sauce!
vuejs.org
WROCŁAW, POLAND • JUNE 21-23, 2017
Thank you!
VueJS Introduction
VueJS Introduction
VueJS Introduction
VueJS Introduction
VueJS Introduction
VueJS Introduction
VueJS Introduction
Nächste SlideShare
Wird geladen in …5
×

VueJS Introduction

A brief introduction into Vue progressive Javascript framework.

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Als Erste(r) kommentieren

VueJS Introduction

  1. 1. Vue.JSThe progressive JavaScript Framework
  2. 2. Yet Another JS Framework Or Is it?
  3. 3. David Ličen, 
 Freelance Front-End Developer 
 Twitter: @davision
 Blog: davidlicen.com
  4. 4. The facts
  5. 5. 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
  6. 6. History • Started in late 2013 • First release Feb. 2014 (v0.6) • v1.0.0 Evangelion Oct. 2015 • Latest release v2.3.3
  7. 7. VueJS gets into in Laravel 5.3 Optional
  8. 8. Today (on 24.5.2017) vs. AngularJS vs. React
  9. 9. Today (on 24.5.2017) vs. Ruby ;)
  10. 10. Today (on 24.5.2017) 562K downloads/month
  11. 11. 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
  12. 12. How does it work? Technical stuff
  13. 13. How it works? • Inspired by Model–view– viewmodel (MVVM) architectural pattern • Uses Declarative Rendering • Dependency tracking system with getter/setters
  14. 14. The Vue Instance • Vue Constructor function • Properties and Methods (data / events) • Instance Lifecycle Hooks var vm = new Vue({ // options })
  15. 15. The Vue Instance Lifecycle
  16. 16. 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 })
  17. 17. Let see some code examples Practical stuff
  18. 18. <!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";
  19. 19. Directives v-bind <!-- full syntax --> <a v-bind:href="url"></a> <!-- shorthand --> <a :href="url"></a>
 v-on <!-- full syntax --> <a v-on:click="doSomething"></a> <!-- shorthand --> <a @click="doSomething"></a>
  20. 20. <div :class="{ 'active': isActive, 'text-danger': HasError } "> </div>
 data: { isActive: true, hasError: false } Binding HTML Classes
  21. 21. <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
  22. 22. <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
  23. 23. <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
  24. 24. <!-- 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
  25. 25. Etc.. https://vuejs.org/v2/guide/
  26. 26. Single File Components Introducing Made by Webpack (or Browserify)
  27. 27. Now we get • Complete syntax highlighting • CommonJS modules • Component-scoped CSS • Use of preprocessors (Pug, Babel, Stylus, Sass…)
  28. 28. new Vue ({ el: "#selector", data: { message: 'Hello' } })
 export default { data () { return { message: 'Hello' } } } Mind the difference
  29. 29. Let’s do some 💩 and build our first VueJS app
  30. 30. npm install --global vue-cli
  31. 31. vue init webpack my-project
  32. 32. ? 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!
  33. 33. cd my-project npm install npm run dev yarn anyone?
  34. 34. Dev tools ⚒
  35. 35. Doubts 🤔
  36. 36. 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…
  37. 37. Sauce! github.com/vuejs/awesome-vue
  38. 38. Sauce! vuejs.org
  39. 39. WROCŁAW, POLAND • JUNE 21-23, 2017
  40. 40. Thank you!

    Als Erste(r) kommentieren

    Loggen Sie sich ein, um Kommentare anzuzeigen.

  • JavierCorani

    May. 29, 2017
  • mizanr

    Jun. 11, 2017
  • rafagarcia_1971

    Jul. 13, 2017
  • TaiPham25

    Oct. 12, 2017
  • tranquangchau

    Dec. 1, 2017
  • ssuser18e581

    Dec. 11, 2017
  • JimMoore20

    Feb. 21, 2018
  • TunTun56

    Apr. 6, 2018
  • frz59

    Sep. 9, 2018
  • GeorgiGeorgiev152

    Sep. 10, 2018
  • DewaBatara

    Sep. 14, 2018
  • IsmailHamzahMCPD

    Oct. 13, 2018
  • edlivehere

    Nov. 3, 2018
  • pidugusundeep

    Feb. 5, 2019
  • JoSaleh

    Feb. 25, 2019
  • HaiderYaqoob

    Dec. 9, 2019
  • boslbosl

    Mar. 29, 2021
  • VojtchSkopal

    Apr. 12, 2021

A brief introduction into Vue progressive Javascript framework.

Aufrufe

Aufrufe insgesamt

9.792

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

192

Befehle

Downloads

676

Geteilt

0

Kommentare

0

Likes

18

×