- Vue.js 2 Web Development Projects
- Guillaume Chau
- 176字
- 2021-07-02 22:34:24
Adding basic interactivity with directives
Let's add some interactivity to our otherwise quite static app, for example, a text input that will allow the user to change the message displayed. We can do that in templates with special HTML attributes called directives.
All the directives in Vue start with v- and follow the kebab-case syntax. That means you should separate the words with a dash. Remember that HTML attributes are case insensitive (whether they are uppercase or lowercase doesn't matter).
The directive we need here is v-model, which will bind the value of our <input> element with our message data property. Add a new <input> element with the v-model="message" attribute inside the template:
<p id="root">
<p>{{ message }}</p>
<!-- New text input -->
<input v-model="message" />
</p>
Vue will now update the message property automatically when the input value changes. You can play with the content of the input to verify that the text updates as you type and the value in the devtools changes:

There are many more directives available in Vue, and you can even create your own. Don't worry, we will cover that in later chapters.
- Mastering JavaScript Functional Programming
- Power Up Your PowToon Studio Project
- Blockly創意趣味編程
- 征服RIA
- 嚴密系統設計:方法、趨勢與挑戰
- Apache Camel Developer's Cookbook
- 零代碼實戰:企業級應用搭建與案例詳解
- Continuous Delivery and DevOps:A Quickstart Guide Second Edition
- Web前端開發最佳實踐
- Python數據可視化之matplotlib實踐
- JavaScript Unit Testing
- Learning TypeScript
- SOA Patterns with BizTalk Server 2013 and Microsoft Azure(Second Edition)
- Java網絡編程實用精解
- Mastering Responsive Web Design