In the previous lesson we are stopping at reactivity. In this section, you will practice with me about events, methods, directives and conditional.
Listening to events
In the previous article we are talking about the reactivity of Vue, the source code is
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <title>Vue 101</title> </head> <body> <h1>Hello!</h1> <div id="app"> <p>My local property: {{ myLocalProperty }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { myLocalProperty: 'Im a local property value' } }); </script> </body> </html> |
To practice with the event, we will add a button to change the value of myLocalProperty
1 2 3 4 5 6 | <div id="app"> <p>My local property: {{ myLocalProperty }}</p> <hr> <button>Click me</button> </div> |
So how to call the event when clicking the button? In Jquery: $('button').click(); But for Vue there is a rule to never manipulate directly with the DOM. They will copy a virtual HTML version and then automatically find the location and update it when the property changes.
So, let’s add the event to the button:
1 2 3 4 | <button @click="myLocalProperty = 'The button has been clicked'">//@click là shorthands của v-on:click Click me </button> |
What happens here: @click="" is a directives in vue. It can be understood that when we click on the declared DOM, we will perform a certain action. Specifically when clicking on the button it changes the value of myLocalProperty from “Im a local property value” to “The button has been clicked”.
Methods
In most cases, using @click you need to do more than change the value of a variable. So learn about methods (functions).
Continue with the above example. When clicking on the button we will call a simple function such as displaying a new random value.
First, replace with the following code:
1 2 | <button @click="buttonClicked">Click me</button> // Chúng ta có thể bỏ qua "()" sau function khi ta không truyền bất kì đối số nào vào function. |
Next we will handle the buttonClicked function
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script> const app = new Vue({ el: '#app', data: { myLocalProperty: 'Im a local property value' }, methods: { // Khai báo một thuộc tính methods bên trong Vue instance, bên trong nó đặt tất cả các functions/methods. buttonClicked() { // Hàm này chính là hàm đã gọi ở sự kiện click trên DOM và nó ko có tham số truyênf vào. const newText = 'The new value is: ' + Math.floor( Math.random() * 100); // Chúng ra randoms một số mới this.myLocalProperty = newText; // Gán giá trị của chuỗi mới cho `myLocalProperty` } } }); </script> |
In methods, this keyword will refer to the Vue instance. Vue will do some magic behind so you can read / write your properties inside the data by doing this.property = value.
Done, now reload the index and click the button to see the updated myLocalProperty value.
A simple if-else
One of the most commonly used parts is conditional. The ability to show or hide parts of the application depends on a condition or value.
Continuing the @click example above, we will change the button clicks to generate random numbers but instead of returning the string we will convert the display to a few elements on the DOM.
Firstly, restructure your script a bit:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> const app = new Vue({ el: '#app', data: { myLocalProperty: 'Im a local property value', randomNumber: 0 // add thêm một biến local mới với giá trị mặc định là 0 }, methods: { buttonClicked() { this.randomNumber = Math.floor(Math.random() * 100); // Thay dổi function lưu lại số ngẫu nhiên vào biến đã khởi tạo } } }); </script> |
We want to show / hide the content of the <p> tag depending on the randomNumber value every time we click the button. Show only when the value is greater than 50
1 2 3 4 5 6 7 8 9 10 11 12 | <div id="app"> <p>My local property: {{ myLocalProperty }}</p> <hr> <button @click="buttonClicked">Click me</button> <hr> <!-- 1 --> <p v-if="randomNumber >= 50">randomNumber is >= 50!</p>// v-if là một directive của Vew. Về mặt lý thuyết, v-if "bảo" với Vue chỉ hiển thị phần tử này khi điều kiện bên trong nó là đúng cụ thể là "randomNumber lớn hơn hoặc bằng 50" <!-- 2 --> <p v-else>Sorry, randomNumber is only <b>{{ randomNumber }}</b></p>// Bất cứ khi nào có v-if sẽ có v-else là trường hợp khác không đúng với trường hợp trên (Either/or) </div> |
Reload the page and see what the <p> tag is all about!
v-show
Another option for showing or hiding a conditional web element is the v-show directive. The way to use v-show is similar to v-if.
The difference between v-show and v-if is that elements marked with v-show will always be rendered and contained in the DOM; v-show only enables the display property to be turned on and off.
v-show doesn’t support <template> tag nor does it work with v-else.
v-if and v-show – when to use what ???
v-if is rendering under the “true” condition, because it ensures that the event listener and child components inside the conditional block are canceled and re-initialized during the on / off process.
v-if is also lazy: if the condition value is false on the first render, it will do nothing – the conditional block will not be rendered until the condition becomes true the first time.
Meanwhile, v-show is much simpler – the element will be rendered regardless of whether the condition is true or false, and only shown / hidden by CSS.
In general, v-if has high on / off costs, and v-show has high render costs. So, if you need to turn on / off frequently, use v-show. Conversely, if conditions rarely change throughout the life of an application, use v-if.
Conclusion
With the parts I mentioned, you may have started creating to make your application more interesting. Please look forward to and follow part3