What is VUE JS in simple terms

The JavaScript framework. Vue.js. Prof. Dr.-Ing. Thomas Wiedemann

Transcript

1 EwA lecture series The JavaScript framework Vue.js Prof. Dr.-Ing. Thomas Wiedemann B. Sc. Vladimir Veblium M. Sc. Elena Mulear Faculty of Computer Science / Mathematics Prof. T. Wiedemann Development of web-based applications Page 1

2 Structure 1/2 History / current status Author (s) and license Current version Comparison with other JS frameworks Typical properties Documentation, learning curve Flexibility, performance tooling, community Basics of working with Vue Preparation of Vue instance and general Vue syntax v directives and v-on Shorthands Code example Inventory app with inventory management and current time Get data from an API on the basis of JSON data Lifecycle created () and mounted () Prof. T. Wiedemann Development of web-based applications Page 2

3 Outline 2/2 Vue Components Introduction with Components - Example Props and Application Example Transitions & Animation Introduction Transitions - Example Animation - Example Reusability & More Mixins Further (Custom Directives, Render and JSX, Plugins) Vue Resources and Community Outlook Internship Task Wholesaler Bookshop (Architecture, description, APIs, design) Prof. T. Wiedemann Development of web-based applications Page 3

4 History and current status published on February 11, 2014 by Evan You (former AngularJS developer at Google) [1] [2] License: MIT License (Open Source) [3] Vue.js Homepage: current stable version (Release:) [4] very popular on GitHub (as of 2019) [5] [6] image source: vuejs.org/v2/guide/team.html React vs. Vue vs. Angular Prof. T. Wiedemann Development of web-based applications page 4

5 Typical properties of Vue A very beginner-friendly documentation [7] with numerous best practice examples as well as a very clear API [8] To get started, you only need JavaScript, HTML and CSS knowledge (no TypoScript, JSX or similar) a new, better mix of known technologies from Angular and React with an MVVM (Model View ViewModel) and Virtual DOM, which is significantly lighter and less complex [9], can be integrated into an existing project at any time and combined with other frameworks Angular and React, because they are very slim [10] optionally powerful Vue Comand Line Interface (CLI) with numerous features, which greatly simplifies the development of web applications [11] [12], but is not absolutely necessary A very active one and helpful community in the forum, accessible via the official Vue.js website [13] - Prof. T. Wiedemann Development of web-based applications page 5

6 Basics: Preparation Requirements: HTML, CSS and JS knowledge only HTML file index.html with a

tag and an id for mounting the Vue instance:
JavaScript file main.js with the Vue instance with options (data, methods,): var app = new Vue ({}); el: "#app", data: {// ...}, methods: {// ...} Integration of the Vue.js framework and the Vue instance using the Prof. T. Wiedemann Development of web-based applications page 6

7 Basics: Vue instance The Vue instance forms the root of the web application and enables data to be saved and various actions to be carried out: var app = new Vue ({options}) Link to a DOM element (= el) using el in the Vue instance by binding via the id attribute from the HTML document: el: "#app", save data in the Vue instance, eg: data: {}, product: "book" data from the Vue instance Transfer HTML using Mustache syntax (so-called text interpolation):

{{product}}

Prof. T. Wiedemann Development of web-based applications page 7

8 Basics: Vue Syntax Java Script expressions can be used within the Mustache syntax, e.g. : {{number + 1}} {{result? 'Yes': 'No'}} {{message.split (''). Reverse (). Join ('')}} The v-bind directive is used to transfer HTML attributes from the Vue instance ( Mustaches cannot be used here): html-file:

{{product}}

js-file: data: {} , product: "Book", myimage: "img / book.png" Prof. T. Wiedemann Development of web-based applications Page 8

9 Basics: v directives The v-if directive allows checking of a condition within an HTML tag. Can be used to e.g. Show or hide an element:

visible again

DOM event listeners can be assigned to an HTML element using the v-on directive, e.g. onclick event: ... elements of an array can be looped through using the v-for directive and displayed in an HTML list:
  • {{book.title}} Two-way binding of an input field is done using the v-model directive (bidirectional linking of a Vue variable with the input field): Prof. T. Wiedemann Development of web-based applications page 9

    10 Basics: v-bind and v-on shorthands Vue.js offers shorthands for the v-bind and v-on directives: Full syntax Shorthand Shorthand Dynamic arguments (2.6.0+) v-bind: href: href: [key ] eg: ... ... . .. eg: ... More Vue.js basics and examples on: Dynamic Arguments Example: dynamic-directive-arguments / Prof. T. Wiedemann Development of web-based applications page 10

    11 Example: Inventory The Vue.js example fetches data from an API, which is displayed in an HTML list. The number of articles can be changed with the corresponding buttons (the app prevents the setting of a number less than 0) Notice that the item is sold out! The current date and time are displayed in the app. Prof. T. Wiedemann Development of web-based applications page 11

    12 Example: Get data from an API Create the Vue instance with variables and methods to get JSON data from an API from an external server Prof. T. Wiedemann Development of web-based applications Page 12

    13 Example: JSON data structure The data is in JSON format on the server as a file and has three attribute keys id, quantity and name Primary key, auto increment Number of articles in stock Article description API URL for a GET request: Prof. T. Wiedemann Development of web-based applications page 13

    14 Example: Increase and decrease inventory Creation of methods to increase and decrease the inventory of each item from the list The positioning (index) of the item in the array is transferred when the method is called in the HTML file in a v-for loop Prof T. Wiedemann Development of web-based applications page 14

    15 Example: Current date and time Create your own function to determine the date and current time in the desired data format The date and time are assigned to the defined property timestamp, which is finally displayed in the HTML file. Prof. T. Wiedemann Development web-based Applications page 15

    16 Example: Lifecycle created () and mounted () The date and time must be updated every second and the API data must be loaded asynchronously into the web application While the created () vue function (so-called hook) is used for reactive synchronous operations, the mounted () Vue function should be used for asynchronous queries, which waits for asynchronous requests [14] Other lifecycle hooks are [15]: beforecreate, created, beforemount, mounted, beforeupdate, updated, activated, deactivated, beforedestroy, destroyed Prof. T. Wiedemann Development of web-based applications page 16

    17 Vue Components In general (and independent of Vue) the following applies: In the case of more complex web applications or the creation of many similar but not identical applications, it makes sense to work with reusable software components. Figure source and details about it: vuejs.org/v2/guide/components.html Components are reusable Vue instances with a name they contain the functionality of a Vue application e.g. a navigation menu, a button or a formatted text Vue components are defined using the component () function and usually have via a data function and a template attribute A defined component can be reused as a custom HTML element as often as required in the HTML code. Prof. T. Wiedemann Development of web-based applications page 17

    18 Components - Example In the following example, a component called button-counter is defined, which counts up the counter when the button is clicked and is used as a custom HTML element: js file: html file: browser: Prof. T . Wiedemann development of web-based applications page 18

    19 Components - Props Props are custom attributes of a component After the registration of props, data can be transferred to a component. In the following example, various titles are transferred to a newly defined component in the HTML file: js file html file browser More on : Prof. T. Wiedemann Development of web-based applications page 19

    20 Transitions Enable transition effects (transitions) in DOM manipulations (adding, updating and removing DOM elements) can be used, for example, if an element is shown or hidden or displayed depending on the condition. Vue.js provides 6 transition Classes with the v-prefix (default) for controlling transitions (remove / add element) are available. These classes are: v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active , v-leave-to Figure: Prof. T. Wiedemann Development of web-based applications page 20

    21 Transitions - Example The following example demonstrates a simple transition for showing and hiding an element using v-if and v-show and transition classes: html file: js file: css file: Browser: More on: Prof T. Wiedemann Development of web-based applications page 21

    22 Animations - Example CSS animations are used in the same way as CSS transitions, with the difference that the inserted element is animated (movement) The previous example could be extended as follows: html file css file More on: Prof. T. Wiedemann Development web-based applications page 22

    23 Mixins - Example Different components can function similarly or contain the same functionality in some places Mixins allow a functionality to be shared between different components A defined Mixin object can be used in a component Component A Mixin Component B More on this: Prof. T. Wiedemann Development of web-based applications page 23

    24 Advanced Technologies In addition to the existing directives (v-model, v-show), Vue allows you to define and register your own user-defined directives, which are implemented using the Vue.directive ('name') instruction (more on: Templates are recommended in HTML code, but in certain situations it may be desirable to use a render function instead render: function (createelement) Using JSX (syntactic extension of JS) the code can be further reduced (more on: Using Vue functionalities can be expanded globally using plugins. A plugin is used with Vue.use (MyPlugin) (more on this: more advanced topics can be found in the official documentation at All Vue technologies shown so far are pure frontend technologies for use in the Browser and usually also executable independently of a server in combination with other frameworks such as Nuxt are complete client-servers Applications based on JS and Vue can be implemented (=> NodeJS-VL) Prof. T. Wiedemann Development of web-based applications page 24

    25 Vue resources and community very good and wide-ranging documentation and video courses very detailed and well-documented API style guide, examples and cookbook with many practical examples many immediately testable examples on very good forum + chat + meetups many additional tools largest JavaScript Conference with approx. Participants annually in February in Amsterdam - Prof. T. Wiedemann Development of web-based applications Page 25

    26 Outlook for internship task: Architecture of your existing EwA book shops Prof. T. Wiedemann Development of web-based applications page 26

    27 Sources 1/2 [1]: [2]: [3]: [4]: ​​[5]: [6]: 716dac4a / a2f2f692e696d e636f6d2f596b55694f7677 2e706e67 [7]: [8]: [9]: Prof. T. Wiedemann development of web-based applications page 27

    28 Sources 2/2 [10]: [11]: [12]: [13]: [14]: [15]: [16]: [17]: Prof. T. Wiedemann Development of web-based applications page 28