Я инженер-программист, работаю над интерфейсом. Пару лет я работаю с 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 для ведения блога