Z našeho kurzu Základy JavaScriptu jsme se naučili, že zpracování událostí je nejdůležitějším konceptem při vývoji frontendu a Vue.js, protože je rozhraním JavaScriptu, musí mít vestavěný stejný koncept.
V tomto článku se zaměříme na dva aspekty, zpracování událostí pomocí direktivy v-on a zpracování vstupu formuláře pomocí direktivy v-model . A než začneme mluvit o sekci skriptů Vue.js, projdeme si rychle vazby stylů a vazby tříd.
Zpracování událostí
Událost je uživatelský vstup, může to být vstup z klávesnice nebo kliknutí myší, uživatel obvykle očekává nějakou odezvu poté, co událost proběhne. Obsluha události naslouchá této události a na pozadí provede nějaké akce a vrátí něco jako odpověď.
Pokud nevíte, co je to událost, zde je podrobné vysvětlení: Základy JavaScriptu #7:Zpracování událostí
v-on direktivu, kterou můžeme zkrátit pouze na @ symbol, se používá k poslechu událostí ve Vue.js. Můžeme jej použít k upřesnění, jaký druh události posloucháme, jaký druh akce provedeme po přijetí této události.
v-on:click="someAction"
@click="someAction"
To someAction může být jednoduchý JavaScriptový výraz nebo velmi komplikovaná metoda, která nám umožňuje budovat složitější logiku.
v-on:click="count = count + 1"
v-on:click="someMethod()"
Někdy metoda vyžaduje až předání dalších argumentů.
<script>
export default {
...
methods: {
add(num) {
this.count = this.count + num
}
}
}
</script>
<template>
<p>count = {{count}}</p>
<button v-on:click="add(1)">Add 1</button>
<button v-on:click="add(5)">Add 5</button>
<button v-on:click="add(10)">Add 10</button>
<button v-on:click="add(100)">Add 100</button>
</template>
Je také možné, aby jedna událost spustila více obslužných rutin událostí a obslužné rutiny jsou odděleny pomocí operátoru čárky. Tentokrát například po kliknutí na tlačítko prohlížeč zobrazí okno s upozorněním a znovu vykreslí webovou stránku:
<script>
export default {
data() {
...
},
methods: {
...
say() {
var msg = 'count = ' + this.count
alert(msg)
}
}
}
</script>
<template>
<p>count = {{count}}</p>
<button v-on:click="add(1), say()">Add 1</button>
...
</template>
Modifikátory
Modifikátory se používají k předání dalších podrobností o události. Můžeme například použít .once modifikátor, který Vue řekne, že tato událost bude spuštěna pouze jednou:
<template>
<p>count = {{count}}</p>
<button v-on:click.once="add(1)">Add 1</button>
</template>
Tentokrát bude tlačítko "Přidat 1" fungovat pouze jednou.
Existují některé další modifikátory, například .prevent , která zastaví výchozí akci události. Nebo .stop , který zastaví šíření události. Pokud nevíte, které to jsou, přečtěte si prosím článek o Event Handling v kurzu JavaScript.
<!-- the click event's propagation will be stopped -->
<a @click.stop="doThis"></a>
<!-- the submit event will no longer reload the page -->
<form @submit.prevent="onSubmit"></form>
<!-- modifiers can be chained -->
<a @click.stop.prevent="doThat"></a>
Existuje také jiný typ modifikátoru, který umožňuje obsluze události poslouchat události z konkrétní klávesy nebo tlačítka myši nebo jakékoli z kombinací:
<template>
<!-- Right Click -->
<div v-on:click.right="doSomething">Do something</div>
<!-- Control + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
<!-- Enter Key -->
<div v-on:keyup.enter="doSomething">Do something</div>
<!-- Alt + Enter -->
<div v-on:keyup.alt.enter="doSomething">Do something</div>
</template>
Vazba vstupu formuláře
Formulář je velmi důležitou součástí při vývoji webu, poskytuje uživateli portál pro komunikaci s backendem. Z našeho kurzu o formulářích HTML však víme, že formuláře mohou mít mnoho různých typů vstupů a každý z nich je spojen s jiným datovým typem. Bolelo by to v krku, kdybychom se pokusili zpracovat všechny tyto datové typy jeden po druhém.
Naštěstí s Vue.js můžeme použít jedinou direktivu, v-model , svázat všechna vstupní data bez ohledu na jejich datové typy. Například zde máme standardní textový vstup:
<input v-model="message" />
<p>Message is: {{ message }}</p>
Zde má uživatelský vstup typ string a bude vázána na proměnnou massage .
Víceřádkové zadávání textu funguje úplně stejně:
<textarea v-model="message"></textarea>
<p>Message is: {{ message }}</p>
Zaškrtávací políčko
<script>
export default {
data() {
return {
checked: false
}
}
}
</script>
<template>
<input type="checkbox" v-model="checked" />
<p v-if="checked">The box is checked.</p>
<p v-else>The box is NOT checked.</p>
</template>
Pokud jde o zaškrtávací políčko, vstup uživatele je logická hodnota, buď true nebo false . V tomto příkladu je uživatelský vstup vázán na proměnnou checked a direktivu v-if se použije ke kontrole pravdivosti checked .
Někdy však formulář obsahuje více zaškrtávacích políček, což znamená, že mají pouze dvě hodnoty (true nebo false ) by nestačilo. V tomto případě budeme muset přidat value atribut ke každému zaškrtávacímu políčku:
<script>
export default {
data() {
return {
checkedBoxes: []
}
}
}
</script>
<template>
<div id="v-model-multiple-checkboxes">
<input type="checkbox" id="one" value="one" v-model="checkedBoxes" />
<label for="one">one</label>
<input type="checkbox" id="two" value="two" v-model="checkedBoxes" />
<label for="two">two</label>
<input type="checkbox" id="mike" value="three" v-model="checkedBoxes" />
<label for="three">three</label>
<br />
<span>Checked boxes: {{ checkedBoxes }}</span>
</div>
</template>
Všimněte si tentokrát proměnné checkedBoxes je vázáno na pole, a když je políčko zaškrtnuté, jeho hodnota (ať už jste přiřadili jeho value atribut) bude připojen k tomuto poli.
Rádio
Rádio je něco jako skupina s více zaškrtávacími políčky, kromě toho, že můžete vybrat pouze jednu možnost. Takže v tomto případě bude uživatelským vstupem vždy jeden řetězec.
<div id="v-model-radiobutton">
<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
<br />
<span>Picked: {{ picked }}</span>
</div>
Proměnná picked bude řetězec namísto pole.
Vyberte
Pro jeden výběr je proměnná typ řetězce.
<script>
export default {
data() {
return {
selected: ''
}
}
}
</script>
<template>
<select v-model="selected">
<option disabled value>Please select one</option>
<!--
If you assign a 'value' attribute, that value will be assigned to the variable 'selected'
-->
<option value="aaaaaaa">A</option>
<!--
If you do not assign a value attribute, whatever is inside the <option> element
will be assigned to the variable 'selected'
-->
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</template>
<style>
</style>
U muliselectu bude proměnná vázána na pole.
<script>
export default {
data() {
return {
selected: []
}
}
}
</script>
<template>
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</template>
Vazba stylu
Vazba třídy
Z našeho kurzu Základy CSS víme, že pomocí třídy můžeme přiřadit stejný kód CSS různým prvkům HTML a změnou názvu třídy můžeme snadno změnit kód CSS přidružený k tomuto prvku.
Název třídy prvku HTML můžeme ve Vue.js dynamicky změnit takto:
<div v-bind:class="{ active: isActive }"></div>
V tomto příkladu active je název třídy a isActive je proměnná s booleovskou hodnotou. Pokud isActive je true a poté název třídy active bude vykreslen.
Můžeme zde mít více názvů tříd:
<div v-bind:class="{ class-one: isClassOneActive, class-two: isClassTwoActive }"></div>
Vazba CSS
Můžeme také přímo svázat CSS kódy takto:
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
}
</script>
<template>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</template>
Ačkoli je obvykle lepší umístit objekt do metody data(), aby naše sekce šablony vypadala čistěji:
<script>
export default {
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
}
</script>
<template>
<div v-bind:style="styleObject"></div>
</template>