- 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.
- Node.js Design Patterns
- Python 深度學習
- 信息安全技術
- Unity 2017 Mobile Game Development
- INSTANT Sinatra Starter
- Natural Language Processing with Java and LingPipe Cookbook
- Java SE實踐教程
- C專家編程
- Spring技術內幕:深入解析Spring架構與設計原理(第2版)
- Python大學實用教程
- 從0到1:HTML5 Canvas動畫開發
- ABAQUS6.14中文版有限元分析與實例詳解
- 軟件工程與UML案例解析(第三版)
- 從零開始學Python大數據與量化交易
- Building a Media Center with Raspberry Pi