UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Upload
Sign in
DL
Uploaded byDavid Ličen
13,153 views

VueJS Introduction

Vue.JS is a progressive JavaScript framework created by Evan You, formerly of Google. It was first released in 2014 and is growing in popularity as an alternative to AngularJS and React. Key features include declarative rendering, dependency tracking for automatic re-renders, and directives for DOM manipulation. Developers can get started by adding Vue to an HTML page or with single file components using tools like Webpack. The documentation provides many examples for building interfaces with directives, conditional rendering, forms, and more. While still smaller than communities for Angular and React, Vue has growing support from companies and an active ecosystem of libraries.

Software◦
Related topics:
Front-End•
Downloaded 702 times
1 / 47
2 / 47
3 / 47
4 / 47
5 / 47
6 / 47
7 / 47
8 / 47
9 / 47
10 / 47
11 / 47
12 / 47
13 / 47
14 / 47
15 / 47
Most read
16 / 47
17 / 47
18 / 47
19 / 47
20 / 47
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 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 })
The Vue Instance Lifecycle
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 <!-- 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>
<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
<!-- 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
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
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 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?
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 • Currently, there’s not so many libraries for Vue…
Sauce! github.com/vuejs/awesome-vue
Sauce! vuejs.org
WROCŁAW, POLAND • JUNE 21-23, 2017
Thank you!