Я инженер-программист, работаю над интерфейсом. Пару лет я работаю с React над хобби-проектами. Мой профессиональный опыт начался шесть или семь месяцев назад. Мои знания о фронтенде растут день ото дня, и я хочу взглянуть на VueJs с профессиональной стороны.
Установка
Когда вы открываете документацию Vues, она ясна, легко читается и понятна. Документация приветствует читателя тем, что такое Vue в первую очередь. Кроме того, под этим введением есть ссылка на видеокурс. Я пропустил все эти части, сразу перешел к части установки.
В части установки есть пакет NPM для установки Vue. Вы можете напрямую использовать эту команду;
$ npm install vue
Если вы хотите новый проект, вы должны посетить страницу cli.vujs.org для создания проекта. Документация на этой стороне хочет запустить vue/cli. Затем вы можете проверить версию Vue.
$ npm install -g @vue/cli
$ vue --version
На стороне создания проекта «vue create» помогает нам создавать. Кроме того, он задает такие вопросы, как хотите ли вы создать проект Vue2 или Vue3, и хотите ли вы использовать пряжу или npm. В этом сценарии я выбрал Vue2.
$ vue create my-project
После этого проект Vue должен быть собран на вашем компьютере. Там написано «cd my-project» и «yarn serve». Вы должны войти внутрь проекта на терминале и запустить проект.
$ cd my-project $ yarn serve
Затем пряжа проходит прямо на терминале. В этот момент на терминале вы должны увидеть «Приложение запущено по адресу:…».
DONE Compiled successfully in 3218ms App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.11:8080/
Откройте браузер и перейдите на страницу localhost. И приложение Vue.js приветствует нас. Как вы знаете, при этом мы не трогали некоторые коды. Откройте код в коде VS, атоме или в том, что вы используете для редактора исходного кода. Я использую код VS и устанавливаю расширение Vue. На первый взгляд, управление папками является простым и простым.
После этого момента начинается основная тема. Как написать код Vue? :)
Базовый Vue
Когда вы проверяете созданные файлы, вы можете понять, как создать компонент и использовать его. Записанные файлы выглядят как HTML-документы. В JSX все файлы основаны на javascript (.js) и используют HTML внутри javascript. Но Vue отличается от концепции JSX. Он использует синтаксис шаблона на основе HTML, который использует javascript внутри HTML. Много информации о документе вы можете взять в разделе Синтаксис шаблона.
Интерполяции
Двойные фигурные скобки используются для основной формы привязки данных. В документации сказано, что это синтаксис «Mustache». имя заменяется значением присвоенного значения имени.
<span>Hello, {{ name }}</span>
Странная вещь — это Raw HTML. Вы не можете использовать HTML внутри интерпретаторов усов. Если вы хотите использовать другой HTML в усах, вы должны использовать «v-html». Также в этих усах доступно использование javascript.
<p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> {{ number + 1 }} {{ message.split('').reverse().join('') }}
Директивы
Директивы можно использовать с префиксом v-. Это специальные атрибуты. В документации говорится, что «значения атрибутов директивы должны быть одним выражением JavaScript». Задача директивы — реактивно применять побочные эффекты к DOM при изменении значения ее выражения. Давайте рассмотрим пример, который мы видели во введении». Я думаю, что эту концепцию можно усвоить на практике.
<p v-if="seen">Now you see me</p> <a v-bind:href="url"> ... </a> <a v-on:click="doSomething"> ... </a>
Кроме того, модификаторы существуют для простоты использования. Это специальные постфиксы, обозначаемые точкой. Например, это выглядит как event.preventDefault()
, но более простая версия, модификатор .prevent на v-on.
<form v-on:submit.prevent="onSubmit"> ... </form>
Итак, сегодня мы установили Vue и быстро ознакомились с основными кодами. И делаются заметки. В документации я прочитал эти части;
- Установка
- Введение
- Экземпляр Vue
- Синтаксис шаблона
Я предлагаю вам прочитать все это в документации, если вы не читаете. Потому что чтение документов — хороший навык для всех. Мои заметки Vue будут продолжены…
30-дневный челлендж № 8 для ведения блога