Interpolation, Data binding
Vue.js - Assignment
V-On and V-bind
- v-on is used to listen to events and attach event handlers to elements. It allows you to react to user interactions, such as clicks, mouse movements, and keyboard events. You can bind methods or inline expressions to the event using v-on. For example, v-on:click="handleClick" will call the handleClick method when the element is clicked.
- v-bind is used to bind data or expressions to an element's attribute, property, or class. It allows you to dynamically update the values of attributes based on the data in your Vue instance. You can use v-bind to bind data to attributes like src, href, class, style, etc. For example, v-bind:href="url" will bind the value of the url variable to the href attribute of the element.
We don't have to write this blue highlighted line, because the v-model is the capsule of these two.
=> two way binding
Computed property
In Vue.js, a computed property is a property that is derived from the existing data properties in your Vue instance. It allows you to define a property in a more declarative manner, based on the values of other properties, and it automatically updates whenever its dependencies change.
Computed properties are defined as functions within the computed property of a Vue component. Here's an example:
new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
});In the above example, the fullName computed property is dependent on the firstName and lastName data properties. Whenever either of these properties changes, the fullName property will be automatically recomputed.
Computed properties are cached based on their dependencies. It means that if the dependencies have not changed since the last computation, Vue will return the cached result instead of recomputing it.
You can use computed properties in your templates just like any other data property. For example, you can bind them to display their values:
<p>{{ fullName }}</p>Computed properties provide a clean and efficient way to derive complex values from your existing data properties, without having to manually update them whenever the dependencies change.
Methods vs Computed vs Watch
v-on = @
v-bind = ""
e.g. v-bind:value="" =:value=""
Assignment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue@next" defer></script>
<script src="./app.js" defer></script>
</head>
<body>
<header>
<h1>Reactivity in Action</h1>
</header>
<section id="assignment">
<button @click="addNumber(5)">Add 5</button>
<button @click="addNumber(1)">Add 1</button>
<!-- 1) Connect the buttons and calculate a value (a number) -->
<!-- Show "Not there yet" until you reach a result of exactly 37 -->
<!-- Show "Too much!" if the result is greater than 37 -->
<p>Result: {{result}}</p>
<!-- 2) Watch for changes in "result" and reset the value to 0 after 5 seconds -->
</section>
</body>
</html>const app = Vue.createApp({
data() {
return {
number: 0,
};
},
watch: {
result() {
const that = this;
setTimeout(function () {
that.number = 0;
}, 5000);
},
},
computed: {
result() {
if (this.number < 37) {
return "Not there yet!";
} else if (this.number === 37) {
return this.number;
} else {
return "Too much!";
}
},
},
methods: {
addNumber(num) {
this.number = this.number + num;
},
},
});
app.mount("#assignment");This code sets up a Vue application with the following functionality:
Data: The application has a data property that defines a number variable with an initial value of 0.
Watch: The application has a watch property that watches for changes in the result computed property. Whenever the result changes, a setTimeout function is triggered after a delay of 5 seconds. Inside the setTimeout function, that is used to capture the reference to the Vue instance (this). It then sets the number property back to 0.
Computed: The application has a computed property that defines a result computed property. This property depends on the number property. If the number is less than 37, it returns the string "Not there yet!". If the number is exactly 37, it returns the number itself. Otherwise, it returns the string "Too much!".
Methods: The application has a methods property that defines an addNumber method. This method takes a num parameter and adds it to the number property.
Mounting: The application is mounted on an element with the ID "assignment". This means that the Vue instance will control and render the content inside that element.
Overall, this code sets up a simple Vue application with a reactive number property, a computed result property based on the value of number, a method to modify the number property, and a watcher to reset the number property after a certain condition is met.
Why do we set 'const that = this'? not just using 'this' directly?
In the code provided, that is used to capture the reference to the Vue instance (this) in the setTimeout function. This is done to ensure that the correct reference to the Vue instance is used inside the setTimeout callback.
In JavaScript, the value of this inside a regular function depends on how the function is invoked. When using setTimeout, the this value inside the callback function will not automatically refer to the Vue instance. It will typically refer to the global object (window in a browser context) or be undefined if strict mode is enabled.
By assigning this to a variable named that before entering the setTimeout callback, you create a closure that retains the reference to the Vue instance. This allows you to access the Vue instance properties and methods correctly inside the setTimeout callback by using that instead of this.
Using that in this context is a common practice in JavaScript to ensure the correct scope is maintained within asynchronous functions or callbacks. However, it's worth noting that with the introduction of arrow functions in ES6, you can also use an arrow function to preserve the this context without the need for an additional variable.
Dynamic Styling
Check two way binding of V-model
'Vue.js - The Complete Guide' 카테고리의 다른 글
| Section 06: Understanding Vue Components - Connected Vue Instances (0) | 2023.05.30 |
|---|---|
| Section 05: Vue: Behind the Scenes - How Vue Works (0) | 2023.05.30 |
| Section 04: Course Project: The Monster Slayer Game (0) | 2023.05.30 |
| Section 03: Conditional Content & Lists - Rendering More...Sometimes (0) | 2023.05.30 |
| Section 01: Getting Started - What is Vue.js? (0) | 2023.05.11 |