Vue.js Getting Started

Vue.js Getting Started Murat Dogan – Sr. Front End Developer @ Hurriyet

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started • What is Vue.js ? • Comparison with other libraries/frameworks • SFC Concept • Getting Started with Vue.js • Basic Vue.js Features • Creating a development environment in 1 min • Okur Temsilcisi Vue.js Edition / Vue Router

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started How to choose the right framework? • How mature are the frameworks / libraries? • Are the frameworks likely to be around for a while? • How extensive and helpful are their corresponding communities? • How easy is it to find developers for each of the frameworks? • What are the basic programming concepts of the frameworks? • How easy is it to use the frameworks for small or large applications? • What does the learning curve look like for each framework? • What kind of performance can you expect from the frameworks? • Where can you have a closer look under the hood? • How can you start developing with the chosen framework?

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Latest News : 11th September

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started What is Vue.js? • Vue (pronounced /vju /, likeː view) is a progressive framework for building user interfaces.1 • It was first released in February 2014 by ex-Google-employee Evan You • Only thing you need to know is HTML, CSS and JavaScript • It’s been popular since its last version 2.0 • Vue is used by Alibaba, Baidu, Expedia, Nintendo, GitLab—a list of smaller projects can be found on madewithvuejs.com.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Comparison with other libraries/frameworks Based on 3rd party benchmark, lower is better

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Installing Vue.js •You can install core library via CDN (Content Delivery Network) •If you want to always follow up the latest version of Vue, use unpkg: • https://unpkg.com/vue - Always redirect to the latest version of Vue! • https://unpkg.com/vue@[version]/dist/vue.min.js - to specific version. •You can install core library using Bower or npm

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Getting Started – Hello World •Open https://jsfiddle.net, choose the additional JS Framework; Vue.js •JavaScript section : • new Vue({el:'#app'}) •HTML section: • <div id="app"> {{'Hello ' + 'world'}} </div> •Result:

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started How it works... new Vue({el:'#app'}) will instantiate a new Vue instance. It accepts an options object as a parameter. This object is central in Vue, and defines and controls data and behavior. It contains all the information needed to create Vue instances and components. In our case, we only specified the el option which accepts a selector or an element as an argument. The #app parameter is a selector that will return the element in the page with app as the identifier. For example, in a page like this: Everything that we will write inside the <div> with the ID as app will be under the scope of Vue. Now, JSFiddle takes everything we write in the HTML quadrant and wraps it in body tags. This means that if we just need to write the <div> in the HTML quadrant, JSFiddle will take care of wrapping it in the body tags.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started It's also important to note that placing the #app on the body or html tag will throw an error, as Vue advises us to mount our apps on normal elements, and its the same thing goes for selecting the body in the el option.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Lifecycle Diagram

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Lifecycle Diagram Example

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Interpolations Text Raw Html this will also affect any binding on the same node Attributes

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Interpolations - JavaScript Expressions So far we’ve only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Directives Directives are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression (with the exception for v-for, which will be discussed later). A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Let’s review the example we saw in the introduction: v-if v-show

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started v-if vs v-show • v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles. • v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time. • In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with just simple CSS-based toggling. • Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Arguments Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute: Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of the expression url.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Modifiers Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the .prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Shorthands The v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the v- prefix becomes less important when you are building an SPA where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, v-bind and v-on:

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Computed properties In-template expressions are very convenient, but they are really only meant for simple operations. Putting too much logic into your templates can make them bloated and hard to maintain. For example: At this point, the template is no longer simple and declarative. That’s why for any complex logic, you should use a computed property.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Computed properties

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Computed caching vs Methods You may have noticed we can achieve the same result by invoking a method in the expression: However, the difference is that computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed. This means as long as messagehas not changed, multiple access to the reversedMessage computed property will immediately return the previously computed result without having to run the function again.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Binding HTML Classes Object Syntax The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive. Array Syntax The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Binding Inline Styles Object Syntax The object syntax for v-bind:style is pretty straightforward - it looks almost like CSS, except it’s a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Binding Inline Styles Object Syntax It is often a good idea to bind to a style object directly so that the template is cleaner:

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Binding Inline Styles Auto-prefixing When you use a CSS property that requires vendor prefixes in v-bind:style, for example transform, Vue will automatically detect and add appropriate prefixes to the applied styles.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started List Rendering We can use the v-for directive to render a list of items based on an array. The v-fordirective requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on:

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started List Rendering Inside v-for blocks we have full access to parent scope properties. v-for also supports an optional second argument for the index of the current item.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started v-for with an Object You can also use v-for to iterate through the properties of an object.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started v-for with a Range v-for can also take an integer. In this case it will repeat the template that many times.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started v-for with v-if When they exist on the same node, v-for has a higher priority than v-if. That means the v-if will be run on each iteration of the loop separately. This can be useful when you want to render nodes for only some items, like below:

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Event Handling We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. For example:

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Method Event Handlers The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the v- on attribute simply isn’t feasible. That’s why v-on can also accept the name of a method you’d like to call.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Methods in Inline Handlers Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement:

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Event Modifiers It is a very common need to call event.preventDefault() or event.stopPropagation()inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details. To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot. •.stop •.prevent •.capture •.self •.once

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Event Modifiers

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Key Modifiers When listening for keyboard events, we often need to check for common key codes. Vue also allows adding key modifiers for v-on when listening for key events: Remembering all the keyCodes is a hassle, so Vue provides aliases for the most commonly used keys:

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Key Modifiers Here’s the full list of key modifier aliases: •.enter •.tab •.delete (captures both “Delete” and “Backspace” keys) •.esc •.space •.up •.down •.left •.right

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Key Modifiers You can also define custom key modifier aliases via the global config.keyCodes object: <input v-on:keyup.f1="submit">

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Modifier Keys You can use the following modifiers to trigger mouse or keyboard event listeners only when the corresponding modifier key is pressed: •.ctrl •.alt •.shift •.meta Note: On Macintosh keyboards, meta is the command key ( ). On Windows keyboards, meta is the windows key ( ).⌘ ⊞

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Mouse Button Modifiers New in 2.2.0+ •.left •.right •.middle These modifiers restrict the handler to events triggered by a specific mouse button. https://jsfiddle.net/z1jhpewo/1/

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started SFC Concept (Single File Components) • Complete syntax highlighting • CommonJS modules • Component-scoped CSS • You can specify language attributes to write more specific code. What About Separation of Concerns? One important thing to note is that separation of concerns is not equal to separation of file types

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Development Environment in 1 min vue-webpack-boilerplate is the best practice to start from scratch.

Murat Dogan – Sr. Front End Developer @ HurriyetVue.js – Getting Started Credits • https://vuejs.org/v2/guide/ • https://vuejs.org/v2/guide/single-file-components.html • https://www.packtpub.com/mapt/book/web_development/9781786468093 • https://app.pluralsight.com/library/courses/vuejs-getting-started/table-of-contents • https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8 • https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison- c5c52d620176 • https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison- c5c52d620176

Vue.js Getting Started

More Related Content

What's hot

Similar to Vue.js Getting Started

Recently uploaded

Vue.js Getting Started