<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
<input type="text" v-on:input="setMessage" />
<p>{{message}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
Vue.createApp({
data() {
return {
message: 'Hello Vue 3!'
}
},
methods: {
setMessage(event) {
this.message = event.target.value;
}
}
}).mount('#app');
</script>
</body>
</html>npm create vue@latest полноценное Vue приложение на основе TS
Привязка к атрибутам Для привязки к атрибутам html-элементов предназначена директива v-bind:
Для привязки атрибутов также можно использовать сокращенную форму:
{{text}}
если необходимо, чтобы при изменении значения свойства элемент html отображал только первое значение свойства до его изменения, то применяется директива v-once:
Для привязки элемента к коду html применяется директива v-html:
Для обработки ввода пользователя и событий элементов html в Vue 3 применяется директива v-on, после которой через двоеточие указывается тип обрабатываемого события:
v-on:click="действия"
Также мы можем использовать сокращенный синтаксис для определения обработчиков событий:
<button @click="counter++">+
Получение объекта события При генерации события в его обработчике в качестве параметра мы можем получить объект, который инкапсулирует всю информацию о событии: ( $event)
акже можно прикрепить к событию сразу несколько обработчиков:
Для создания 2 привязки используется директива v-model. Однако стоит отметить, что эта директива может применяться только к html-элементам , , <textarea> и к компонентам Vue. Стоит отметить, что директива v-model игнорирует значения атрибутов value, checked и selected полей ввода, а для установки начального значения следует использовать свойства объекта из кода javascript. Кроме обычных свойств объект Vue может содержать так называемые вычисляемые свойства или computed properties, который во многом аналогичны функциям, но в то же время отличаются от них Вычисляемое свойство можно разделить на сеттер и геттер. Геттер возвращает значение, а сеттер устанавливает. По умолчанию свойство имеет только геттер. computed:{ fullmessage: { get: function () { return this.message + ' ' + this.message; }, set: function (newValue) { const words = newValue.split(' '); this.message = words[0]; console.log(this.message); } } } Кроме вычисляемых свойств Vue 3 позволяет определять наблюдаемые свойства или watchers. Наблюдаемые свойства, как правило, применяются для выполнения асинхронных действий, особенно таких, которые могут занять продолжительное время, например, отправка запроса на сервер. Vue.createApp({ data() { return { age: 0, result: '' } }, watch: { age: function (newAge) { if(newAge > 0 && newAge < 110){ this.check(newAge); } } }, methods:{ check: function(value){ this.result = 'Пожалуйста, подождите. Идет проверка...'; const vm = this; setTimeout(function(){ if(value > 18) vm.result = 'Доступ открыт'; else vm.result = 'Для возраста ' + value + ' доступ закрыт'; }, 2000); } } }).mount('#app'); При изменении свойства age, которое определено в секции data, будет вызываться функция age, определенная в параметре watch. Измененное значение будет передаваться в функцию через параметр newAge.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent