- Vue.js Quick Start Guide
- Ajdin Imsirovic
- 206字
- 2021-06-24 18:23:56
Modifiers
The directives in Vue are further extended with the help of modifiers.
The link to official documentation on modifiers in directives can be found at this link: https://vuejs.org/v2/guide/forms.html#Modifiers.
To use a modifier, we simply append it to a directive. The simplest possible example might look a bit like this:
<!-- HTML -->
<div>
<input v-model.trim="userInput" placeholder="type here">
<p>You have typed in: {{ userInput }}</p>
</div>
// js
new Vue({
el: 'div',
data() {
return {
userInput: ""
}
}
})
We have just appended the trim modifier to the v-model directive.
You can view the example for this code at this link: https://codepen.io/AjdinImsirovic/pen/eKeRXK.
This modifier will trim any whitespace (such as spaces or tabs) typed into the input field by the user.
Before continuing with this 10,000-foot overview of Vue syntax, let's also mention the v-on directive, which is used for event handling. Here is a quick example:
<!-- HTML -->
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
// JS
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
Vue even provides shortcut syntax for v-on: the @ symbol. Thus, we can replace v-on:click with just @click and our Vue counter will still work.
To view this example in http://codepen.io/, visit the following URL: https://codepen.io/AjdinImsirovic/pen/PaOjvz.
- Learning QGIS 2.0
- Socket.IO Real-time Web Application Development
- 射頻通信系統(tǒng)
- 物聯(lián)網(wǎng)技術(shù)與應(yīng)用
- 網(wǎng)絡(luò)基礎(chǔ)與網(wǎng)絡(luò)管理項(xiàng)目化教程
- 高級(jí)網(wǎng)絡(luò)技術(shù)
- AWS Lambda Quick Start Guide
- 基于IPv6的家居物聯(lián)網(wǎng)開發(fā)與應(yīng)用技術(shù)
- 物聯(lián)網(wǎng)基礎(chǔ)及應(yīng)用
- Guide to NoSQL with Azure Cosmos DB
- NB-IoT原理和優(yōu)化
- 區(qū)塊鏈技術(shù)與應(yīng)用:打造分布式商業(yè)新生態(tài)
- 物聯(lián)網(wǎng)與智慧廣電
- 加密與解密實(shí)戰(zhàn)全攻略
- SD-WAN 架構(gòu)與技術(shù)