theWhiteFox DESIGNING & BUILDING WEBSITE / MOBILE APPS

thewhitefox

Master Vue

2022 February 4th Written by theWhiteFox

1🙏 "I become Vue Master" 🙇

"A true master is an eternal student" - Master Yi

In this post I will learn some basic & advanced features of Vue JS utilizing the Learning-by-doing principle.

What is Vue and why should I use it ?

Vue is an open source progressive JavaScript(JS) framework mainly used for User interfaces (UIs) front-end dev, it is the ViewModel in Model-View-ViewModel (MVVM) software architectural pattern. Unlike React it is a full stack reactive, progressive JS framework with ease of integration, Vue Router, Vuex for instance can be easily added. The magic of Vue is it creates a global object for dynamic content updates, leveraging JS proxies by essentially wrapping our properties with this JS feature & automatic updating with it's built-in reactivity.

Lets jump right in by building a basic Vue application (app)

Code here GitHub repo theWhiteFox master vue

https://blog.bitsrc.io/performing-http-requests-fetch-vs-axios-b62b44fed10d

Vue Instance, Components & Testing.

  • Progressive frame work -> scale up or scale down, an adoptable framework with tools added when needed
  • Approachable -> less of a learning curve for building complex Web app than React and Angular
  • Versatile -> internal tools easily integrated ecosystem -- Vue-cli -> Command Line Interface rapid prototyping - hotfix -- vue router -> client side routing SPA -- veux how data is managed in an application -- testing
  • Performant -> small optimized virtual DOM
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Learning Vue</title>
8 <script src="https://unpkg.com/vue/dist/vue.js"></script>
9
10</head>
11<body>
12 <div id="app">
13 <input type="text" v-on:input="changeTitle">
14 <p>{{ title }}</p>
15 </div>
16 <script src="scripty.js"></script>
17</body>
18</html>
19
20<script>
21new Vue({
22 el: '#app',
23 data: {
24 title: 'Hello World!'
25 },
26 methods: {
27 changeTitle: function(event) {
28 this.title = event.target.value;
29 }
30 }
31});
32</script>

The Vue Instance Data

Enable reactivity, bind data from our instance and on to the template interpolation

Methods and Handling Events

Reactivity click listener

Lifecycle hooks methods

createApp({...}) -> beforeCreate() -> created() --> beforeMount() -> mounted() -> Mounted Vue instance

Components

We will break the app into components, reusable parts to help us to build, debug and test. Component registration global vs local, components used more than once register components locally. Object key value pairs, auto translates to kebab case HTML style. With Vue build complex UI apps using lean components as building blocks. Custom html elements with JS and style sections.

Receive HTML code content inside div that maybe using Vue features slot name="default" attribute only v-slot:default flexibility \$slots built in property provided by Vue scoped slots:

  • a niche feature

  • pass data from defined slot data to another component

  • v-bind: the passed data template v-slot or shorthand #

  • object properties are generated by Vue

  • Component Registration & Styling

  • Slots & Dynamic Components

  • Naming & Folder Structure

1const data = {
2 message: 'Hello'
3};
4
5const handler = {
6 set(target, key, value) {
7 console.log(target);
8 console.log(key);
9 console.log(value);
10 console.dir(value);
11 }
12};
13
14const proxy = new Proxy(data, handler);
15
16proxy.message = "Hi";

github theWhiteFox Master Vue repo Master Vue JS (Vue) a reactive front end web framework:

  • DOM Interaction
  • Templates & Data Binding
  • Event Handling

DOM & Templates

Vue can be used to define the goal instead of the steps -> declarative approach. Connect Vue to HTML via "mount": Vue then renders the real DOM based on the connected template.

Data & Event Bindings

One can bind data via interpolation ({{ }}) or the v-bind (":") directive. One can listen for events via v-on ("@")

Styling

Dynamic CSS class and inline style bindings are supported by Vue. Vue offers multiple special syntaxes (objected-based, array-based) for efficient bindings

props properties bind

Pattern: unidirectional data flow communicated parent -> child

Key features

  • createApp Vue Object with key value pairs
  • data() method returns Vue Object
  • methods are functions that can be called inside our Object createApp
  • mount method to control HTML using an id
  • {{ }} Interpolation
  • v-bind Directive
  • v-html="" output HTML content https://vuejs.org/images/logo.svg?_sw-precache=346e12ee28bb0e5f5600d47beb4c7a47
  • v-on listen to user events
  • \$event variable
  • modifiers
  • v-model two way binding
  • computed properties
  • Dynamic Styling with Inline Styles
  • \$refs

Conditional Content and lists

Conditional content v-if & v-show directives, v-if being the more important conditional. As in all programming languages if is a conditional that is executed if a condition is true. Vue v-if renders content if a certain condition is true. v-else can be added to v-if as with most programming languages use the v-else statement to specify a block of code to be executed / rendered if the condition is false. v-else-if statement to specify a new condition if the first condition is false. v-show is css hide or display. v-for a for directive outputting lists of data and can extract values, keys, and indexes, can be used with arrays, objects and ranges (numbers) again as in most programming MDN for...in v-for and v-if can be used together however do not use on the same element.

Component Communication

  • components are used to build UIs by combining them
  • components build "parent-child" relations and use "unidirectional data flows" for communication
  • Custom Events (child => parent) -- "Custom Events" are emitted (via \$emit) to trigger a method in a parent component
  • Props (parent => child) -- "Props" are used to pass data from a parent to a child component -- Props should be defined in advance, maybe explicitly like type, required, etc
  • Provide Inject -- if data needs to be passed across multiple components("pas-through") use provide - Inject -- Provide data in a parent component then inject into child component

Composition API

https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api

Template Refs

V3 VueJS component composition api template refs

Provide / inject

https://v3.vuejs.org/guide/component-provide-inject.html

Router

As we build out our Vue app a modern single-page web application (SPA) we will want to map components to routes as this is an SPA. As a Vue SPA we transition from page to page on the client-side without sending requests to our server making data faster to load. Vue Router is the official library for page navigation in Vue applications, a powerful simple to use router. With this post while building this SPA, we will touch off how to use Vue Router.

theWhiteFox vue-routing repo

We will cover:

  • Vue Router Fundamentals
  • Dynamic routing - router params
  • How to pass router params
  • Lazy loading
  • Programmatic Navigation
Reference
Vue.js IntroductionMDN Cross-site scripting
MDN InputVue events
reuseable-charting-d3flaviocopes Vue VScode
MDN Global_Objects ProxyVue v3 lifecycle-hooks
Core.jsVuejs Cookbook Axios
Router vuejs dynamic matchingMVC vs MVVM
Vue: Routing For Dummies
Curriculum Vitae