How to setup vue.js?
npm create vue@latest
$ cd <project>
$ yarn
$ yarn serve
How is vue superior?
Vue.js is an SPA framework like Angular or React.js written by Evan You an ex Google employee with others. Vue.js is a very widely used JS framework and you can learn a lot about web development using it.
In this example we are using the computed() lifecycle hook and simple input HTML element with date as input type.
We are using minimal code to implement logic of simple flight booking with the in built browser facility for date select using calendar.
Vue.js makes SPA work a little fun since there is not much tooling like other bulky libraries.
It uses a template element for hold HTML unlike svelte.
Flight ticket booking with vue.js
Code sample and demo
This is the demo.
The code is here. BookFlight.vue
<script setup>
import { ref, computed } from 'vue'
const flightType = ref('one-way flight')
const departureDate = ref(dateToString(new Date()))
const returnDate = ref(departureDate.value)
const isReturn = computed(() => flightType.value === 'return flight')
const canBook = computed(
() =>
!isReturn.value ||
stringToDate(returnDate.value) > stringToDate(departureDate.value)
)
function book() {
alert(
isReturn.value
? `You have booked a return flight leaving on
${departureDate.value} and returning on ${returnDate.value}.`
: `You have booked a one-way flight leaving on
${departureDate.value}.`
)
}
function stringToDate(str) {
const [y, m, d] = str.split('-')
return new Date(+y, m - 1, +d)
}
function dateToString(date) {
return (
date.getFullYear() +
'-' +
pad(date.getMonth() + 1) +
'-' +
pad(date.getDate())
)
}
function pad(n, s = String(n)) {
return s.length < 2 ? `0${s}` : s
}
</script>
<template>
<center>
<h1> Book a flight ticket using vue.js </h1>
<select v-model="flightType">
<option value="one-way flight">One-way Flight</option>
<option value="return flight">Return Flight</option>
</select>
<input type="date" v-model="departureDate">
<input type="date" v-model="returnDate" :disabled="!isReturn">
<button :disabled="!canBook" @click="book">Book</button>
<p>{{ canBook ? '' : 'Return date must be after departure date.'
}}</p>
</center>
</template>
<style>
select,
input,
button {
display: block;
margin: 0.5em 0;
font-size: 18px;
}
button {
background: blue;
}
input[disabled] {
color: #999;
}
</style>
main.js
import { createApp } from 'vue'
import BookFlight from './BookFlight.vue';
createApp(BookFlight).mount('#app')
Conclusion
In learning the vue.js syntax step by step we can master it one day. We see the v-model and @click handler.
The key aspects of vue is in learning about the computed() method, when it is invoked and how it is used.
The @click is used for button clicks, submit actions and similar.
Answer
How is HMAC computed using math?
HMAC stands for hashed message authentication code. It is a special type of checksum or signature algorithm in which a secret key is used in one of the rounds.
Mathematically speaking a hash function is not different from a cipher but it is always of a contant size and one way. It is impossible to compute the original message from the output.
Question
What is an LLM?
Feedback
Developing a revenue stream selling SaaS online is doable and fun but very difficult. You need years of effort and loads of passion to make it a reality.
This newsletter helps you get there one day.