Vue.js 2 Краткое руководство, 2017 г.

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Что такое Vue.js

Vue - это прогрессивный JavaScript-фреймворк, ориентированный на создание пользовательских интерфейсов. Поскольку он работает только на «уровне представления», он не предполагает наличия промежуточного программного обеспечения и серверной части и, следовательно, может быть легко интегрирован в другие проекты и библиотеки. Vue.js предлагает множество функций для уровня представления и может использоваться для создания мощных одностраничных веб-приложений. Ниже вы можете найти список функций:

Реактивные интерфейсы
Декларативный рендеринг
Связывание данных
Директивы
Логика шаблона
Компоненты
Обработка событий
Вычисленные свойства
CSS-переходы и анимация
Фильтры

Ядро библиотеки Vue.js 2 очень мало (всего 17 КБ). Это гарантирует, что накладные расходы, которые добавляются к вашему проекту с помощью Vue.js, минимальны, а ваш веб-сайт загружается быстро.

Веб-сайт Vue.js доступен по адресу: https://vuejs.org/

Как использовать Vue.js

Есть разные способы включить Vue.js в ваш веб-проект:

Используйте CDN, включив тег ‹script› в файл HTML
Установить с помощью диспетчера пакетов узлов (NPM)
Установить с помощью Bower
Используйте Vue-cli для настройки вашего проекта

Далее мы перейдем к Vue-cli, чтобы настроить новый проект и установить библиотеку Vue.js 2.

Использование Vue-cli

Во-первых, нам нужно установить Vue-cli. Интерфейс commend доступен в виде пакета NPM. Убедитесь, что Node.js и команда npm доступны в вашей системе, и используйте следующую команду для глобальной установки Vue CLI в вашей локальной системе:

$ npm install -g vue-cli

После установки клиент успешно, команда vue становится доступной. Теперь мы можем запустить проект с помощью этой команды следующим образом:

$ vue init webpack vueapp01

Мы говорим vue инициировать новый проект и используйте шаблон webpack. Мы также даем проекту имя vueapp01. Выполнение команды вызывает несколько вопросов в командной строке, как вы можете видеть на следующем снимке экрана:

Проект создается в папке vueapp01. Перейдите в этот каталог с помощью следующей команды:

$ cd vueapp01

Начните установку зависимостей, снова используя npm:

$ npm install

После завершения установки пакетов вы можете запустить веб-сервер в режиме разработки, используя npm следующим образом:

$ npm run dev < br />
Это запустит сервер на порту 8080, и вывод приложения автоматически отобразится в браузере:

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

$ npm run build

Структура проекта

Давайте посмотрим на исходную структуру проекта, которая находится в папке vueapp01:

В корневой папке проекта находятся файлы и папки. Разберем самые важные из них. Файлы package.json содержат все зависимости вашего проекта. Используя команду npm install до того, как мы убедимся, что зависимости, перечисленные в package.json, установлены в папку node_modules проекта.

Файл index.html содержит следующий HTML-код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vueapp01</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Этот файл является отправной точкой вашего приложения. Обратите внимание, что в разделе body доступен элемент <div>, для которого свойство id имеет значение string app. Этот элемент используется в качестве заполнителя для вывода, который генерируется Vue.js.

Затем посмотрите файл main.js в папке src. Это место, где инициализируется приложение Vue:

import Vue from 'vue'
import App from './App'
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

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

import Vue from 'vue': Vue - это основной класс фреймворка.
import App from './App': Приложение - корневой компонент нашего приложения.

С помощью ключевого слова new создается новый экземпляр основного класса фреймворка Vue. Конструктор принимает объект в качестве параметра, который содержит три свойства:

el: назначая строку #app этому свойству, мы определяем, что вывод приложения Vue должен отображаться в элементе <div id="app"></div ›в index.html.
template: шаблон содержит HTML-код, который используется для генерации вывода приложения Vue.js.
components: Список компонентов Vue.js, которые используются в шаблоне.

Шаблон состоит только из одного элемента: <App/>. Конечно, это не стандартный HTML-элемент. Это элемент, который назначается компоненту приложения. Чтобы иметь возможность использовать <App/> в шаблоне, компонент приложения также указан в объекте, который назначен свойству components.

Итак, давайте посмотрим, что находится внутри реализации компонента приложения в файле App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
<script>
import Hello from './components/Hello'
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Как и в каждом однофайловом компоненте Vue.js 2, реализация приложения разделена на три части:

<template></template>: Код шаблона компонента
<script></script>: Код скрипта компонента
<style></style>: CSS-код компонента

Давайте сосредоточимся на первых двух разделах template и script. В разделе сценария выполняется экспорт по умолчанию объекта, объявляющего компонент с именем app. Опять же, свойство components используется для объявления того, что приложению требуется другой компонент (Hello). Этот подкомпонент используется в коде шаблона приложения и реализован в файле hello.vue в папке components. Чтобы иметь возможность использовать компонент Hello в App, также необходимо включить соответствующий оператор импорта в верхней части раздела скрипта.

Реализация компонента Hello выглядит следующим образом:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Объект конфигурации компонента экспортируется по умолчанию. На этот раз объект конфигурации компонента содержит метод data. Этот метод возвращает объект, представляющий модель компонента. Свойства, определенные в объекте модели, можно использовать в шаблоне компонента с помощью синтаксиса интерполяции. В приведенном выше примере объект модели имеет только одно свойство: msg. Строка, присвоенная этому свойству, включается в шаблон компонента с помощью:

<h1>{{ msg }}</h1>

Синтаксис интерполяции требует двойных фигурных скобок для включения данных модели в шаблон.

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

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

v-для

Директива v-for позволяет отрисовывать элемент несколько раз на основе исходных данных. Вы можете использовать эту директиву для перебора массива и данных массива для вывода. Сначала добавьте массив к объекту, который возвращается методом data:

users: [
        {firstname: 'Sebastian', lastname: 'Eschweiler'},
        {firstname: 'Bill', lastname: 'Smith'},
        {firstname: 'John', lastname: 'Porter'}
      ],

Затем используйте директиву v-for, чтобы включить список в вывод, выводящий значение firstname и lastname каждого элемента массива:

<div>
      <ul>
        <li v-for="user in users">
          {{user.firstname}} {{user.lastname}}
        </li>
      </ul>
    </div>

v-модель

Директива v-model создает двустороннюю привязку к входному элементу или компоненту. Обязательно определите свойство в вашем объекте данных, которое следует использовать в качестве цели привязки:

input_val: ''

Затем используйте директиву для привязки значения входного элемента к этому свойству:

<div>
      <input type="text" v-model="input_val">
</div>

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

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

v-текст

С помощью директивы v-text устанавливается текстовое содержимое элемента. Мы можем использовать его как альтернативу синтаксису {{…}}, если необходимо установить полное текстовое содержимое. Например. мы можем использовать эту директиву для вывода значения input_val пользователю:

Input Value: <span v-text="input_val"></span>

Резюме

Полный код адаптированной реализации компонента Hello теперь должен выглядеть следующим образом:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <hr />
    <div>
      <ul>
        <li v-for="user in users">
          {{user.firstname}} {{user.lastname}}
        </li>
      </ul>
    </div>
    <hr />
    <div>
      <input type="text" v-model="input_val">
    </div>
    <div>
      Input Value: <span v-text="input_val"></span>
    </div>
    <hr />
    <div>
      <button class="btn btn-primary" v-on:click="counter++">You've clicked this button {{counter}} times!</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      users: [
        {firstname: 'Sebastian', lastname: 'Eschweiler'},
        {firstname: 'Bill', lastname: 'Smith'},
        {firstname: 'John', lastname: 'Porter'}
      ],
      input_val: '',
      counter: 0
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
    list-style-position: inside;
}
a {
  color: #42b983;
}
</style>

Результат можно увидеть на следующем скриншоте:

Видеоурок

Этот видеоурок содержит шаги, описанные в тексте выше:

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Vue.js 2 Краткое руководство, 2017 г.