Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим, как добавлять шаблоны в приложение Vue, включая функции рендеринга, JSX и однофайловые компоненты.
Функции рендеринга
Функции рендеринга возвращают элементы, которые рендерируются Vue. Все элементы определены с помощью простого JavaScript. Он не требует компиляции и дает нам полный доступ к функциям JavaScript, а не к тому, что предлагается директивами.
Например, мы можем определить функцию рендеринга, которая отображает кнопку с обработчиком щелчка для увеличения счетчика и элемент p для отображения счетчика следующим образом:
index.js :
Vue.component("app-counter", {
render(createElement) {
const that = this;
return createElement("div", [
createElement(
"button",
{
on: {
click() {
that.count++;
}
}
},
"Increment"
),
createElement("p", this.count)
]);
},
data() {
return { count: 0 };
}
});
new Vue({
el: "#app"
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<app-counter> </app-counter>
</div>
<script src="index.js"></script>
</body>
</html>
В приведенном выше коде мы вызвали createElement, чтобы создать div-оболочку. Затем во втором аргументе верхнего createElement вызова у нас есть массив с дополнительными createElement вызовами для создания дочернего элемента.
Для кнопки второй аргумент вызова createElement имеет объект с обработчиком щелчка. Для тега p у нас есть текст элемента this.count.
Преимущество функций рендеринга в том, что нам не нужны директивы типа v-if или v-for для условного рендеринга или рендеринга списков соответственно.
Например, вместо v-for мы можем использовать Array.prototype.map:
index.js :
Vue.component("app-list", {
render(createElement) {
const that = this;
return createElement("div", [
...that.fruits.map(f => createElement("p", f))
]);
},
data() {
return { fruits: ["apple", "orange", "banana"] };
}
});
new Vue({
el: "#app"
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<app-list> </app-list>
</div>
<script src="index.js"></script>
</body>
</html>
И вместо v-if у нас есть простой if оператор:
Vue.component("app-toggle", {
render(createElement) {
const that = this;
return createElement("div", [
createElement(
"button",
{
on: {
click() {
that.showFoo = !that.showFoo;
}
}
},
"Toggle"
),
that.showFoo ? createElement("p", "foo") : undefined
]);
},
data() {
return { showFoo: false };
}
});
new Vue({
el: "#app"
});
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<app-toggle> </app-toggle>
</div>
<script src="index.js"></script>
</body>
</html>
В приведенном выше коде мы имеем:
that.showFoo ? createElement("p", "foo") : undefined
чтобы условно добавить элемент p. Он управляется обработчиком нажатия кнопки, а именно:
click() {
that.showFoo = !that.showFoo;
}
JSX
Мы также можем использовать JSX в наших параметрах рендеринга. Это избавляет нас от набора текста и отладки, которые мы должны делать, вызывая createElement.
Например, мы можем визуализировать JSX следующим образом:
<script>
export default {
name: "app",
data() {
return {
count: 0
};
},
render() {
return (
<div>
<button onClick={() => this.count++}>Increment</button>
<p>{this.count}</p>
</div>
);
}
};
</script>
Похоже на HTML, но на самом деле это JavaScript. Самый простой способ добавить JSX в наше приложение - использовать Vue CLI при запуске новых проектов.
В приведенном выше коде мы прикрепили прослушивание щелчка к нашей кнопке с помощью свойства onClick.
Нам нужно будет преобразовать его в простой JavaScript, чтобы использовать приложение.
Однофайловые компоненты
Однофайловый компонент - это тип компонента по умолчанию для приложений Vue, созданных с помощью Vue CLI.
Если мы выберем все параметры по умолчанию в мастере Vue CLI, мы создадим отдельные файловые компоненты без каких-либо проблем. Например, мы можем написать:
<template>
<div id="app">
<button @click="count++">Increment</button>
<p>{{count}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
count: 0
};
}
};
</script>
Все, что нам нужно было сделать, это добавить тег template для отображения элементов, отображаемых пользователю. И у нас есть тег script, содержащий логику.
С помощью Vue CLI однофайловые компоненты встраиваются в простое приложение JavaScript с помощью команды npm run build, поэтому мы можем запускать его в производственной среде.
Заключение
Самый простой способ - это однофайловый компонент, который по умолчанию используется для структурирования компонентов и приложений Vue. Он работает как для простых, так и для сложных приложений без выбора каких-либо параметров или настройки.
Альтернативой было бы использование JSX внутри функции render . Это похоже на однофайловые компоненты, но мы используем простой JavaScript для рендеринга вместо HTML.
render функции также могут иметь простой JavaScript. Мы создаем элементы, вызывая createElement. Если у нас слишком много элементов, вложение становится трудным, но преимущество состоит в том, что мы можем использовать JavaScript вместо директив для динамических операций.
Примечание команды Plain English
Вы знали, что у нас четыре публикации? Проявите немного любви, предложив им следующие слова: JavaScript на простом английском, AI на простом английском, UX на простом английском , Python на простом английском - спасибо и продолжайте учиться!
Кроме того, мы всегда заинтересованы в продвижении хорошего контента. Если у вас есть статья, которую вы хотели бы отправить в какую-либо из наших публикаций, отправьте электронное письмо на адрес [email protected] с вашим именем пользователя Medium и тем, о чем вы хотите написать, и мы вернуться к вам!
