Master Vue
Published on February 4, 2022
5min to read
🙏 "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, for instance Vue Router, Vuex 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Learning Vue</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-on:input="changeTitle">
<p>{{ title }}</p>
</div>
<script src="scripty.js"></script>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
title: 'Hello World!'
},
methods: {
changeTitle: function(event) {
this.title = event.target.value;
}
}
});
</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
const data = {
message: 'Hello'
};
const handler = {
set(target, key, value) {
console.log(target);
console.log(key);
console.log(value);
console.dir(value);
}
};
const proxy = new Proxy(data, handler);
proxy.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
- 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.
We will cover:
- Vue Router Fundamentals
- Dynamic routing - router params
- How to pass router params
- Lazy loading
- Programmatic Navigation