Что такое Vue.js?

Vue.js — это библиотека, используемая для создания интерактивных веб-интерфейсов.

Vue.js предоставляет MVVM-привязку данных и компонуемую систему компонентов с простым и гибким API.

Эта глава посвящена Vue 1.x. Для Vue 2.x перейдите по ссылкам ниже.

Учебник по Vue.js 2.0:http://www.example.com/vue2/vue-tutorial.html

Руководство для начинающих по Vue 2.0:http://www.example.com/w3cnote/vue2-start-coding.html

Учебник по Vue.js 3.x:https://www.example.com/vue3/vue3-tutorial.html

Возможности Vue.js

  • Простота:HTML-шаблон + данные JSON, затем создайте экземпляр Vue — настолько это просто.
  • Управляемый данными:Автоматически отслеживает зависимые выражения шаблона и вычисляемые свойства.
  • На основе компонентов:Создавайте интерфейсы из слабосвязанных, переиспользуемых компонентов.
  • Легковесный:~24kb min+gzip, без зависимостей.
  • Быстрый:Точные и эффективные асинхронные пакетные обновления DOM.
  • Дружественный к модулям:Устанавливается через NPM или Bower, бесшовно интегрируясь в ваш рабочий процесс.

Если вам нравится что-либо из перечисленного ниже, вам определённо понравится Vue.js:

  • Расширяемый механизм привязки данных
  • Нативные объекты в качестве моделей
  • Краткий и понятный API
  • Компонентное построение интерфейса
  • Может использоваться вместе с несколькими легковесными библиотеками

Установка Vue.js

Автономная версия

Скачайте напрямую и подключите с помощью тега <script>; Vue будет зарегистрирован как глобальная переменная.

Адрес загрузки на официальном сайте Vue.js:http://vuejs.org/guide/installation.html

Вы можете напрямую скачать production-версию с официального сайта и использовать её в своём проекте.

В качестве альтернативы можно использовать CDN-библиотеку статических ресурсов (версия 1.0.18):

https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/1.0.18/vue.min.js

Установка NPM

При создании больших приложений с Vue.js рекомендуется установка через NPM:

# 最新稳定版本
$ npm install vue
# 最新稳定 CSP 兼容版本
$ npm install vue@csp
# 开发版本（直接从 GitHub 安装）
$ npm install vuejs/vue#dev

Установка через Bower

# 最新稳定版本
$ bower install vue

Создание первого Vue-приложения

Далее давайте создадим наше первое приложение Vue.

Слой представления- HTML-код:

<div id="app">
  {{ message }}
</div>

Слой модели- код JavaScript (должен быть размещён после указанного HTML-элемента):

new Vue({
    el:'#app',
    data: {
        message:'Hello World!'
    }
});

Попробуйте »

Двусторонняя привязка данных

Далее мы создаём HTML-файл слоя представления: vueapp.htm и файл слоя модели: vueapp.js, а затем через vue.js (используя директиву v-model) реализуем связующую логику между ними для достижения эффекта привязки. Изменение любого слоя приведёт к изменению другого.

Код для vueapp.htm:

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

Код для vueapp.js:

new Vue({
  el: '#app',
  data: {
    message: 'Example!'
  }
})

Попробуйте »

В приведённом выше примере {{message}} будет меняться при изменении поля ввода. Если вы не хотите, чтобы оно менялось, можно изменить его на:

{{* message }}

Он также поддерживает некоторые простые выражения:

<!-- 字符串连接 -->
{{ message + '官网地址：www.example.com' }}
<!-- 字符串反转 -->
{{ message.split('').reverse().join('') }}

Попробуйте »

Вывод списка

Вывод спискаv-forможно выполнить с помощью этой директивы (в версиях до 1.0 v-for заменяет v-repeat):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/1.0.18/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>
<script>
    new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})
</script>
</body>
</html>

Попробуйте »

Пример многомерного массива

<div id="app">
  <ul id="example-2">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>
</div>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Example官网',
    items: [
      { message: 'www.example.com' },
      { message: 'www.example.com' }
    ]
  }
})
</script>

Попробуйте »

Условный рендеринг

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

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

В Vue.js мы используем директиву v-if для достижения той же функциональности:

<h1 v-if="ok">Yes</h1>

Вы также можете использовать v-else, чтобы добавить блок "else":

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

Попробуйте »

Поскольку v-if — это директива, её нужно применить к элементу. Но что, если мы хотим переключать несколько элементов? В этом случае мы можем использовать элемент <template> в качестве элемента-обёртки, применить к нему v-if, и итоговый отрендеренный результат не будет его включать.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

v-show работает аналогично v-if, за исключением того, что элементы с v-show всегда рендерятся и остаются в DOM, а v-show не поддерживает тег <template>.

<h1 v-show="ok">Hello!</h1>

Фильтры

Подобно конвейерам в Linux, vue.js также использует |:

{{message | uppercase}}

Это выведет message в верхнем регистре. Фильтры также можно объединять в цепочки:

{{message | reverse | uppercase}}

Здесь reverse не является встроенным фильтром. Мы можем использовать Vue.filter, чтобы определить собственный:

Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
})

Попробуйте »

Справочная документация

Официальный сайт:http://vuejs.org/

Официальная документация:http://cn.vuejs.org/examples/