Справочник Vue: тщательное введение в Vue.js

Автор оригинала: FreeCodeCamp Community Member.

Vue – очень популярный фронт-конечный каркас JavaScript, который испытывает огромное количество роста.

Это просто, крошечный (~ 24 КБ) и очень исполнительный. Это отличается от всех других фронт-конечных рамки JavaScript и просматривать библиотеки. Давайте узнаем почему.

Во-первых, что такое JavaScript Frond-End Framework?

Если вы не уверены, что такое JavaScript Framework, Vue – идеальная первая встреча с одним.

JavaScript Framework помогает нам создавать современные приложения. Современные приложения JavaScript в основном используются в Интернете, но также включают много настольных и мобильных приложений.

До начала 2000-х годов браузеры не имели возможностей, которые они имеют сейчас. Они были намного менее мощными, и строительные комплексные приложения внутри них не было возможности. Инструментарий даже не то, что люди думали о.

Все изменилось, когда Google представлен Google Maps и Gmail два приложения, которые бежали внутри браузера. Ajax Возможно сделано асинхронные сетевые запросы. Со временем разработчики начали строить на вершине веб-платформы, в то время как инженеры работали на самих платформе – браузеры, веб-стандарты, API на браузере и язык JavaScript.

Библиотеки, как jquery и Mootools были первые крупные проекты, которые построили на JavaScript и были чрезвычайно популярны на некоторое время. Они в основном предоставили более приятное API для взаимодействия с браузером и предоставили обходные пути для ошибок и несоответствий между различными браузерами.

Фрезы, как Позвоночник , Эмбер , Нокаут и Angularjs были первой волной современных JavaScript Frameworks.

Вторая волна, которая является током, имеет Реагировать , Угловой и Vue как его основные актеры.

Обратите внимание, что jQuery, Ember и другие проекты, которые я упомянул, все еще активно используются, активно поддерживаются, а миллионы веб-сайтов полагаются на них.

То, что сказано, методы и инструменты развиваются, и в качестве разработчика JavaScript, теперь вы, вероятно, должны быть обязаны знать реагирование, угловые или Vue, а не те старые рамки.

Рамки абстрактные взаимодействия с браузером и домом. Вместо манипулирования элементами, ссылаясь на их в доме, мы декларативно Определите и взаимодействуйте с ними, на более высоком уровне.

Использование рамки, как использовать C Язык программирования вместо использования Язык Ассамблеи Написать системные программы. Это похоже на использование компьютера для записи документа вместо использования пишущей машинки. Это все равно что иметь самостоятельный автомобиль вместо того, чтобы за рулем машины сами.

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

Ваше первое приложение Vue

Если вы никогда не создавали приложение Vue.js, я собираюсь проверить вас через задачу создания того, что вы понимаете, как это работает.

Первый пример

Сначала я пройду самый просторный пример использования Vue.

Вы создаете HTML-файл, который содержит:


  
    
      {{ hello }}

И вы открываете его в браузере. Это ваше первое приложение Vue! Страница должна показать «Hello World!» сообщение.

Я положил теги скрипта в конце тела, чтобы они были выполнены в порядке, после нагрузки домена.

Что этот код делает создание нового приложения Vue, связано с # Образец элемент как его шаблон. Обычно он определяется с использованием селектора CSS, но вы также можете пройти в Htmlelement Отказ

Затем он связывает этот шаблон к данные объект. Это специальный объект, который принимает данные, которые мы хотим рендерировать.

В шаблоне специальные {{}} Тег указывает, что это какая-то часть динамического шаблона, и его содержание должно рассматриваться в данных VUE приложения.

Вы можете увидеть этот пример на Кодепен Отказ

Кодепен немного отличается от использования простого HTML-файла, и вам необходимо настроить его, чтобы указать на местоположение библиотеки Vue в настройках ручки:

Второй пример: приложение Vue CLI по умолчанию

Давайте немного выравниваем игру. Следующее приложение, которое мы собираемся построить, уже сделано, и это приложение Vue CLI по умолчанию.

Что такое Vue CLI? Это утилита командной строки, которая помогает ускорить разработку с помощью лесов скелетом приложений для вас, при приложении приложения на месте.

Есть два способа получить это приложение:

Используйте Vue CLI локально

Первый – установить Vue CLI на ваш компьютер и запустите команду:

vue create

Используйте CodeSandbox.

Проще проще, без необходимости устанавливать что-либо, это перейти к CodeSandbox Отказ Ссылка открывает приложение Vue CLI по умолчанию.

CodeSandbox – это прохладный редактор кода, который позволяет создавать приложения в облаке. Вы можете использовать любой пакет NPM и легко интегрироваться с Zeit ныне для простого развертывания и с Github управлять версиями.

Вы решили ли вы использовать Vue CLI локально или пройти через CodeSandbox, давайте осмотрим, что приложение Vue подробно.

Структура файлов

Рядом с Package.json Содержит конфигурацию, это файлы, содержащиеся в начальной структуре проекта:

index.html.
src/app.vue.vue.
SRC/Main.js.
SRC/Активы/logo.png
SRC/Компоненты/helloworld.vue

index.html.

index.html Файл – это основной файл приложения.

В теле его включает в себя только один простой элемент:

. Это элемент The Vue приложение, которое мы будем использовать для прикрепления к DOM.






  
  
  CodeSandbox Vue

SRC/Main.js.

Это главный файл JavaScript, который управляет нашим приложением.

Сначала импортируем библиотеку Vue и компонент приложения из App.vue Отказ

Мы устанавливаем ProductionTip к ложь , чтобы избежать VUE вывода «вы находитесь в режиме разработки» в консоли.

Далее мы создаем экземпляр VUE, назначая его на элемент DOM, идентифицированным #app , который мы определили в index.html И мы говорим ему, чтобы использовать компонент приложения.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: ''
})

src/app.vue.vue.

App.vue это одно файловый компонент. Он содержит три куска кода: HTML, CSS и JavaScript.

Сначала это может показаться странным, но одновременные компоненты файлов являются отличным способом создания автономных компонентов, которые имеют все, что им нужно в одном файле.

У нас есть разметка, JavaScript, который собирается взаимодействовать с ним, и стиль, который применяется к нему, который может быть определен или нет. В этом случае он не имеет значения, и он просто выводит, что CSS, который применяется как обычные CSS на странице.

Интересная часть лежит в Сценарий ярлык.

Мы импортируем компонент из Компоненты/helloworld.vue Файл, который мы опишем позже.

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

Из этого компонента, который вы видите ссылки HellowOrld компонент. Vue автоматически вставит этот компонент внутри этого заполнителя.

SRC/Компоненты/helloworld.vue

Вот …| HellowOrld Компонент, который включен компонент приложения.

Этот компонент выводит набор ссылок наряду с сообщением.

Помните выше, мы говорили о CSS в App.Vue, который не был наличием? HellowOrld Компонент имеет выделенные CSS.

Вы можете легко определить его, глядя на Стиль ярлык. Если у него есть Навыся атрибут, то он считает: <Стиль Scop ed >.

Это означает, что генерируемые CSS будут ориентироваться на компонент однозначно, через класс, который применяется VUE прозрачно. Вам не нужно беспокоиться об этом, и вы знаете, что CSS не будет утечка на другие части страницы.

Сообщение компонентные выходы хранятся в данные Свойство экземпляра Vue и выводится в шаблоне AS {{msg}} Отказ

Все, что хранится в данные Достиживается прямо в шаблоне по своему имени. Нам не нужно было сказать data.msg , просто Msg Отказ

Запустите приложение

CodeSandbox имеет прохладный предварительный просмотр функционал. Вы можете запустить приложение и редактировать что-либо в источнике, чтобы он был немедленно отраженным в предварительном просмотре.

Vue Cli.

CodeSandbox очень круто для онлайн-кодирования и работы без необходимости настройки VUE локально. Отличный способ работы локально – настроить Vue CLI (интерфейс командной строки). Давайте узнаем больше об этом.

В предыдущем примере я представил пример проекта на основе VUE CLI. Что такое Vue CLI, и как он вписывается в Vue Ecosystem? Кроме того, как мы устанавливаем проект на основе VUE CLI? Давайте выясним!

Примечание: Сейчас происходит огромное переоборудование CLI, идущая с версии 2 к 3. пока не стабильна, я опишу версию 3, потому что это огромное улучшение по версии 2, а совсем другое.

Монтаж

Vue CLI – это утилита командной строки, и вы устанавливаете ее глобально используя NPM:

npm install -g @vue/cli

или используя пряжу:

yarn global add @vue/cli

Как только вы сделаете это, вы можете вызвать Vue команда.

Что обеспечивает Vue CLI?

CLI важно для быстрого развития Vue.js.

Его главная цель состоит в том, чтобы убедиться, что все необходимые инструменты, которые вам нужны, работают, чтобы выполнить то, что вам нужно, и рефераты все детали конфигурации Nitty Gritty, которые используют каждый инструмент для изоляции.

Он может выполнять начальную настройку проекта и леса.

Это гибкий инструмент. После того, как вы создадите проект с CLI, вы можете пойти и настроить конфигурацию, не надо мной извлекать Ваше приложение (вроде бы вы с Create-raction-App ).

Когда вы извлеките от Create-React-App Вы можете обновить и настраивать то, что вы хотите, но вы не можете полагаться на крутые функции, которые Create-React-App предоставляет.

Вы можете настроить что-либо и все еще иметь возможность с легкостью обновления.

После создания и настройки приложения он действует как инструмент зависимости выполнения, встроенный на верхней части WebPack.

Первая встреча с CLI – при создании нового проекта Vue.

Как использовать CLI для создания нового проекта Vue

Первое, что вы собираетесь сделать с CLI, это создать приложение Vue:

vue create example

Прохладно, что это интерактивный процесс. Вам нужно выбрать предустановку. По умолчанию есть одна предустановка, которая предоставляет Babel и Eslint Интеграция:

Я собираюсь нажать стрелку вниз ⬇️ и вручную выберите функции, которые я хочу:

Нажмите пространство Чтобы включить одну из вещей, которые вам нужно, а затем нажмите Введите продолжать. Так как я выбрал Линтер/форма Vue Cli предлагает мне конфигурацию. Я выбрал Эсвет + красивее Поскольку это моя любимая настройка:

Следующая вещь выбирает, как применять льминал. Я выбираю Lint на Сохранить Отказ

Далее: тестирование. Vue CLI позволяет вам выбрать между двумя самыми популярными решениями для тестирования подразделений: Mocha + Чай и Jest Отказ

Vue Cli просит меня, где поставить всю конфигурацию: в Package.json Файл или в выделенных файлах конфигурации, один для каждого инструмента. Я выбрал последний.

Далее Vue CLI просит меня, если я хочу сохранить эти пресеты, и позволяет мне выбрать их в качестве выбора в следующий раз, когда я использую Vue CLI для создания нового приложения. Это очень удобная особенность, так как настроить быструю настройку со всеми моими предпочтениями – это смелость сложности:

Vue CLI спросит меня, если я предпочитаю использовать Пряжа или NPM:

Это последнее, что он просит меня, а затем он продолжает загружать зависимости и создать приложение VUE:

Как начать недавно созданное приложение Vue CLI

Vue CLI создал для нас приложение, и мы можем пойти в Пример папка и запустить пряжа подавать Чтобы запустить наше первое приложение в режиме разработки:

Пример пример приложения приложения содержит несколько файлов, в том числе Package.json :

Это где определены все команды CLI, включая пряжа подавать , который мы использовали минуту назад. Другие команды

пряжа строит , чтобы начать производство сборку
пряжа линта , чтобы запустить линт
Тест пряжи: блок , чтобы запустить тесты подразделения

Я опишу приложение образца, создаваемого Vue CLI в отдельном уроке.

Git Repository

Обратите внимание на Мастер Слово в левом нижнем углу VS-кода? Это потому, что Vue CLI автоматически создает репозиторий и делает первый коммит. Таким образом, мы можем прыгать прямо в, изменить вещи, и мы знаем, что мы изменили:

Это довольно круто. Сколько раз вы ныряете и измените вещи, только чтобы понять, когда вы хотите совершить результат, что вы не совершаете первоначальное состояние?

Используйте предустановку из командной строки

Вы можете пропустить интерактивную панель и инструктируйте Vue CLI, чтобы использовать конкретную предустановку:

vue create -p favourite example-2

Где предустановки хранятся

Предустановки хранятся в .Вуэйс Файл в домашнем каталоге. Вот мой после создания первой «любимой» предустановки:

{
  "useTaobaoRegistry": false,
  "packageManager": "yarn",
  "presets": {
    "favourite": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-jest": {}
      },
      "router": true,
      "vuex": true
    }
  }
}

Плагины

Как вы можете видеть, от чтения конфигурации, предустановка в основном является коллекцией плагинов, а дополнительная дополнительная конфигурация.

Как только проект создан, вы можете добавить больше плагинов, используя Vue Добавить :

vue add @vue/cli-plugin-babel

Все эти плагины используются в последней доступной версии. Вы можете заставить Vue CLI использовать определенную версию, передавая свойство версии:

"@vue/cli-plugin-eslint": {
  "version": "^3.0.0"
}

Это полезно, если новая версия имеет разбитое изменение или ошибку, и вам нужно немного подождать, прежде чем использовать его.

Удаленно хранить пресеты

Предустановка может быть сохранена в Github (или на других услугах), создавая репозиторий, содержащий Preset.json Файл, который содержит одну предварительную конфигурацию.

Извлеченный из вышеперечисленного, я сделал образец предустановка который содержит эту конфигурацию:

{  "useConfigFiles": true,  "plugins": {    "@vue/cli-plugin-babel": {},    "@vue/cli-plugin-eslint": {      "config": "prettier",      "lintOn": [        "save"      ]    },    "@vue/cli-plugin-unit-jest": {}  },  "router": true,  "vuex": true}

Его можно использовать для загрузки нового приложения, используя:

vue create --preset flaviocopes/vue-cli-preset example3

Еще одно использование VUE CLI: быстрые прототипирование

До сих пор я объяснил, как использовать Vue CLI, чтобы создать новый проект с нуля, со всеми колоколами и свистками. Но для действительно быстрого прототипа вы можете создать действительно простую приложение Vue (даже один, который самостоятельно содержится в одном файле .Vue) и служит, без необходимости загружать все зависимости в node_modules папка.

Как? Сначала установите CLI-Service-Global Глобальный пакет:

npm install -g @vue/cli-service-global

//or

yarn global add @vue/cli-service-global

Создайте файл app.vue:

а потом бежать

vue serve app.vue

Вы можете служить более организованным проектам, написанным JavaScript и HTML-файлами. Vue CLI по умолчанию использует main.js/index.js Как его точка входа, и вы можете иметь Package.json И любой конфигурация инструмента настроен. Vue служить заберу его

Поскольку это использует глобальные зависимости, это не оптимальный подход для чего-либо более чем на демонстрацию или быстрое тестирование.

Бег Vue Build подготовит проект для развертывания в Dist/ и будет генерировать весь соответствующий код (также для зависимостей поставщиков).

WebPack

Внутренне, Vue CLI использует WebPack, но конфигурация абстрагирована, и мы даже не видим файл конфигурации в нашей папке. Вы все еще можете получить доступ к нему, позвонив Vue проверять :

Vue devtools.

Когда вы впервые экспериментируете с Vue, если вы откроете инструменты разработчика браузера, вы найдете это сообщение: «Скачать расширение vue devtools для лучшего опыта разработки: https://github.com/vuejs/vue-devtools “

Это дружеское напоминание для установки расширения Vue devtools. Что это? Любые популярные рамки имеют свое собственное расширение devtools, которое обычно добавляет новую панель для инструментов разработчика браузера, которые намного более специализированы, чем те, которые по умолчанию отправляются в браузер. В этом случае панель будет проверить наше VUE-приложение и взаимодействовать с ним.

Этот инструмент будет удивительным помощи при строительстве VUE-приложений. Инструменты разработчика могут проверять только приложение VUE, когда он находится в режиме разработки. Это гарантирует, что никто не может использовать их для взаимодействия с вашим производственным приложением – и сделает Vue более исполнителю, потому что он не должен заботиться о инструментах DEV.

Давайте установимся!

Есть 3 способа установки VEUE DEV Tools:

на хроме
на Firefox
Как автономное приложение

Safari, Edge и другие браузеры не поддерживаются нестандартным расширением, но используя автономное приложение, которое вы можете отладить приложение Vue.js, запущенное в любом браузере.

Установить на Chrome.

Перейти на эту страницу на Google Chrome Магазин и нажмите Добавить в Chrome Отказ

Пройдите через процесс установки:

Значок Vue.js devtools отображается на панели инструментов. Если на странице не работает экземпляра Vue.js, он седет.

Если обнаружена vue.js, значок имеет цвета Vue logo.

Икона ничего не делает, кроме как показывает нам, что там это экземпляр vue.js. Чтобы использовать DevTools, мы должны открыть панель инструментов разработчиков, используя «View → Developer → Инструменты разработчика», или Cmd-alt-i

Установите на Firefox

Вы можете найти расширение инструментов DEV Firefox в Add-ons Mozilla магазин Отказ

Нажмите «Добавить в Firefox», и расширение будет установлено. Как с хром, появляется серые значок в панели инструментов

И когда вы посещаете сайт, в котором работает Vue, он станет зеленым, и когда мы открываем инструменты разработки, мы увидим панель «VUE»:

Установите автономное приложение

В качестве альтернативы вы можете использовать автономное приложение devtools.

Просто установите его, используя:

npm install -g @vue/devtools

//or

yarn global add @vue/devtools

и запустить его, позвонив:

vue-devtools

Это откроет автономное электронное приложение.

Теперь вставьте тег скрипта, он показывает вам

Внутри проекта index.html Файл и дождитесь перезагрузки приложения. Он автоматически подключается к приложению.

Как использовать инструменты разработчика

Как уже упоминалось, Vue devtools можно активировать, открывая инструменты разработчика в браузере и переместив на панель Vue.

Другой вариант – щелкнуть правой кнопкой мыши на любом элементе на странице и выберите «Осмотреть компонент Vue»:

Когда панель Vue devtools открыта, мы можем перемещаться по дереву компонентов. Когда мы выбираем компонент из списка слева, правая панель показывает реквизиты и данные, которые он содержит:

На вершине четыре кнопки:

Компоненты (текущая панель), которая перечисляет все экземпляры компонентов, работающих на текущей странице. Vue может иметь несколько экземпляров одновременно. Например, он может управлять видителем вашей корзины и слайд-шоу, с отдельными, легкими приложениями.
Vuex Где вы можете проверить государство, управляемое через Vuex.
События Показывает все события излучаемые.
Обновить Перезагружает панель devtools.

Обратите внимание на маленький = $ vm0 Текст рядом с компонентом? Это удобный способ осмотра компонента с помощью консоли. Нажатие клавиши «Esc» отображает консоль в нижней части devtools, и вы можете ввести $ VM0 Для доступа к Vue компоненту:

Очень круто осмотреть и взаимодействовать с компонентами без необходимости назначать их в глобальную переменную в коде.

Фильтрующие компоненты

Начните вводить имя компонента, а дерево компонентов отфильтрует те, которые не совпадают.

Выберите компонент на странице

Нажмите на Выберите компонент на странице кнопка.

Вы можете зависать на любой компонент на странице с помощью мыши, щелкните по нему, и она будет открыта в devtools.

Формат имена компонентов

Вы можете показать компоненты в камеру или использовать тире.

Фильтр проверены данные

На правой панели вы можете ввести любое слово для фильтрации свойств, которые не совпадают.

Осматривать домо

Нажмите кнопку «Проверка DOM», которая должна быть доведена до элементов Devtools Elements, с элементом DOM, генерируемый компонентом:

Открыть в редакторе

Любой пользовательский компонент (не компоненты рамочного уровня) имеет кнопку, которая открывает ее в вашем редакторе по умолчанию. Очень кстати.

Настройка VS-код для работы с Vue

Визуальный студийный код Это один из самых используемых редакторов кода в мире прямо сейчас. У редакторов есть, как многие программные продукты, цикл. Однажды Текстура Был ли любимый среди разработчиков, то это было Возвышенный текст Теперь это VS код.

Прохладная вещь о том, чтобы быть популярным в том, что люди посвящают много времени для создания плагинов для всего, что они могут себе представить.

Одним из таких плагинов является потрясающим инструментом, который может помочь нам Vue.js разработчики.

Ветура

Это называется Ветура, это чрезвычайно популярно (более 3 миллионов загрузок), и вы можете найти его На визуальной студии Marketplace Отказ

Установка Ветура

Нажатие кнопки «Установка» запускает установочную панель в VS-коде:

Вы также можете просто открыть расширения в VS-коде и искать «Vetur»:

Что дает это расширение?

Синтаксис выделения

Vetur предоставляет синтаксис подсветки для всех ваших файлов исходного кода Vue.

Без Ветура, а .vue Файл будет отображаться таким образом по VS-коду:

С Vetur установлен:

VS код способен распознать тип кода, содержащийся в файле из его расширения.

Используя один файл компонентов, вы можете смешивать различные типы кода в одном файле, от CSS на JavaScript в HTML.

VS Code по умолчанию не может распознать эту ситуацию, и Vetur предоставляет синтаксис подсветки для каждого вида используемого вами кода.

Vetur позволяет поддерживать, среди прочего, для:

HTML
CSS.
Javascript
Мопс
Гамл
SCSS.
Postcss
Сасс
Стилус
Машинопись

Фрагменты

Как и в случае подсветки синтаксиса, поскольку VS-код не может определить тип кода, содержащегося в части A .vue Файл, он не может предоставить фрагменты мы все любим. Фрагменты – это куски кода, мы можем добавить в файл, предоставляемый специализированными плагинами.

Vetur дает VS-код возможность использовать ваши любимые фрагменты в одном файловых компонентах.

Intellisense.

Intellisense также включен Vetur, для каждого другого языка, с автозаполнением:

Леса

В дополнение к включению пользовательских фрагментов, Vetur предоставляет свой набор фрагментов. Каждый создает определенный тег (шаблон, сценарий или стиль) со своим языком:

строительные леса
Шаблон с HTML
Шаблон с мопсом
Сценарий с JavaScript
Сценарий с помощью Teadycript
Стиль с CSS.
Стиль с CSS (Scoped)
Стиль с SCSS.
Стиль с SCSS (Scoped)
Стиль с меньшим количеством
Стиль с меньшим (на колебании)
Стиль с сасс
Стиль с Sass (Scoped)
Стиль с Postcss
Стиль с Postcss (Scoped)
Стиль со стилусом
Стиль со стилусом (Scoped)

Если вы ввести Леса , вы получите стартовый пакет для одного файлового компонента:

Другие специфичны и создают один блок кода.

Примечание: (Scoped) в указанном выше списке означает, что он применяется только к текущему компоненту.

Emmet.

Эммет Популярные стандарты HTML/CSS Abbrivations Engine поддерживаются по умолчанию. Вы можете ввести один из сокращений Emmet, и нажав вкладка VS код автоматически расширит его в HTML-эквивалент:

Проверка линта и ошибок

Vetur интегрирует с Eslint через VS код eslint плагин Отказ

Форматирование кода

Vetur предоставляет автоматическую поддержку форматирования кода для форматирования всего файла при сохранении - в сочетании с «Редактор. Официатография» Vs Настройка кода.

Вы можете отключить автоматическое форматирование для некоторых конкретных языков, установив vetur.format.defaultformatter.xxxxx к Нет В настройках кода VS. Чтобы изменить одну из этих настроек, просто начните поиск строки, и переопределите, что вы хотите в пользовательских настройках на правой панели.

Большинство языков поддерживают использование Прекраснее Для автоматического форматирования инструмент, который становится отраслевым стандартом. Он использует вашу красивую конфигурацию для определения ваших предпочтений.

Представляем составляющие Vue

Компоненты являются единичными, независимыми единицами интерфейса. Они могут иметь свое собственное состояние, разметку и стиль.

Как использовать компоненты

Компоненты Vue могут быть определены четырьмя основными способами. Давайте поговорим в коде.

Первый это:

new Vue({  /* options */})

Второй:

Vue.component('component-name', {  /* options */})

Третий с использованием локальных компонентов. Это компоненты, которые доступны только по конкретному компоненту, а не доступны в другом месте (отлично подходит для инкапсуляции).

Четвертый в .vue Файлы, также называемые единичными компонентами файла.

Давайте подробно погрузимся в первые 3 способа.

Использование Новый Vue () или Vue.component () Стандартный способ использовать Vue, когда вы создаете приложение, которое не является приложением одной страницы (SPA). Вы используете этот метод, скорее, когда вы просто используете Vue.js на некоторых страницах, например, в контактной форме или в корзине. Или, возможно, Vue используется на всех страницах, но сервер делает макет, и вы обслуживаете HTML клиенту, что затем загружает приложение Vue, которое вы создаете.

В спа-салоне, где он является Vue, который создает HTML, более распространено использовать одновременные компоненты файлов, так как они удобнее.

Вы создали Vue, установив его на элементе DOM. Если у вас есть

Тег , вы будете использовать:

new Vue({ el: '#app' })

Компонент инициализированный Новый Vue не имеет соответствующего названия тега, поэтому обычно это основной компонент контейнера.

Другие компоненты, используемые в приложении, инициализируются с использованием Vue.component () Отказ Такой компонент позволяет определить тег - с помощью которого вы можете встроить компонент несколько раз в приложение - и указать выход компонента в Шаблон свойство:

Vue.component('user-name', {  props: ['name'],  template: 'Hi {{ name }}
'})

new Vue({  el: '#app'})

Увидеть на jsfiddle

Что мы делаем? Мы инициализируем корневой компонент Vue на #app И внутри этого мы используем Vue Component имя пользователя , что абстрагирует наше приветствие пользователю.

Компонент принимает опоры, который является атрибутом, который мы используем для передачи данных до дочерних компонентов.

В Vue.component () Позвоните, мы прошли имя пользователя как первый параметр. Это дает компонент имя. Вы можете написать имя в 2 способах здесь. Во-первых, тот, который мы использовали, называется Kebab-Case. Второй называется PascalCase, который похож на камеру, но с первой буквой капитализированного:

Vue.component('UserName', {  /* ... */})

Vue автоматически создает псевдоним внутри имя пользователя к Имя пользователя И наоборот, так что вы можете использовать все, что вам нравится. Как правило, лучше всего использовать Имя пользователя В JavaScript и имя пользователя в шаблоне.

Локальные компоненты

Любой компонент, созданный с использованием Vue.component () зарегистрирован в мире. Вам не нужно назначать его переменной или передавать его, чтобы повторно использовать его в своих шаблонах.

Вы можете инкапсулировать компоненты локально, присваивая объект, который определяет объект компонента к переменной:

const Sidebar = {  template: 'Sidebar
'}

а затем сделать его доступным внутри другого компонента, используя Компоненты свойство:

new Vue({  el: '#app',  components: {    Sidebar  }})

Вы можете написать компонент в том же файле, но отличный способ сделать это - использовать модули JavaScript:

import Sidebar from './Sidebar'

export default {  el: '#app',  components: {    Sidebar  }}

Повторное использование компонента

Дочерний компонент может быть добавлен несколько раз. Каждый отдельный экземпляр не зависит от других:

Vue.component('user-name', {  props: ['name'],  template: 'Hi {{ name }}
'})

new Vue({  el: '#app'})

Увидеть на jsfiddle

Строительные блоки компонента

До сих пор мы видели, как компонент может принять Эль , реквизит и Шаблон характеристики.

Эль используется только в корневых компонентах, инициализированных с использованием Новый Vue ({}) и идентифицирует элемент DOM, на котором будет установлен компонент.
реквизит Перечисляет все свойства, которые мы можем передать до детского компонента
Шаблон Если мы можем настроить шаблон компонента, который будет отвечать за определение вывода компонента.

Компонент принимает другие свойства:

данные Компонентное местное состояние
Методы : методы компонентов
вычисляется : вычисленные свойства, связанные с компонентом
Смотреть : составные наблюдатели

Один файловые компоненты

VUE компонент можно объявить в файле JavaScript ( .js ), как это:

Vue.component('component-name', {  /* options */})

или также:

new Vue({  /* options */})

или это можно указать в .vue файл.

.vue Файл довольно круто, потому что он позволяет определить:

Логика JavaScript
HTML-код шаблона
CSS стайлинг

Все в одном файле. Как таковое он получил имя одного файлового компонента.

Вот пример:

Все это возможно благодаря использованию WebPack. Vue CLI делает это очень легко и поддерживается из коробки. .vue Файлы не могут быть использованы без настройки WebPack, и как таковые они не очень подходят для приложений, которые просто используют Vue на странице, не будучи полномасшедшим одностраничным приложением (SPA).

Поскольку один файл компоненты полагаются на WebPack, мы получаем бесплатно возможность использования современных веб-функций.

Ваши CSS могут быть определены с использованием SCSS или стилуса, шаблон может быть построен с помощью мопса, и все, что вам нужно сделать, чтобы это произошло, - это объявить, чтобы объявить, на каком препождении языка вы собираетесь использовать.

Список поддерживаемых препроцессоров включает

Машинопись
SCSS.
Сасс
Меньше
Postcss
Мопс

Мы можем использовать современный JavaScript (ES6-7-8) независимо от целевого браузера, используя интеграцию Babel, а также модули ES, поэтому мы можем использовать Импорт/экспорт заявления.

Мы можем использовать модули CSS для объема наших CSS.

Говоря о Scoping CSS, одновременные компоненты файлов делают абсолютно легко писать CSS, которые не будут утечка Для других компонентов, используя <Стиль Scop Эд> Теги.

Если вы опускаете Навыся , CSS, которые вы определяете, будет глобальным. Но добавление Навыся Tag, Vue автоматически добавляет определенный класс в компонент, уникальный для вашего приложения, поэтому CSS гарантированно не утечна на другие компоненты.

Может быть, ваш JavaScript огромный из-за какой-то логики, о которой вы должны заботиться. Что, если вы хотите использовать отдельный файл для вашего JavaScript?

Вы можете использовать SRC Атрибут для его экстернации:

Это также работает для ваших CSS:

Обратите внимание, как я использовал

export default {  data() {    return {      hello: 'Hello World!'    }  }}

В JavaScript компонента настроить данные.

Другие распространенные способы вы увидите:

export default {  data: function() {    return {      name: 'Flavio'    }  }}

Вышеуказанное эквивалентно тому, что мы сделали раньше.

Или:

export default {  data: () => {    return {      name: 'Flavio'    }  }}

Это другое, потому что он использует функцию стрелки. Функции стрелки в порядке, пока нам не нужно получить доступ к способу компонента. Это проблема, если нам нужно использовать это И такое свойство не связано с компонентом, используя функции стрелки. Так что это обязательно использовать Регулярное Функции, а не функции стрелки.

Вы также можете увидеть:

module.exports = {  data: () => {    return {      name: 'Flavio'    }  }}

Это использует Commonjs Синтаксис и это работает так хорошо. Но я рекомендую использовать синтаксис модулей ES, как это стандарт JavaScript.

Vuue шаблоны

Vue.js использует язык шаблонов, который является сумеретом HTML.

Любой HTML является действительным шаблоном vue.js. В дополнение к этому, Vue.js предоставляет две мощные вещи: интерполяции и директивы.

Это действительный шаблон Vue.js:

Hello!

Этот шаблон может быть помещен внутри компонента Vue, объявленный явно:

new Vue({  template: 'Hello!'})

Или это можно поместить в один файл компонент:

Этот первый пример очень простой. Следующим шагом делает его выводить часть состояния компонента, например, имя.

Это можно сделать с использованием интерполяции. Во-первых, мы добавляем некоторые данные на наш компонент:

new Vue({  
  data: {    
    name: 'Flavio'  
  },  
  template: 'Hello!'
})

И тогда мы можем добавить его в наш шаблон, используя синтаксис двойных кронштейнов:

new Vue({  data: {    name: 'Flavio'  },  template: 'Hello {{name}}!'})

Одна интересная вещь здесь. Посмотрите, как мы только что использовали Имя вместо this.data.name ?

Это потому, что Vue.js делает некоторую внутреннюю связывание и позволяет шаблону использовать свойство, как если бы это было локальным. Довольно удобно.

В одном файловом компонент это было бы:

Я использовал регулярную функцию в моем экспорте. Почему не функция стрелки?

Это потому, что в данные Нам может потребоваться получить доступ к способу в нашем экземпляре компонента, и мы не можем сделать это, если это не связан с компонентом, поэтому мы не можем использовать функцию стрелки.

Обратите внимание, что мы могли бы использовать функцию стрелки, но тогда мне нужно будет не забывать переключаться на обычную функцию в случае, если я использую это Отказ Я думаю, что лучше играть в этом.

Теперь, вернемся к интерполяции.

{имя}} Следует напомнить вам о ущеных/рулях шаблона интерполяции, но это просто визуальное напоминание.

В то время как в этих шаблонных двигателях они «глупые», в Vue, вы можете сделать гораздо больше, и это более гибко.

Вы можете использовать любое выражение JavaScript внутри ваших интерполяций, но вы ограничены только одним выражением:

{{ name.reverse() }}

{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

Vue предоставляет доступ к некоторым глобальным объектам внутри шаблонов, включая математику и дату, поэтому вы можете использовать их:

{{ Math.sqrt(16) * Math.random() }}

Лучше всего избегать добавления сложной логики к шаблонам, но тот факт, что Vue позволяет нам больше гибкости, особенно при попытке.

Сначала мы можем попытаться поставить выражение в шаблон, а затем переместить его в компьютерное свойство или метод позже.

Значение, включенное в любую интерполяцию, будет обновляться при изменении любого из свойств данных, на которых он зависит.

Вы можете избежать этой реактивности, используя v-один раз Директива.

Результат всегда сбежит, поэтому вы не можете иметь HTML на выходе.

Если вам нужно иметь фрагмент HTML, вам нужно использовать V-HTML Директива вместо этого.

Стайлинг Компоненты с использованием CSS

Самый простой вариант, чтобы добавить CSS на компонент Vue.js - использовать Стиль Теги, как в HTML:

Это так же статическое, как вы можете получить. Что, если вы хотите подчеркивать Быть определенным в компонентных данных? Вот как вы можете сделать это:

: стиль это сокращение для V-bind: стиль Отказ Я буду использовать это сокращение на протяжении всего этого руководства.

Обратите внимание, как мы должны были обернуть текстовое украшение в цитатах. Это из-за приборной панели, которая не является частью действительного идентификатора JavaScript.

Вы можете избежать цитат с помощью специального синтаксиса камергада в том, что Vue.js позволяет и переписать его на TextDecoration :

Вместо того, чтобы привязывать объект к Стиль , вы можете ссылаться на вычисленное свойство:

Компоненты Vue генерируют простой HTML, поэтому вы можете добавить класс к каждому элементу и добавить соответствующий селектор CSS со свойствами, которые его стиль:

Вы можете использовать такие SCSS:

Вы можете жесткий код класса, как в приведенном выше примере. Или вы можете связать класс к свойству компонента, чтобы сделать его динамическими и применить только к этому классу, если свойство данных верно:

Вместо того, чтобы привязать объект к классу, как мы сделали с

h

, вы можете напрямую связать строку, и это будет ссылаться на свойство данных:

Вы можете назначить несколько классов, либо добавив два класса на Парный клин В этом случае или с помощью массива:

То же самое можно сделать с помощью объекта, включенного в привязку класса:

И вы можете объединить два утверждения:

Вы также можете использовать вычисленное свойство, которая возвращает объект, который лучше всего работает, когда у вас есть много классов CSS, чтобы добавить в тот же элемент:

Обратите внимание, что в вычисленном собственности необходимо ссылаться на данные компонента, используя Это. [PropertyName] В то время как в данных шаблона свойства удобно помещают в качестве свойств первого уровня.

Любые CSS, которые не жестко закодированы в первом примере, будут обрабатываться Vue, и Vue делает приятную работу автоматически префиксировать CSS для нас. Это позволяет нам писать чистые CSS, пока все еще нацелены на более старые браузеры (которые по-прежнему означает браузеры, которые Vue поддерживает, так что IE9 +).

Директивы

Мы видели в шаблонах Vue.js и интерполяции, как вы можете встроить данные в Vue шаблоны.

Этот раздел объясняет другую технику, предлагаемую Vue.js в шаблонах: директивы.

Директивы в основном такие как атрибуты HTML, которые добавляются внутри шаблонов. Все они начинаются с V- , чтобы указать, что это Vue специальный атрибут.

Давайте посмотрим каждый из директив Vue подробно.

V-текст

Вместо использования интерполяции вы можете использовать V-Text Директива. Он выполняет ту же работу:

V-образ

Вы знаете, как {имя}} связывается с Имя Свойство компонентных данных.

В любое время Имя Изменения в ваших компонентных данных, Vue собирается обновить значение, представленное в браузере.

Если вы не используете v-один раз Директива, которая в основном как атрибут HTML:

{{ name }}

V-HTML

При использовании интерполяции для печати свойства данных HTML сбежается. Это отличный способ, которым Vue использует автоматически защищать от XSS-атак.

Есть случаи, однако, где вы хотите выводить HTML и сделать браузер интерпретировать его. Вы можете использовать V-HTML Директива:

V-bind.

Интерполяция работает только в содержании тегов. Вы не можете использовать его на атрибутах.

Атрибуты должны использовать V-bind :

{{ linkText }}

V-bind Настолько распространено, что для него есть сводный синтаксис:

{{ linkText }}{{ linkText }}

Двусторонняя связывание с использованием V-модели

V-модель Давайте связываем элемент ввода формы, например, и делает его изменение свойства VUE-данных, когда пользователь меняет содержимое поля:

Message is: {{ message }}

Fruit chosen: {{ selected }}

Использование выражений

Вы можете использовать любое выражение JavaScript внутри директивы:

{{ linkText }}

Любая переменная, используемая в директиве, ссылается на собственность соответствующих данных.

Условные условные

Внутри директивы вы можете использовать Ternary Operator для выполнения условной проверки, поскольку это выражение:

Существуют специальные директивы, которые позволяют вам выполнить более организованные условные условия: V-если , v-else и v-else-если Отказ

Hey!

должен подать от себя это логическое значение, содержащееся в данных компонента.

Петли

V-для Позволяет рендерировать список предметов. Используйте его в сочетании с V-bind Чтобы установить свойства каждого элемента в списке.

Вы можете итерацию на простом массиве значений:

Или на массиве объектов:

V-для может дать вам индекс, используя:

События

V-на Позволяет слушать события DOM и запустите метод, когда событие происходит. Здесь мы слушаем событие клики:

Вы можете пройти параметры на любое событие:

Небольшие биты JavaScript (одно выражение) можно поставить прямо в шаблон:

Нажмите это просто одно виду события. Общее событие - Отправить , который вы можете связать, используя V-на: отправить Отказ

V-на Настолько распространено, что для него есть краткий синтаксис, @ :

Click me!Click me!

Показать или скрыть

Вы можете показать только элемент в DOM, если определенное свойство экземпляра Vue оценивает true, используя V-шоу :

Something

Элемент все еще вставлен в DOM, но установить Дисплей: Нет Если условие не удовлетворено.

Модификаторы директивы событий

Vue предлагает некоторые дополнительные модификаторы событий, которые вы можете использовать в ассоциации с V-на , что автоматически заставляет событие сделать что-то без вы явно кодирующего его в обработчике событий.

Один хороший пример - .prevent , который автоматически звонит PreventDefault () на мероприятии.

В этом случае форма не вызывает перезагрузка страницы, которая является поведением по умолчанию:

Другие модификаторы включают .stop , .capture , Это , .once , .appassive И они подробно описано в официальных документах Отказ

Пользовательские директивы

Директивы Vue Default уже позволяют вам сделать много работы, но вы всегда можете добавлять новые, пользовательские директивы, если хотите.

Читать здесь Если вы заинтересованы в обучении больше.

Методы

Что такое методы Vue.js?

Метод Vue - это функция, связанная с экземпляром Vue.

Методы определены внутри Методы свойство:

new Vue({  methods: {    handleClick: function() {      alert('test')    }  }})

или в случае одних файловых компонентов:

Методы особенно полезны, когда вам нужно выполнить действие, и вы прикрепляете V-на Директива на элементе для обработки событий. Как этот, который звонит Handleclick Когда элемент нажат:

Передать параметры для методов Vue.js

Методы могут принимать параметры.

В этом случае вы просто проходите параметр в шаблоне:

new Vue({  methods: {    handleClick: function(text) {      alert(text)    }  }})

или в случае одних файловых компонентов:

Как получить доступ к данным из способа

Вы можете получить доступ к любому из свойств данных компонента Vue, используя This.propertyname :

Нам не нужно использовать this.data.name , просто Это. Немайте Отказ Vue обеспечивает прозрачное связывание для нас. Использование this.data.name будет поднять ошибку.

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

Наблюдатели

Watcher - это специальная функция vue.js, которая позволяет шпионскими на одном свойстве состояния компонента и запускать функцию, когда это изменяется значение свойства.

Вот пример. У нас есть компонент, который показывает имя, и позволяет вам изменить его, нажав кнопку:

Когда имени меняются, мы хотим что-то сделать, как распечатать журнал консоли.

Мы можем сделать это, добавив к Смотреть Объединить свойство, названное как свойство данных, мы хотим посмотреть:

Функция, назначенная на Смотреть. Немайте может необязательно принимать 2 параметра. Первый - это новая стоимость свойств. Второе - это старое значение свойств:

Наблюдатели не могут посмотреть с шаблона, как вы можете с вычисленными свойствами.

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

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

В Vue.js вы можете выводить любое значение данных с помощью скобок:

Это свойство может принять несколько небольших вычислений. Например:

Но вы ограничены одним JavaScript выражение Отказ

В дополнение к этому техническому ограничениям, вам также необходимо учитывать, что шаблоны должны быть обеспокоены только отображением данных пользователю, а не выполнять логические вычисления.

Чтобы сделать что-то более чем одно выражение, и иметь более декларативные шаблоны, вы используете компьютерное свойство.

Вычисленные свойства определены в вычисляется Свойство Vue компонента:

Пример вычисленного свойства

Вот пример, который использует вычисленное свойство Считать Для расчета вывода.

Уведомление:

Мне не нужно было позвонить {{count ()}} Отказ Vue.js автоматически вызывает функцию
Я использовал обычную функцию (не функция стрелки), чтобы определить Считать Вычисляемое свойство, потому что мне нужно иметь возможность получить доступ к экземпляру компонента через это Отказ

Вычисленные свойства против методов

Если вы уже знаете о методах Vue, вы можете задаться вопросом, в чем разница.

Во-первых, методы должны быть названы, а не только ссылки, поэтому вам нужно сделать:

Но главное отличие заключается в том, что вычисленные свойства кэшируются.

Результат Считать Вычисляемое свойство внутренне кэшируется до тех пор, пока Предметы Изменения свойства данных.

Важно: .. Вычисленные свойства обновляются только при обновлении реактивных источников. Регулярные методы JavaScript не являются реактивными, поэтому общий пример должен использовать Date.now () :

Он окажет один раз, а затем он не будет обновлен, даже когда компонент повторно рендерирует. Он только что обновляется на странице обновления, когда Vue Component выходит из окончания и повторно.

В этом случае метод лучше подходит для ваших нужд.

Методы против наблюдателей против вычисленных свойств

Теперь, когда вы знаете о методах, наблюдателях и вычисленных свойствах, вам может быть интересно, когда вы должны использовать его против других.

Вот разбивка этого вопроса.

Когда использовать методы

Реагировать на некоторое событие, происходящее в доме
Чтобы вызвать функцию, когда что-то происходит в вашем компоненте. Вы можете вызвать метод от вычисленных свойств или наблюдателей.

Когда использовать вычисленные свойства

Вам необходимо составить новые данные из существующих источников данных
У вас есть переменная, которую вы используете в своем шаблоне, который построен из одного или нескольких свойств данных
Вы хотите уменьшить сложное, вложенное имя свойства для более читаемого и простого в использовании один (но обновить его, когда исходные изменения свойства)
Вам нужно ссылаться на значение из шаблона. В этом случае создание вычисленного свойства - лучшее, потому что он кэшируется.
Вы должны слушать изменения более одного недвижимости данных

Когда использовать наблюдатели

Вы хотите прослушать, когда свойство данных изменяется и выполняет некоторые действия
Вы хотите послушать изменение ценностей
Вам нужно только слушать одно конкретное свойство (вы не можете смотреть несколько свойств одновременно)
Вы хотите посмотреть свойство данных, пока не достигнет некоторой конкретной стоимости, а затем сделать что-то

Реквизиты: передайте данные в детские компоненты

Реквиты - это то, как компоненты могут принимать данные из компонентов, которые их включают (родительские компоненты).

Когда компонент ожидает одного или нескольких опоры, он должен определить их в своем реквизит свойство:

Vue.component('user-name', {  props: ['name'],  template: 'Hi {{ name }}
'})

или в Vue одно файловый компонент:

Принять несколько реквизитов

Вы можете иметь несколько реквизитов, просто добавив их в массив:

Vue.component('user-name', {  props: ['firstName', 'lastName'],  template: 'Hi {{ firstName }} {{ lastName }}
'})

Установите тип опоры

Вы можете указать тип опоры, просто используя объект вместо массива, используя имя свойства в качестве ключа каждого свойства, а также тип в качестве значения:

Vue.component('user-name', {  props: {    firstName: String,    lastName: String  },  template: 'Hi {{ firstName }} {{ lastName }}
'})

Допустимые типы, которые вы можете использовать:

Нить
Номер
Логический
Множество
Объект
Дата
Функция
Символ

Когда несоответствия типа, Vue предупреждает вас (в режиме разработки) в консоли с предупреждением.

Типы опоры могут быть более сформулированы.

Вы можете разрешить несколько различных типов значений:

props: {  firstName: [String, Number]}

Установить опор

Вы можете потребовать от должности обязательного:

props: {  firstName: {    type: String,    required: true  }}

Установите значение по умолчанию опора

Вы можете указать значение по умолчанию:

props: {  firstName: {    type: String,    default: 'Unknown person'  }}

Для объектов:

props: {  name: {    type: Object,    default: {      firstName: 'Unknown',      lastName: ''    }  }}

по умолчанию Также может быть функция, которая возвращает соответствующее значение, а не фактическое значение.

Вы даже можете построить пользовательский валидатор, который круто для сложных данных:

props: {  name: {    validator: name => {      return name === 'Flavio' //only allow "Flavios"    }  }}

Проезжая реквизит к компоненту

Вы передаете компонент, используя синтаксис

Если то, что вы проходите, является статическим значением.

Если это свойство данных, вы используете

Вы можете использовать тройной оператор внутри ценности SPORP, чтобы проверить истинное состояние и пройти значение, которое зависит от него:

Обработка событий в Vue

Что такое события Vue.js?

Vue.js позволяет нам перехватить любое событие DOM, используя V-на Директива на элементе.

Если мы хотим что-то сделать, когда в этом элементе появляется событие Click:

Мы добавляем V-на Директива:

Vue также предлагает очень удобный альтернативный синтаксис для этого:

Вы можете использовать скобки или нет. @ Нажмите = "Handleclick" эквивалентно @ Нажмите = "handleclick ()" Отказ

Handleclick это метод, прикрепленный к компоненту:

Что нужно знать вот то, что вы можете пройти параметры из событий: @ Нажмите = "handleclick (paral)" И они будут получены внутри метода.

Доступ к оригинальному объекту события

Во многих случаях вы захотите выполнить действие на объект события или посмотреть в нее некоторое свойство. Как вы можете получить доступ к этому?

Используйте специальные $ событие Директива:

И если вы уже передаете переменную:

Оттуда вы могли бы позвонить Event.PreventDefault () , но есть лучший способ: модификаторы событий.

Модификаторы событий

Вместо того, чтобы возиться с DOM "вещами" в ваших методах, скажите vue, чтобы справиться с тобой для вас:

@ click.prevent Позвоните event.preventdefault ()
@ click.stop . Позвоните event.stoppropagation ()
@ click.passive использует Пассивный вариант addeventListener
@ click.capture использует захват событий вместо пузырька событий
@ Нажмите Убедитесь, что событие Click не было пузырено из дочернего события, но напрямую произошло на этом элементе @ click.once
Событие будет запущено только один раз

Все эти варианты могут быть объединены путем добавления одного модификатора за другим.

Подробнее о распространении, пузыри и захвата, см. Мой Руководство по событиям JavaScript Отказ

Введите содержимое с помощью слотов

Компонент может выбирать, чтобы определить его контент целиком, как в этом случае:

Vue.component('user-name', {  props: ['name'],  template: 'Hi {{ name }}
'})

Или это также может позволить родительскому компоненту ввести любой вид содержимого в него, используя слоты.

Что такое слот?

Вы определяете это, положив <Слот> & lt;/slot> в шаблоне компонентов:

Vue.component('user-information', {  template: '
'})

При использовании этого компонента любой контент, добавленный между тегом «Открытие и закрытие», будет добавлен внутри игрового игрока:

Hi!

Если вы положите любую сторону контента <Слот> & LT;/Слот> Теги, которые служат контентом по умолчанию в случае ничего не передается.

Сложный компонент-макет может потребовать лучшего способа организовать контент.

Введите названные слоты Отказ

С именованным слотом вы можете назначить частей слота в определенную позицию в вашем компонентной макете шаблона, и вы используете Слот атрибут любому тегу, назначить содержимое этого слота.

Что-нибудь вне любого тега шаблона добавляется к главной Слот Отказ

Для удобства я использую страница Один файловый компонент в этом примере:

      Home
    Contact

Page title

Page content

Фильтры, помощники шаблонов

Фильтры - это функциональность, предоставленная компонентами Vue, которые позволяют применить форматирование и преобразование в любую часть ваших динамических данных шаблонов.

Они не изменяют данные компонента или что-либо что-либо, но они влияют только на вывод.

Скажем, вы печатаете имя:

Что, если вы хотите проверить это Имя На самом деле содержит значение, а если не печатать «там», так что наш шаблон будет печатать «Привет там!»?

Введите фильтры:

Обратите внимание на синтаксис, чтобы нанести фильтр, который является |. Filtername Отказ Если вы знакомы с Unix, это оператор трубы UNIX, который используется для передачи выхода операции в качестве входа к следующему.

Фильтры Свойство компонента является объектом. Один фильтр - это функция, которая принимает значение и возвращает другое значение.

Возвращенное значение - это тот, который фактически напечатан в шаблоне Vue.js.

Фильтр, конечно, имеет доступ к данным компонента и методам.

Что хорошего использования для фильтров?

Преобразование строки, например, капитализация или извлечение строчных
форматирование цены

Выше вы видели простой пример фильтра: {{имя | Foxback}} Отказ

Фильтры могут быть прикованы, повторяя синтаксис трубы:

{{ name | fallback | capitalize }}

Это сначала относится к Запас фильтр, то капитализировать Фильтр (который мы не определили, но попробуйте сделать один!).

Расширенные фильтры также могут принимать параметры, используя синтаксис параметров обычной функции:

Если вы проходите параметры на фильтр, первый, который передан в функцию фильтра, всегда является элементом в интерполяции шаблона ( имя в этом случае), за которым следуют явные параметры, которые вы пройдены.

Вы можете использовать несколько параметров, отделяя их с помощью запятой.

Обратите внимание, что я использовал функцию стрелки. Мы избегаем функций стрелки в методах и вычисленных свойствах, как правило, потому что они почти всегда ссылаются это Чтобы получить доступ к компонентам данных. Но в этом случае фильтр не нуждается в доступе это Но принимает все необходимые данные по параметрам, и мы можем безопасно использовать более простой синтаксис функции стрелки.

Этот пакет У вас есть много предварительных фильтров для вас, чтобы использовать непосредственно в шаблонах, которые включают капитализировать , Прописные буквы , строчные буквы , Зажигатель , урезать , Валюта , плюрализировать и больше.

Связь среди компонентов

Компоненты в Vue могут общаться различными способами.

Использование реквизита

Первый способ использует реквизиты.

Родители «пропустите» данные, добавляя аргументы к объявлению компонента:

Реквисы односторонние: от родителя к ребенку. В любое время родитель изменяет опоры, новое значение отправляется ребенку и повторно оказано.

Реверс не правда, и вы никогда не должны мутировать опоры внутри дочернего компонента.

Использование событий для общения от детей до родителя

События позволяют вам общаться от детей до родителя:

Родитель может перехватить это, используя V-на Директива при включении компонента в его шаблоне:

Вы можете пройти параметры, конечно:

и извлечь их от родителя:

Использование шины событий для связи между любыми компонентами

Использование событий, которые вы не ограничены дочерним отношениям. Вы можете использовать так называемый автобус событий.

Выше мы использовали Это. $ emit излучать событие на экземпляре компонента.

Вместо этого мы можем сделать, состоит в том, чтобы излучить событие в более общедоступном компоненте.

Это. $ root корневой компонент, обычно используется для этого.

Вы также можете создать VUE компонент, посвященный этой работе, и импортировать его, где вам нужно.

Любой другой компонент может слушать это событие. Вы можете сделать это в монтируется перезвонить:

Это то, что Vue предоставляет из коробки.

Когда вы перерастаете это, вы можете посмотреть в Vuex или другие библиотеки 3-го частей.

Управление состоянием с помощью Vuex

Vuex - официальная государственная библиотека управления для Vue.js.

Его работа - обмениваться данными по компонентам вашего приложения.

Компоненты в Vue.js из коробки могут общаться с помощью

реквизит, чтобы пройти состояние до дочерних компонентов от родителя
События, изменение состояния родительского компонента от ребенка или используя корневой компонент в качестве шины событий

Иногда вещи получают более сложные, чем то, что позволяют эти простые варианты.

В этом случае хороший вариант - централизовать государство в одном магазине. Это то, что делает Vuex.

Почему вы должны использовать Vuex?

Vuex - это не единственный вариант государственного управления, который вы можете использовать в Vue (вы можете использовать redux тоже), но его главное преимущество в том, что он официальный, и его интеграция с Vue.js - это то, что делает его сияющим.

С реагированием у вас есть проблемы с необходимостью выбора одного из многих доступных библиотек, поскольку экосистема огромен и не имеет фактического стандарта. В последнее время Redux был самым популярным выбором, с MobX с точки зрения популярности. С Вью я бы пошел так далеко, что вам не нужно будет оглянуться за что-либо, кроме Vuex, особенно при запуске.

Vuex позаимствовал многие из его идей из экосистемы RACTICSYSTEM, так как это поток потока, популяризированный Redux.

Если вы уже знаете Flux или Redux, Vuex будет очень знакомым. Если вы этого не сделаете, нет проблем - я объясню каждую концепцию с нуля.

Компоненты в приложении Vue могут иметь свое собственное состояние. Например, входное поле будет хранить данные, введенные в нее локально. Это совершенно хорошо, а компоненты могут иметь локальное состояние даже при использовании Vuex.

Вы знаете, что вам нужно что-то вроде Vuex, когда вы начинаете делать много работы, чтобы пройти часть состояния вокруг.

В этом случае Vuex предоставляет центральный хранилище репозитория для государства, и вы мутируете государство, попросив магазин сделать это.

Каждый компонент, который зависит от конкретной части состояния, будет доступ к нему с использованием Getter в магазине, что гарантирует, что он обновляется как можно скорее изменения.

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

Давайте начнем

В этом примере я начинаю от приложения Vue CLI. Vuex можно использовать также непосредственно загрузке в тег скрипта. Но, поскольку Vuex больше в соответствии с большими приложениями, гораздо более вероятно, что вы будете использовать его на более структурированном приложении, как и те, которые вы можете быстро начать с Vue CLI.

Примеры, которые я использую, будет поставлен CodeSandbox, который является отличным сервисом, который имеет Vue CLI образец готов идти. Я рекомендую использовать его для игры.

Как только вы там нажмите кнопку «Добавить зависимость», введите «VEUX» и нажмите на нее.

Теперь Vuex будет перечислена в проектных зависимостях.

Чтобы установить Vuex локально, вы можете просто запустить NPM установить Vuex или пряжа Добавить Vuex Внутри папки проекта.

Создайте магазин Vuex

Теперь мы готовы создать наш магазин Vuex.

Этот файл можно поставить где угодно. Как правило, предлагается положить его в SRC/Store/Store.js Файл, так что мы сделаем это.

В этом файле мы инициализируем Vuex и скажу Vue, чтобы использовать его:

import Vue from 'vue'import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({})

Мы экспортируем объект магазина Vuex, который мы создаем, используя Vuex.store () API.

Использование корпуса для магазина

Теперь, когда у нас есть скелет на месте, давайте придумаемся с идеей для хорошего использования в VEUEx, поэтому я могу представить его концепции.

Например, у меня есть два компонента брата, один с полевым полем, и тот, который печатает, что содержимое входного поля.

Когда поле ввода изменяется, я хочу также изменить содержимое в этом вторым компонентом. Очень просто, но это сделает работу для нас.

Представляем новые компоненты, которые нам нужны

Удалите компонент HellowOrld и добавьте компонент формы и компонент дисплея.

Добавление этих компонентов в приложение

Мы добавляем их в App.vue код вместо компонента HellowOrld:

Добавьте состояние в магазин

Так что с этим на месте мы вернемся к файлу store.js. Мы добавляем свойство в магазине под названием Государство , который является объектом, который содержит аромат свойство. Это пустая строка изначально.

import Vue from 'vue'import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({  state: {    flavor: ''  }})

Мы обновим его, когда пользователь наносится в поле ввода.

Добавить мутацию

Состояние не может быть манипулировано, за исключением использования мутаций. Мы устанавливаем одну мутацию, которая будет использоваться внутри Форма компонент, чтобы уведомить хранить, что состояние должно измениться.

import Vue from 'vue'import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({  state: {    flavor: ''  },  mutations: {    change(state, flavor) {      state.flavor = flavor    }  }})

Добавьте GOTTER для ссылки на государственную собственность

С помощью этого набора нам нужно добавить способ посмотреть на состояние. Мы делаем это, используя GetTers. Мы устанавливаем добытку для аромат свойство:

import Vue from 'vue'import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({  state: {    flavor: ''  },  mutations: {    change(state, flavor) {      state.flavor = flavor    }  },  getters: {    flavor: state => state.flavor  }})

Обратите внимание, как Геттерс это объект. аромат является свойством этого объекта, которое принимает состояние в качестве параметра и возвращает аромат Собственность государства.

Добавление магазина Vuex в приложение

Теперь магазин готов к использованию. Мы вернемся к нашему приложению код, а в файле Main.js нам нужно импортировать состояние и сделать его доступным в нашем приложении Vue.

Мы добавляем

import { store } from './store/store'

И мы добавляем его в приложение Vue:

new Vue({  el: '#app',  store,  components: { App },  template: ''})

Как только мы добавим это, так как это основной состав Vue, магазин Переменная внутри каждого компонента Vue будет указывать на магазин Vuex.

Обновите состояние на действии пользователя, используя Commit

Давайте обновим состояние, когда пользователь вносит что-то.

Мы делаем это, используя Store.comMit () API.

Но сначала давайте создадим метод, который вызывается при изменении входного контента. Мы используем @input а не @Change Потому что последний срабатывает только тогда, когда фокус отошел от коробки ввода, а @input вызывается на каждом клавишке.

Теперь, когда у нас есть ценность вкуса, мы используем API Vuex:

Посмотрите, как мы ссылаемся на магазин, используя Это $ Store ? Это благодаря включению магазин Объект в основной инициализации компонента Vue.

совершать () Метод принимает имя мутации (мы использовали Изменить в магазине Vuex) и полезной нагрузки, которая будет передана мутации в качестве второго параметра его обратного вызова.

Используйте Getter, чтобы распечатать значение состояния

Теперь нам нужно ссылаться на Getter из этого значения в шаблоне отображения, используя $ Store.getters.flavor Отказ это можно удалить, потому что мы в шаблоне, а это неявный.

Полный рабочий исходный код доступен здесь Отказ

В этой головоломке еще много концепций:

Действия
модули
помощники
плагины

Но теперь у вас есть основы, чтобы пойти и читать о них в официальных документах.

Обработка URL-адресов с использованием Vue Router

В веб-приложении JavaScript маршрутизатор является той частью, которая синхронизирует отображаемый в данный момент представление с контентом адресов браузера.

Другими словами, это часть, которая делает изменение URL-адреса, когда вы нажмете что-то на странице, и помогают показать правильный вид, когда вы попадаете на определенный URL.

Традиционно сеть построена вокруг URL. Когда вы попадаете на определенный URL, отображается определенная страница.

С введением приложений, которые проходят внутри браузера и измените то, что видит пользователь, многие приложения сломали это взаимодействие, и вам пришлось вручную обновить URL-адрес с помощью API истории браузера.

Вам нужен маршрутизатор, когда вам нужно синхронизировать URL-адреса для представлений в вашем приложении. Это очень распространенная потребность, и все основные современные рамки теперь позволяют вам управлять маршрутизацией.

Библиотека Vue Router - это путь для отправки Vue.js. Vue не обеспечивает использование этой библиотеки. Вы можете использовать любой универсальную библиотеку маршрутизации, которую вы хотите, или также создайте собственную интеграцию API истории, но преимущество использования Vue Mar Router заключается в том, что он официальный.

Это означает, что он поддерживается тем же людьми, которые поддерживают Vue, поэтому вы получаете более последовательную интеграцию в рамках в рамках, а также гарантируя, что она всегда будет совместима в будущем, независимо от того, что.

Монтаж

Vue Mar Router доступен через NPM с пакетом с именем Vue-маршрутизатор Отказ

Если вы используете Vue через тег скрипта, вы можете включить Vue Router, используя

Unpkg Это очень удобный инструмент, который делает каждый пакет NPM в браузере с простой ссылкой.

Если вы используете Vue CLI, установите его, используя:

npm install vue-router

После установки Vue-маршрутизатор И сделать его доступным либо с помощью тега скрипта или через Vue CLI, теперь вы можете импортировать его в приложение.

Вы импортируете его после Vue и вы звоните Vue.use (Vuerouter) к Установить Это внутри приложения:

import Vue from 'vue'import VueRouter from 'vue-router'

Vue.use(VueRouter)

После звонка Vue.use () Передача объекта маршрутизатора, в любом компоненте приложения, у вас есть доступ к этим объектам:

Это $ маршрутизатор это объект маршрутизатора
Это. $ маршрут это текущий объект маршрута

Объект маршрутизатора

Объект маршрутизатора, доступ к использованию Это $ маршрутизатор Из любого компонента при установке Vue Mar Router установлен в компоненте Root Vue, предлагает множество приятных функций.

Мы можем заставить приложение перейти к новому маршруту, используя

Это $ Router.push ()
Это. $ Router.replace ()
Это. $ Router.go ()

который напоминает толчок , Заменяют и идти Методы истории API.

push () Используется для перехода на новый маршрут, добавив новый элемент в историю браузера
заменить () одинаково, за исключением того, что он не толкает новое состояние в историю

Образцы использования:

this.$router.push('about') //named route, see laterthis.$router.push({ path: 'about' })this.$router.push({ path: 'post', query: { post_slug: 'hello-world' } }) //using query parameters (post?post_slug=hello-world)this.$router.replace({ path: 'about' })

Go () Идет взад и вперед, принимая номер, который может быть положительным или отрицательным, чтобы вернуться в историю:

this.$router.go(-1) //go back 1 stepthis.$router.go(1) //go forward 1 step

Определение маршрутов

Я использую компонент Vue одно файловый компонент в этом примере.

В шаблоне я использую NAV Тег, который имеет три Маршрутизатор-ссылка Компоненты, которые имеют метки домой, логин и о. URL назначается через к атрибут.

Маршрутизатор-вид Компонент - это то, где маршрутизатор Vue поместит содержимое, которое соответствует текущему URL-адресу.

А Маршрутизатор-ссылка Компонент оказывает А Тег по умолчанию (вы можете изменить это). Каждый раз, когда маршрут меняется, либо нажав на ссылку или изменив URL, A Маршрутизатор-Link-Active Класс добавляется к элементу, который относится к активному маршруту, что позволяет вам стилить его.

В части JavaScript мы впервые включаем и устанавливаем маршрутизатор, затем определим три компонента маршрута.

Мы передаем их к инициализации Маршрутизатор Объект, и мы передаем этот объект к корневому экземпляру Vue.

Вот код:

Обычно в приложении Vue вы создаете и устанавливаете корневое приложение, используя:

new Vue({  render: h => h(App)}).$mount('#app')

При использовании Vue Mar Router вы не передаете оказывать недвижимость, но вместо этого вы используете Маршрутизатор Отказ

Синтаксис, используемый в приведенном выше примере:

new Vue({  router}).$mount('#app')

Снаряжение для:

new Vue({  router: router}).$mount('#app')

Смотрите в примере, мы проходим маршруты Массив на Vuerooter конструктор. Каждый маршрут в этом массиве имеет путь и Компонент Пармы.

Если вы пройдете Имя Param тоже у вас есть названный маршрут.

Использование именованных маршрутов для передачи параметров на маршрутизатор нажимайте и заменять методы

Помните, как мы использовали объект маршрутизатора для толкания нового состояния раньше?

this.$router.push({ path: 'about' })

С именем маршрута мы можем пройти параметры на новый маршрут:

this.$router.push({ name: 'post', params: { post_slug: 'hello-world' } })

То же самое касается заменить () :

this.$router.replace({ name: 'post', params: { post_slug: 'hello-world' } })

Что происходит, когда пользователь нажимает на роутер-ссылку?

Приложение оказывает компонент маршрута, который соответствует URL-адресу, переданному ссылку.

Новый компонент маршрута, который обрабатывает URL, создается, и его охранники вызывают, а старый компонент маршрута будет уничтожен.

Маршрут

Так как мы упоминали охранников, давайте познакомимся с ними.

Вы можете думать о них как к крючкам жизненного цикла или промежуточного программного обеспечения. Это функции вызываются в определенные времена во время выполнения приложения. Вы можете перейти и изменить выполнение маршрута, перенаправления или просто отменить запрос.

Вы можете иметь глобальные охранники, добавив обратный вызов на Rebedeach () и Upoted () Свойство маршрутизатора.

Rebedeach () вызывается до подтверждения навигации
BeforerEsolve () называется, когда Rebedeach () выполняется и все компоненты Beforerouterenter и BeforeRouteupdate Гвардии называются, но до подтверждения навигации. Окончательная проверка.
Upoted () называется после подтверждения навигации

Что означает «навигация подтверждена»? Мы увидим это через секунду. Тем временем подумайте об этом как «приложение может пойти к этому маршруту».

Использование:

this.$router.beforeEach((to, from, next) => {  // ...})

this.$router.afterEach((to, from) => {  // ...})

к и от представлять объекты маршрута, которые мы идем и из.

Rebedeach имеет дополнительный параметр Следующий который если мы позвоним с ложь В качестве параметра заблокируйте навигацию и заставляют его не подтвердить.

Как в узле промежутка, если вы знакомы, Далее () всегда должно быть вызвано, в противном случае исполнение застряло.

Одиночные маршрутные компоненты также имеют охранников:

Beforerouteenter (от, до следующего) вызывается до подтверждения текущего маршрута
beforerouteupdate (от, до следующего) называется, когда маршрут меняется, но компонент, который управляет, это все еще одинаково (с динамическим маршрутом, см. Следующий )
BeForeRouteLeave (от, до следующего) называется, когда мы отойдем отсюда

Мы упомянули навигацию. Чтобы определить, подтверждается ли навигация к маршруту, Vue Router выполняет некоторые проверки:

это называет BeforeRouteLeave Охранник в текущем компонент (ы)
Это называет маршрутизатор Rebedeach () сторожить
это называет beforerouteupdate () в любом компоненте, который необходимо повторно использовать, если каком-либо существует
это называет foreperer () Охранник на объекте маршрута (я не упомянул об этом, но вы можете посмотреть здесь )
это называет BeforerOuterenter () в компоненте, который мы должны войти в
Это называет маршрутизатор BeforerEsolve () сторожить
Если все было хорошо, навигация подтверждена!
Это называет маршрутизатор Upoted () сторожить

Вы можете использовать охранники, определенные на маршрутах ( BeForereTeenter и BeforereEnteupdate в случае динамического маршрутизации) как крючки жизненного цикла, поэтому вы можете начать наличие запросов на получение выбора данных.

Динамическая маршрутизация

Пример выше показывает другой вид на основе URL, обрабатывая / , /Вход и /О маршруты.

Очень общая потребность состоит в том, чтобы обращаться с динамическими маршрутами, как иметь все сообщения под /post/ Каждый с именем слизняка:

/post/form
/post/другое сообщение
/post/hello-more

Вы можете достичь этого, используя динамический сегмент.

Это были статические сегменты:

const router = new VueRouter({  routes: [    { path: '/', component: Home },    { path: '/login', component: Login },    { path: '/about', component: About }  ]})

Мы добавляем в динамический сегмент для обработки сообщений в блоге:

const router = new VueRouter({  routes: [    { path: '/', component: Home },    { path: '/post/:post_slug', component: Post },    { path: '/login', component: Login },    { path: '/about', component: About }  ]})

Обратите внимание на : post_slug синтаксис. Это означает, что вы можете использовать любую строку, и это будет сопоставлено на post_slug заполнитель.

Вы не ограничиваетесь этим видом синтаксиса. Vue полагается на Эта библиотека разбирать динамические маршруты, и вы можете пойти с ума с регулярными выражениями.

Теперь внутри компонента Post Route мы можем ссылаться на маршрут, используя $ маршрут и пост слизняки используют $ bramp.params.post_slug :

const Post = {  template: 'Post: {{ $route.params.post_slug }}
'}

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

Вы можете иметь столько динамических сегментов, сколько вы хотите, в том же URL:

/post/: автор/: post_slug

Помните, как мы говорили о том, что происходит, когда пользователь навигается к новому маршруту?

В случае динамических маршрутов, что происходит немного отличается.

Для Vue будет более эффективным, вместо того, чтобы уничтожить текущий компонент маршрута и повторно создавать его, он повторно использует текущий экземпляр.

Когда это произойдет, Vue звонит BeforeRouteupdate событие жизненного цикла.

Там вы можете выполнить любую операцию, которую вам нужно:

const Post = {  template: 'Post: {{ $route.params.post_slug }}
'  beforeRouteUpdate(to, from, next) {    console.log(`Updating slug from ${from} to ${to}`)    next() //make sure you always call next()  }}

Использование реквизита

В примерах я использовал $ bramp.params. * Чтобы получить доступ к данным маршрута. Компонент не должен быть настолько плотно связан с маршрутизатором, а вместо этого мы можем использовать реквизиты:

const Post = {  props: ['post_slug'],  template: 'Post: {{ post_slug }}
'}

const router = new VueRouter({  routes: [    { path: '/post/:post_slug', component: Post, props: true }  ]})

Обратите внимание на Реквизит: правда передается на объект маршрута, чтобы включить эту функциональность.

Вложенные маршруты

Прежде чем я упомянул, что вы можете иметь столько динамичных сегментов, сколько вы хотите, в том же URL, например:

/post/: автор/: post_slug

Итак, скажем, у нас есть компонент автора, заботясь о первом динамическом сегменте:

Мы можем вставить секунду Маршрутизатор-вид Экземпляр компонента внутри авторского шаблона:

const Author  = {  template: 'Author: {{ $route.params.author}}
'}

Мы добавляем компонент пост:

const Post = {  template: 'Post: {{ $route.params.post_slug }}
'}

Затем мы внесем внутренний динамический маршрут в Vuerooter Конфигурация:

const router = new VueRouter({  routes: [{    path: '/post/:author',    component: Author,    children: [      path: ':post_slug',      component: Post    ]  }]})

Спасибо за чтение!

{{ msg }}

Essential Links

Ecosystem

Hello world!

Hi!

Page title

Во-первых, что такое JavaScript Frond-End Framework?

Популярность Vue

Почему разработчики любят Vue

Где Vue.js позиция себя в рамках ландшафта?

Ваше первое приложение Vue

Первый пример

Второй пример: приложение Vue CLI по умолчанию

Структура файлов

index.html.

SRC/Main.js.

src/app.vue.vue.

SRC/Компоненты/helloworld.vue

{{ msg }}

Essential Links

Ecosystem

Запустите приложение

Vue Cli.

Монтаж

Что обеспечивает Vue CLI?

Как использовать CLI для создания нового проекта Vue

Как начать недавно созданное приложение Vue CLI

Git Repository

Используйте предустановку из командной строки

Где предустановки хранятся

Плагины

Удаленно хранить пресеты

Еще одно использование VUE CLI: быстрые прототипирование

Hello world!

WebPack

Vue devtools.

Установить на Chrome.

Установите на Firefox

Установите автономное приложение

Как использовать инструменты разработчика

Фильтрующие компоненты

Выберите компонент на странице

Формат имена компонентов

Фильтр проверены данные

Осматривать домо

Открыть в редакторе

Настройка VS-код для работы с Vue

Ветура

Установка Ветура

Синтаксис выделения

Фрагменты

Intellisense.

Леса

Emmet.

Проверка линта и ошибок

Форматирование кода

Представляем составляющие Vue

Как использовать компоненты

Локальные компоненты

Повторное использование компонента

Строительные блоки компонента

Один файловые компоненты

Vuue шаблоны

Стайлинг Компоненты с использованием CSS

Директивы

V-текст

V-образ

V-HTML

V-bind.

Двусторонняя связывание с использованием V-модели

Использование выражений

Условные условные

Петли

События

Показать или скрыть

Модификаторы директивы событий

Пользовательские директивы

Методы

Что такое методы Vue.js?

Передать параметры для методов Vue.js

Как получить доступ к данным из способа

Наблюдатели

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

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

Пример вычисленного свойства

Вычисленные свойства против методов