VueJS - Шаблон: Пособие для начинающих

Привет, будущая суперзвезда Vue.js! Я рад быть вашим проводником в этом захватывающем путешествии в мир шаблонов Vue.js. Как某人, кто teaches computer science на протяжении многих лет, я могу заверить вас, что Vue.js является одним из самых友好ных для начинающих фреймворков. Так что, пристегните ремни и погружайтесь с мной!

VueJS - Template

Что такое шаблон в Vue.js?

Прежде чем мы начнем программировать, давайте поймем, что такое шаблон в Vue.js. Представьте его как скелет вашего веб-страницы - это место, где вы определяете структуру вашего HTML и добавляете немного магии Vue.js, чтобы сделать его динамичным и интерактивным.

Основная структура

Вот пример простого шаблона Vue.js:

<div id="app">
{{ message }}
</div>

В этом примере, {{ message }} - это специальный синтаксис в Vue.js, называемый "интерполяцией". Это как placeholder, который Vue.js заменит реальными данными.

Давайте посмотрим, как это работает:

<div id="app">
{{ message }}
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>

Когда вы запустите этот код, вы увидите "Hello, Vue!" на вашей странице. Волшебство, правда? {{ message }} в шаблоне заменяется значением message в данных нашей Вue instance.

Директивы: Специальные инструкции Vue

Теперь давайте поговорим о директивах. Это особые атрибуты, начинающиеся с v-, которые дают Vue.js инструкции о том, как себя вести. Они как маленькие巫师, которые накладывают заклинания на ваш HTML!

v-bind: Динамические атрибуты

Директива v-bind используется для динамического绑ывания атрибута к выражению. Она так часто используется, что даже имеет сокращение: :.

<div id="app">
<a v-bind:href="url">Нажми меня!</a>
<!-- Сокращение -->
<a :href="url">Нажми меня!</a>
</div>

<script>
new Vue({
el: '#app',
data: {
url: 'https://vuejs.org/'
}
})
</script>

В этом примере, атрибут href тега <a> динамически устанавливается в значение url в данных нашей Вue instance.

v-if, v-else-if, v-else: Условное рендеринг

Эти директивы позволяют вам условно рендерить элементы в зависимости от истинности выражения.

<div id="app">
<p v-if="seen">Теперь ты меня видишь</p>
<p v-else>Теперь ты меня не видишь</p>
</div>

<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>

Попробуй изменить seen на false и посмотри, что произойдет!

v-for: Рендеринг списков

Директива v-for используется для рендеринга списка элементов на основе массива.

<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Изучи JavaScript' },
{ text: 'Изучи Vue' },
{ text: 'Создай что-то классное' }
]
}
})
</script>

Это отрендерит список дел. Каждый элемент <li> создается для каждого элемента в массиве todos.

Обработка событий с помощью v-on

Директива v-on используется для listening DOM событий и выполнения JavaScript, когда они срабатывают. Она так полезна, что даже имеет сокращение: @.

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Обратить сообщение</button>
<!-- Сокращение -->
<button @click="reverseMessage">Обратить сообщение</button>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>

Нажми на кнопку и посмотри, как твое сообщение делает сальто!

Двусторонняя привязка с v-model

Директива v-model создает двустороннюю привязку на элементы формы или компоненты.

<div id="app">
<input v-model="message">
<p>Сообщение: {{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>

Набери что-то в поле ввода и посмотри, как сообщение обновляется в реальном времени. Это как магия, но лучше - это Vue.js!

Вычисляемые свойства и наблюдатели

Вычисляемые свойства

Вычисляемые свойства - это как суперсиловые данные. Это свойства, которые вычисляются на основе других свойств.

<div id="app">
<p>Исходное сообщение: "{{ message }}"</p>
<p>Вычисленное обратное сообщение: "{{ reversedMessage }}"</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>

Свойство reversedMessage всегда будет обратным message, и оно автоматически обновляется, когда message изменяется!

Наблюдатели

Наблюдатели - это как бдительные стражи для ваших данных. Они следят за изменениями данных и выполняют действия, когда эти изменения происходят.

<div id="app">
<p>
Задай да/нет вопрос:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
question: '',
answer: 'Вопросы обычно содержат вопросительный знак. ;-)'
},
watch: {
question: function (newQuestion, oldQuestion) {
this.answer = 'Жду, пока ты закончишь печатать...'
this.debouncedGetAnswer()
}
},
created: function () {
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Вопросы обычно содержат вопросительный знак. ;-)'
return
}
this.answer = 'Подумаю...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Ошибка! Не удалось подключиться к API. ' + error
})
}
}
})
</script>

В этом примере мы следим за свойством question. Когда оно изменяется, мы обновляем answer и вызываем метод для получения нового ответа из API.

Таблица методов

Вот таблица, резюмирующая методы, которые мы рассмотрели:

Метод	Описание	Пример
`v-bind`	Динамическое绑ывание атрибутов	`<a v-bind:href="url">`
`v-if`	Условное рендеринг	`<p v-if="seen">Now you see me</p>`
`v-for`	Рендеринг списков	`<li v-for="item in items">{{ item }}</li>`
`v-on`	Обработка событий	`<button v-on:click="doSomething">`
`v-model`	Двусторонняя привязка данных	`<input v-model="message">`

И вот и все! Вы только что сделали свои первые шаги в чудесный мир шаблонов Vue.js. Помните, практика делает мастера, так что не бойтесь экспериментировать с этими концепциями. Before you know it, вы будете создавать потрясающие приложения на Vue.js. Happy coding!

Credits: Image by storyset