- Vue.js 2 Web Development Projects
- Guillaume Chau
- 218字
- 2021-07-02 22:34:27
Button and click events with v-on
Now, we will need a button to call this method. Create a new button element inside a p element with the toolbar class:
<aside class="side-bar"> <!-- Toolbar --> <p class="toolbar"> <!-- Add note button --> <button><i class="material-icons">add</i> Add note</button> </p> </aside>
To call the addNote method when the user clicks on the button, we will need a new directive--v-on. The value will be the function called when the event is caught, but it also expects an argument to know which event to listen to. However, how do we pass the argument to the directive, you might ask? It's quite simple! Add a : character after the directive name, followed by the argument. Here is an example:
<button v-directive:argument="value">
In our case, we are using the v-on directive with the event name as the argument, and more specifically, the click event. It should look like this:
<button v-on:click="callback">
Our button should call the addNote method when it is clicked on, so go ahead and modify the button we added earlier:
<button v-on:click="addNote"><i class="material-icons">add</i> Add note</button>
There is an optional special shortcut for the v-on directive--the @ character that allows you to rewrite the preceding ;code to the following:
<button @click="addNote"><i class="material-icons">add</i> Add note</button>
Now that our button is ready, try adding a few notes. We don't see them in the app yet, but you can open the devtools and note the note list change:

- Modular Programming with Python
- NLTK基礎教程:用NLTK和Python庫構建機器學習應用
- MongoDB for Java Developers
- MySQL 8 DBA基礎教程
- ASP.NET Core 2 and Vue.js
- KnockoutJS Starter
- Python時間序列預測
- Building Serverless Applications with Python
- Python深度學習:模型、方法與實現
- 利用Python進行數據分析
- Mastering Python Design Patterns
- Cocos2d-x Game Development Blueprints
- 小程序從0到1:微信全棧工程師一本通
- UX Design for Mobile
- PHP Microservices