Vue.js е много мощна, лесна за научаване и достъпна библиотека, която със знанието на HTML, CSS и Javascript можем да започнем да изграждаме уеб приложения в нея. Vue.js е създаден чрез комбиниране на най -добрите функции от вече съществуващите Angular и React Frameworks. Това е прогресивна и реактивна рамка на Javascript, която се използва за изграждане на потребителски интерфейси (потребителски интерфейси) и SPA (приложения на една страница), поради което разработчиците обичат да кодират и да чувстват свобода и комфорт, докато разработват приложения във Vue.js. разгледайте Слушането и обработката на събития във Vue.js., ще знаем, че той предоставя v-on директива за слушане и обработка на събития. Можем да използваме директивата v-on, за да слушаме DOM и да изпълняваме необходимите задачи. Той също така предоставя много манипулатори на събития. В тази статия обаче само ще научим и ще продължим да се фокусираме върху събитията при кликване. И така, нека започнем!
Точно като събитието onClick на Javascript, Vue.js предоставя v-on: click за слушане на събития.
Синтаксисът за v-on: click събитие ще бъде следния:
< бутон v-on: щракнете='functionName'>Щракнете</ бутон >
Vue.js предоставя стенография @ вместо да използва и v-on.
< бутон @click='functionName'> Щракнете</ бутон >
Vue.js не спира само да слуша събитието на щракване и да извиква функцията. Той също така ще ни позволи директно да напишем всяка аритметична операция или нещо свързано с Javascript вътре в кавичките. Просто така:
< бутон @click=„брой += 1“> Добавяне</ бутон >
Vue.js ни предоставя да извикаме метода или функцията във вграден Javascript израз, както е показано по -долу:
< бутон @click='message (' Здравей ')'> Покажи</ бутон >Използвайки манипулаторите на събития на Vue.js, можем да осъществим достъп и до DOM събитието, използвайки вграден оператор, като предадем специално предоставената променлива $ event на Vue.js в аргумента на метода, точно като примера по -долу:
< бутон @click='message (' Здравей ', $ събитие)'> Изпрати</ бутон >
Vue.js също ни предоставя възможност за извикване на множество функции или методи. Можем да извикаме повече от една функция и да ги разделим със запетаи, като този пример:
< бутон @click='first (' Hello '), second (' Hi ', $ event)'> Изпратете</ бутон >Vue.js предоставя и модификатори на събития.
Модификатори на събития
Често се налага да извикваме модификатори заедно със събитията. Така че Vue.js предоставя някои от следните модификатори:
.Спри се
Това ще спре предаването на събитието при щракване.
< да се @click.stop='направите това'></ да се >.предотвратявам
Това ще попречи на страницата да се презареди или пренасочи.
< форма @submit.prevent='onSubmit'></ форма >.веднъж
То ще задейства събитието щракване само веднъж.
< да се @click.once='направите това'></ да се >.улавяне
Най -често се използва за добавяне на слушател на събития.
< div @click.capture='направите това'> ...</ div >Можем също да веригираме модификаторите. Имайте предвид обаче, че редът на модификаторите има значение и това ще повлияе на резултатите.
< да се @click.stop.prevent='направи го'></ да се >Заключение
В тази статия ние разгледахме цялата концепция за обработка на събития Click от ниво noob до нинджа. Научихме за различните синтаксиси при писане на събития при кликване и различните начини за използване | _+_ | директива, предоставена от Vue.js за улеснение на разработчиците и различни модификатори на събития. За по -полезно съдържание като това, свързано с Vue.js, продължете да посещавате linuxhint.com.