Vue2.pdf

Web development with a SPA framework 4 - Vue 4.1 Basics 1 Contents 1. Setup 4.1 2. Basics 4.2 3. Components 4. Routing 5. Data & state management 1. setup What do you need? Bare minimum - Vue.js...

Web development with a SPA framework 4 - Vue 4.1 Basics 1 Contents 1. Setup 4.1 2. Basics 4.2 3. Components 4. Routing 5. Data & state management 1. setup What do you need? Bare minimum - Vue.js - Text editor Exercise 1 and 2 - Vue.js - IDE with Vue support (VSC + Vetur en Live Server extensions) - Browser devtools - Vue devtools (browser plugin) Exercise 3, projects,… - IDE with Vue support (VSC + Vetur en ESLint extensions) - Browser devtools - Vue devtools - Node.js with npm (run project tasks) - Vue CLI (generate/run/build projects) see further - ESLint Visual Studio Code (VSC) VSC is one of the most used editors for Vue and web development in general. It is free, light, cross-platform and has a lot of extensions VSC is not a requirement. There are good alternatives: webstorm, atom,… Vetur VSCode plugin for Vue development - Live server VSCode plugin for automatic refresh of browser upon code change - Only for small exercises, when you use a CLI you no longer need live server Browser devtools - error/debug messages (console) - check responsiveness of your design - inspect/tryout CSS rules - debugging - network traffic - … Vue devtools Firefox/Chrome plugin - = extra tab in browser devtools for debugging Vue components 2. Basics Programming paradigma’s Imperative Perform a sequence of steps a = b + c; d = doSomethingWith(a); Programming paradigma’s Declarative Describe what you want select * from t_users where firstname = Leo Programming paradigma’s Reactive React on changes (caused by events) Excell is an example of a reactive system Vue is a reactive framework Vue instance A Vue instance (new Vue()) can be attached to (a part of) an HTML page. Vue will then take care of this part using data binding. You pass an object literal with options. Most important property of this object is ‘data’ (=your model) index.html div with id=“app” Hello Vue! In the HTML you can use Vue’s special syntax to display the data (and other stuff we will meet) Hello world Data Binding The view is connected to the model (= the properties of your data object) When the model changes, the view is updated Bind Model View Update This is a one way-binding: when the view changes, the model is not updated. For form fields you can however use two-way binding (see further) Data Binding Vue performs change detection When a part of the model changes, it will update the corresponding part of the DOM Virtual DOM To optimise this process, a virtual DOM is used. https://codingexplained.com/coding/front-end/vue-js/understanding-virtual-dom Vue’s Reactivity system Internally, Vue wraps your model (=props of the data object) with getters and setters to watch for changes and update the virtual DOM Data Binding Databinding avoids that your JS code directly accesses the DOM Keeping your Javascript code independent from the real DOM has several advantages: - A virtual DOM can generate HTML client side or server side - Optimisation of DOM updates can be done (change detection) - JS code can be tested without a DOM/browser Take a break and make Exercise 1 Afterwards go through the following slides {{ }} https://vuejs.org/v2/guide/#Declarative-Rendering Bind content inside html elements to data You can use JS expressions e.g. {{ 'Your message has ' + message.length + ' chars’}} v-bind Bind html attributes to data Shorthand notation: is the same as (without ‘:’) : assigns the string ‘message’ to title : assigns the value of the variable message to title  v-on https://vuejs.org/v2/guide/events.html Bind to events Shorthand notation: v-on:click = @click v-on Bind methods to events v-on Bind methods to events with parameters v-on Access the native DOM element by using $event Remark: the event is always passed by Vue, even if you do not pass $event from the template (eg. v-on:click=“warn”) v-if https://vuejs.org/v2/guide/#Conditionals-and-Loops Show element only when condition = true v-for https://vuejs.org/v2/guide/#Conditionals-and-Loops Repeat an element (bind to array) v-model Handling form fields with one-way binding and events