Итак, вы хотели начать использовать Vue, но не знаете, как правильно? Я был в той же лодке. Я не являюсь инженером / «экспертом» по JavaScript, поэтому подумал, что подобрать что-то вроде Vue будет очень сложно. Думайте об этом, как о нейрохирурге, но однажды вам придется сделать операцию на стопе человека. Это может быть сложно, если подиатрия не является вашей рулевой рубкой. Продолжайте читать, чтобы узнать, как немного узнать о декларативном рендеринге в vue не так уж больно.
Моя проблема
Если вы прятались под камнем или просто не являетесь разработчиком, вы, вероятно, слышали об этой вещи, называемой JavaScript, я бы сказал мелочь, но мы все знаем, что JavaScript - это гигантский язык. Проблема в том, что, поскольку индустрия (люди у власти), похоже, нанимают только JS-разработчиков и ПОЛНОСТЬЮ забыли, что HTML и CSS составляют 2/3 Интернета, я решил изучить Vue, чтобы восполнить пробелы за мои 22 года работы. знания.
Я решил попробовать первое, что нужно изучить Vue, - декларативный рендеринг. После того, как я поигрался с простой визуализацией одной строки на экране в CodePen, я решил, что было бы круто сделать это на моем собственном сайте, так как в любом случае это в основном текст.
Использование Vue
Настройка с использованием Vue прекрасна, потому что не требует никаких инструментов. И если вы хотите воспользоваться преимуществами Vue devtools, обязательно используйте правильный CDN.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Существует также инструмент командной строки, который вы также можете использовать для установки Vue, если вам нужны инструменты, основанные на ваших проектах.
# install vue-cli $ npm install --global vue-cli # create a new project using the "webpack" template $ vue init webpack my-project # install dependencies and go! $ cd my-project $ npm run dev
Этот код прямо с веб-сайта VueJS.
Код до (HTML)
Ниже приведен фрагмент кода до того, как я начал добавлять в Vue.
<h1>Chris DeMars</h1> <h2>UI Developer - Conference Speaker - Writer</h2> <p>Hey everyone 👋🏻. The name is Chris DeMars and I build lovely ui's. My ❤️ is in Denver, CO my body is in Detroit, MI and my workstation is just north of there.</p>
Я действительно хотел начать разбираться в Vue и его возможностях. Я снял несколько низко висящих фруктов, используя интерполяцию строк с использованием синтаксиса «усы», синтаксис усов - это двойные фигурные скобки вокруг строки.
Код после (HTML)
Ниже приведен фрагмент кода после того, как я добавил интерполяцию строк.
<h1>{{ name }}</h1>
<h2>{{ title }}</h2>
Это означает, что возьмите все, что передается в свойство name, отобразите здесь, которое раньше было «Chris DeMars», теперь эта строка установлена в JavaScript. То же самое и со свойством title. Первоначальное название, содержащееся в h2, было «Разработчик пользовательского интерфейса - Спикер конференции - Писатель». Теперь эта строка также живет в файле JavaScript.
JavaScript
Весь этот HTML - это здорово, не так ли? Конечно, это является! Но у нас должен быть некоторый JavaScript, в данном случае Vue, чтобы связать некоторые вещи вместе.
var app = new Vue({
el: '#app',
data: {
name: 'Chris DeMars',
title: 'UI Developer - Conference Speaker - Writer'
}
})
Начинает ли это иметь смысл, когда вы видите, что передается через свойство данных?
Сначала мы создаем новый экземпляр Vue, используя var app = new Vue ({}); Мы, затем ставим id на элемент, в котором должны отображаться данные:
<main class="wrapper" id="app">
<!-- Code goes here -->
</main>
Я хочу, чтобы все мои данные отображались в элементе main с id равным app.
Конечный продукт выглядит так: мое имя и заголовок отображаются с помощью Vue.
Заключение
На мой взгляд, Vue не так уж и плох. С точки зрения разработчика, не специализирующегося на js, лучше работать с React и Angular. Да, я знаю, что React - это библиотека, а не фреймворк, но он настолько надежен, что выбор Vue будет первым в моем списке.
Если вы не являетесь разработчиком js и начинаете экспериментировать с Vue, дайте мне знать. Я хотел бы услышать, почему вы начинаете влюбляться в него.
