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.
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.
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>910</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>1920<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>
Enable reactivity, bind data from our instance and on to the template interpolation
Reactivity click listener
createApp({...}) -> beforeCreate() -> created() --> beforeMount() -> mounted() -> Mounted Vue instance
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};45const handler = {6 set(target, key, value) {7 console.log(target);8 console.log(key);9 console.log(value);10 console.dir(value);11 }12};1314const proxy = new Proxy(data, handler);1516proxy.message = "Hi";
github theWhiteFox Master Vue repo Master Vue JS (Vue) a reactive front end web framework:
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.
One can bind data via interpolation ({{ }}) or the v-bind (":") directive. One can listen for events via v-on ("@")
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
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.
https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api
V3 VueJS component composition api template refs
https://v3.vuejs.org/guide/component-provide-inject.html
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.
We will cover:
