Основы Vue

Познакомьтесь с Вуейсом
Инструкция интерполяции
V-бит имущество связывания
вычисляемые свойства
команда прослушивателя событий
- 1.v-на параметр
- 2.v-на модификатор
Инструкции по условному рендерингу
прокручивать инструкции
v-модель привязки формы
Общие черты Vue

Познакомьтесь с Вуейсом

1. Знайте Vuejs

Vue — прогрессивный фреймворк, что такое прогрессивный?
- Декларативный рендеринг → Система компонентов → Маршрутизация клиентов → Централизованное управление состоянием → Сборка проекта
- Прогрессивный означает, что вы можете встроить Vue как часть своего приложения для более богатого интерактивного взаимодействия.
Vue имеет множество функций и расширенных функций, распространенных в веб-разработке.
- Разделите представление и данные
- многоразовые компоненты
- Передняя технология маршрутизации
- государственное управление
- виртуальный DOM

2. Первый опыт Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导入Vue的包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <!--这个div区域就是MVVM中的 View-->
    <div id="app">
        {{message}}
    </div>
</body>
<script>
    // 2、创建一个Vue的实例
    var app = new Vue({
        el: '#app', //用于挂载要管理的元素
        data: {// 定义数据
            message: '学习Vue.js'
        }
    });
</script>
</html>

3. MVVM во Vue

Просмотр слоя
- слой просмотра
- Во фронтенд-разработке обычно используется слой DOM.
- Основная функция - отображение различной информации пользователям
Слой модели
- слой данных
- Данные могут быть нашими фиксированными мертвыми данными, больше с нашего сервера, данными, запрошенными из сети.
Слой VueModel
- просмотреть слой модели
- Уровень модели представления является связующим звеном между представлением и моделью.
- С одной стороны, реализует привязку данных, то есть привязку данных, которая отражает изменения Модели в Представлении в режиме реального времени.
- С другой стороны, он реализует DOM Listener, то есть DOM listener.Когда в DOM происходят какие-то события (щелчок, прокрутка, касание и т. д.), вы можете его прослушать и при необходимости изменить соответствующие Data.

4. Параметры, переданные экземпляром Vue

в настоящее время освоен

Имя свойства	Типы	эффект
`el`	Тип: строка \| HTMLElement	Определите, какой DOM будет управлять экземпляр Vue.
`data`	Тип: Объект \| Функция (данные должны быть функцией в компоненте)	Объект данных, соответствующий экземпляру Vue
`methods`	Тип: { [ключ: строка]: функция}	Определите некоторые методы, принадлежащие Vue, которые можно вызывать в другом месте или использовать в директивах.

5. Жизненный цикл Vue

Официальная фигура

Инструкция интерполяции

1.Mustache

интерполяционное выражение {{}}

Наиболее распространенной формой привязки данных является интерполяция текста с использованием синтаксиса «усы» (двойные фигурные скобки). Например:
<span>Message: {{ msg }}</span>
Тег Mustache будет заменен значением атрибута msg соответствующего объекта данных (msg определяется в объекте данных).

Всякий раз, когда изменяется свойство msg связанного объекта данных, содержимое интерполяции автоматически обновляется.

грамматика	`{{}}`Поддержка выражений JavaScript
нормальное выражение	{{ number + 1 }}
Тернарное выражение	{{ ok ? 'YES' : 'NO' }}
Тернарное выражение	{{ name == 'smyhvae' ? 'true' : 'false' }}
метод вызова	{{ message.split('').reverse().join('') }}

2.v-once

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

<h2 v-once>{{message}}</h2>

3.v-html

Разберите html-код в данных и отобразите его на странице

<h2 v-html="url"></h2>

4.v-text

Роль v-текста аналогична роли Уса: оба используются для отображения данных в интерфейсе, разница в том, что v-текст прописывается в атрибутах v-text обычно получает строковый тип

<h2 v-text="text"></h2>

5.v-pre

v-pre используется для пропуска процесса компиляции этого элемента и его дочерних элементов и используется для отображения исходного синтаксиса Mustache.

<h2 v-pre>{{message}}</h2>

6.v-cloak

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

<!-- 在vue解析之前, div中有一个属性v-cloak
在vue解析之后, div中没有一个属性v-cloak -->
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

Суммировать

Усы: синтаксис {{}}, вы можете писать переменные/логические выражения/вычисляемые значения...
v-once : элемент отображается только один раз и не изменяется при изменении данных.
v-html="" : анализировать html-код в данных и отображать его на странице.
v-text="msg": напишите атрибут для отображения данных в интерфейсе
v-pre: исходный вывод, показывающий исходный синтаксис Mustache.
v-cloak : обычно используется в сочетании с правилами CSS, этого достаточно для решения проблемы мерцания в выражениях интерполяции.

свойства привязки v-bind

1. Введение в v-bind

Основное назначение изученных нами ранее директив — вставка значений в содержимое нашего шаблона.
Однако в дополнение к содержимому, которое необходимо определять динамически, некоторые свойства также необходимо динамически связывать.
Функция: вы можете динамически привязывать одну или несколько функций к элементам или компонентам html, например динамическое связывание.styleа такжеclass
- Например, динамически привязать атрибут href элемента a
- Например, динамически привяжите атрибут src элемента img.
На этом этапе мы можем использовать команду v-bind:
- эффект: динамически связанные свойства
- Сокращенное название::
- ожидал: любой (с аргументом) | Объект (без аргумента)
- параметр:attrOrProp (необязательно)

2.v-bind класс привязки

Есть два способа связать класс

синтаксис объекта

синтаксис массива

синтаксис объекта
- Значение синтаксиса объекта:classза которым следует объект.

 <!-- 用法一：直接通过{}绑定一个类 -->
<h2 :class="{'active': isActive}">Hello World</h2>

 <!-- 用法二：也可以通过判断，传入多个值 -->
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

 <!-- 用法三：和普通的类同时存在，并不冲突 -->
<!--注：如果isActive和isLine都为true，那么会有title/active/line三个类-->
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

 <!-- 用法四：如果过于复杂，可以放在一个methods或者computed中 -->
 <!--注：classes是一个计算属性 -->
<h2 class="title" :class="classes">Hello World</h2>

синтаксис массива
- Смысл синтаксиса массива:classза которым следует массив.

 <!-- 1. ['active','news'] 当字符串使用 -->
<h2 class="title" :class="['active','news']">{{message}}</h2>
 <!-- [active, new] 当变量使用 -->
<h2 class="title" :class="[active,news]">{{message}}</h2>
 <!-- 3. 函数返回值使用 -->
<h2 class="title" :class="getClasses()">{{message}}</h2>

3.v-bind стиль привязки

Мы можем использовать v-bind:style для привязки некоторых встроенных стилей CSS.
Есть два способа связать класс
- синтаксис объекта
- синтаксис массива
синтаксис объекта
- styleза которым следует тип объекта
- объектkeyимя свойства css
- объектvalueэто конкретное присвоенное значение, которое может исходить отdataсвойства в

:style="{color: currentColor, fontSize: fontSize + 'px'}"

синтаксис массива
- styleЗа ним следует тип массива, а несколько значений разделяются ,

<div v-bind:style="[baseStyles, fontColor]"></div>
/* js */
baseStyle: {background: 'lime'},
fontSize: {fontSize: '80px'}

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

1. Основные понятия

Назначение вычисляемых свойств — решить проблему, заключающуюся в том, что слишком много логики в шаблоне сделает шаблон слишком тяжелым и трудным в обслуживании.
Вычисляемые свойства кэшируются на основе их реактивных зависимостей.
В некоторых случаях нам может потребоваться преобразовать данные перед их отображением или объединить несколько данных для отображения.
- Например, у нас естьfirstNameа такжеlastNameДве переменные, нам нужно отображать полное имя.
- Но если полное имя должно отображаться в нескольких местах, нам нужно написать несколько{{firstName}} {{lastName}}

Преобразуйте приведенный выше код в вычисляемое свойство.

/* html */ 
<h2>{{fullNmae}}</h2>

/* js */
computed: {
    fullNmae: function () {
      return this.firstNmae + ' ' + this.lastNmae;
    }
  }

2. Сеттеры и геттеры для вычисляемых свойств

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

Развернуть для просмотра

3. Кэширование вычисляемых свойств

Разница между методами и вычисляемыми
- methodsНезависимо от того, изменились ли данные внутри, функция будет выполняться до тех пор, пока она вызывается (иногда данные не изменились и мы не хотим вызывать функцию)
- computedВычисленные свойства будут кэшироваться, и если данные не изменились, функция будет вызываться только один раз (функция будет вызываться только при изменении данных)
Суммировать:
- methodsФункция будет вызываться вне зависимости от того, изменились данные или нет.
- computedТолько когда зависимые данные изменяется в функции обратного вызова

команда прослушивателя событий

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

1.v-на параметр

когдаmethodsметоды определены в , для@clickПри звонке нужно обратить внимание на проблему параметра
Случай 1: Если метод не требует дополнительных параметров, после метода()можно опустить
- Если параметр не передается, собственное событие будет использоваться по умолчанию при получении формального параметра.eventПередача параметров
Случай 2: если вам нужно одновременно передать параметр, вам нужноevent, можно пройти через$eventвходящее событие

2.v-на модификатор

v-onДля помощи в реализации некоторых функций предусмотрено множество модификаторов событий. Модификаторы событий следующие:

модификатор	эффект
.stop	Прекрати булькать. Суть в вызове event.stopPropagation()
.prevent	Суть предотвращения поведения события по умолчанию заключается в вызове event.preventDefault().
.{keyCode \| keyAlias }	Обратный вызов срабатывает только тогда, когда событие запускается с определенной клавиши
.once	Событие срабатывает только один раз

Инструкции по условному рендерингу

1.vi-f и v-иначе-если и v-иначе

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

<h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>

Не рекомендуется использовать больше логики в шаблонахv-if-else-if

2. Проблема повторного использования элементов

Проблема: это касается нижнего слоя Vue, виртуального DOM, виртуального DOM. После нажатия формы переключения значение ввода не очищается, почему?

Производное: при реализации переключения по нажатию кнопкиinputформа, мы вводимvalue, когда вы нажмете кнопку переключения формы, вы найдетеvalueзначение все еще существует, ноinputЭлемент переключается, почему?

<span v-if="isUser">
      <label for="user">用户名</label>
      <input type="text" placeholder="用户名" id="user" key="user">
</span>
<span v-else>
      <label for="email">邮箱</label>
      <input type="text" placeholder="邮箱" id="email" key="email">
</span>
<button @click="isUser=!isUser">切换类型</button>
<script> 
const app = new Vue({
  el: '#app',
  data: {
     isUser: true
  }
})
</script>

причина:
- 1. Это связано с тем, что при рендеринге DOM Vue из соображений производительности будет максимально повторно использовать существующие элементы вместо создания новых.
- 2. В приведенном выше случае Vue выполнит внутреннее сравнение и обнаружит, что две части похожи, будут заменены только атрибуты, а новые элементы создаваться не будут.
- 3. Ввод вышеуказанного if больше не используется и используется непосредственно как ввод else
решение
- 1. Если мы не хотимVueЕсли есть проблема, похожая на повторное использование, вы можете дать соответствующийinputДобавить кkey
- 2. И убедитесь, что вы получаете то, что вам нужноkeyразные, такvueсоздаст новыйinputэлемент

3.v-show

Использование v-show очень похоже на v-if, и оно также используется для определения того, визуализируется элемент или нет.

сравнение v-if и v-show
- v-if Когда условие ложно, в DOM вообще не будет соответствующего элемента
- v-show просто устанавливает для свойства display элемента значение none, когда условие ложно
Как выбрать в разработке?
- Используйте v-show при частом переключении между показом и скрытием
- Когда есть только один переключатель, с помощью v-if

<h2 v-show="isShow">{{message}}</h2>

прокручивать инструкции

1.v-for перебирает массив

Функция: Генерация содержимого путем обхода указанного содержимого шаблона в соответствии с элементами массива.
грамматика:v-for="(item, index) in items"

<ul>
    <!-- item: 是每一项元素 index: 下标/索引 -->
    <li v-for="(item, index) in name">
      {{index+1}}.{{item}}
    </li>
 </ul>

2.v-for перебирает объекты

Роль: перебирать объекты
грамматика:v-for="(value, key, index) in items"

<ul>
    <!-- value:属性值  key:属性名  index:下标/索引 -->
    <li v-for="(value, key, index) in info">
      {{index+1}}.{{value}}
    </li>
 </ul>

3. Ключевое свойство в Vue

Официально рекомендуется использоватьv-for, добавить предыдущий к соответствующему элементу или компоненту:keyАтрибуты.
Зачем нужен этот ключевой атрибут (понять)?
- На самом деле это связано с виртуальным DOM Vue.DiffАлгоритмы имеют значение.
Когда слой имеет много одинаковых узлов, то есть узлов списка, мы хотим вставить новый узел
- Мы надеемся, что сможем добавить букву F между B и C, как алгоритм Diff работает по умолчанию.
- То есть обновление C до F, D до C, E до D и, наконец, вставка E — это неэффективно?
Поэтому нам нужно использовать ключ для уникальной идентификации каждого узла.
- Алгоритм Diff может правильно идентифицировать этот узел
- Найдите правильную область местоположения, чтобы вставить новый узел
Роль ключа в основном заключается в эффективном обновлении виртуального DOM.

использоватьv-forПри обновлении отображаемого списка элементов стратегия повторного использования на месте используется по умолчанию; если данные списка изменены, он будет судить, изменено ли значение в соответствии со значением ключа, если изменено, затем повторно визуализировать этот элемент, в противном случае перед повторным использованием Элементы ; мы часто используемindex(то есть нижний индекс массива) какkey, но на самом деле это метод, который не рекомендуется;

4. Реактивные методы массива

Поскольку Vue отзывчив, при изменении данных Vue автоматически обнаружит изменение данных, и представление будет соответственно обновлено.
Vue включает в себя набор методов для наблюдения за компиляцией массива, так что изменение массива также вызовет обновление представления.
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

5.Vue.set изменяет адаптивные данные

Vue.set(vm.items, indexOftem, newValue)
vm.$set(vm.items ,indexOften,newValue)
- Параметр 1: массив/объект для изменения
- Параметр 2: индекс, который нужно установить/добавить имя свойства
- Параметр 3: заданное значение

6. v-если и v-для

когда они находятся в одном узле,v-forсоотношение приоритетовv-ifвыше, значит

v-ifбудет повторяться отдельно для каждогоv-forв цикле.

избегатьv-ifа такжеv-forиспользовать вместе

причина
- Если используется суждение if, весь список будет проходиться каждый раз, когда он отображается в Vue, независимо от того, изменилось ли условие суждения.
Преимущества использования вычисляемых свойств
- 1. Отфильтрованный список будет пересчитываться только при изменении массива пользователей, и фильтрация будет более эффективной.
- 2. После использования v-for="user in activeusers" мы рендерим
- 3. При обходе только активных пользователей рендеринг более эффективен.
- 4. Отделить логику уровня рендеринга, а ремонтопригодность (изменение и расширение логики) сильнее.
- Объясните подробно

v-модель привязки формы

1. Основные понятия

Используется во Вьюv-model指令Для достижения двусторонней привязки элементов формы и данных
- Данные и шаблоны взаимодействуют друг с другом, при изменении одного сразу обновляется другой
Выводить:
- В предыдущем случае мы привязали атрибут имени в объекте данных к тегу через v-bind. При изменении значения имени в данных содержимое тега будет обновляться автоматически.
- Теперь это можно сделать: изменить содержимое тега , требуя, чтобы значение атрибута NAME в Data автоматически обновлялось. Тем самым достигается двусторонняя привязка данных. Что мне делать? Это можно использоватьv-modelэто свойство.

разница:
- v-bind: Может быть реализована только односторонняя привязка данных, автоматическая привязка от M к v.
- v-model: Толькоv-modelДля достижения двусторонней привязки данных. Уведомление,v-model后Нет необходимости в двоеточии
Уведомление
- v-modelМожет использоваться только в элементах формы или для пользовательских компонентов. Общие элементы формы включают в себя:input(radio,text,address,email...) ,select, checkbox, textarea.

2. Принцип v-модели

v-model на самом деле является синтаксическим сахаром, и суть его состоит в двух операциях
- v-bind связывает свойство значения
- Директива v-on связывает входное событие текущего элемента
То есть следующий код: эквивалентен следующему коду:

<input type="text" v-model="message">
<!-- 等同于下面的代码 -->
<input type="text" :value="message" @input="message = $event.target.value">

3. Форма привязки v-модели

Используется во Вьюv-modelДирективы для реализации двусторонней привязки элементов формы и данных
Анализ случая:
- Когда мы вводим что-то во фрейм данных
- Поскольку v-модель во входных данных привязана к сообщению, входное содержимое будет передано в сообщение в режиме реального времени, и сообщение изменится.
- Когда сообщение изменяется, поскольку мы используем приведенный выше синтаксис Mustanche для вставки значения сообщения в DOM, DOM будет меняться соответствующим образом.
- Таким образом, двусторонняя привязка достигается с помощью v-модели.
Конечно, мы можем использовать v-модель для элементов textarea.

1. Форма привязки v-модели

2.v-модель привязки textarea

4. Привязка v-модели к другим типам в форме

Другие виды в форме, переплетv-model

тип формы	Один выбор/множественный выбор	Связанное значение
`v-model: radio`	Когда есть несколько переключателей	граница`值是value`
`v-model: checkbox`	один флажок	v-модель`布尔值`
	несколько флажков	выбрать несколько соответствующих`data`собственность - это`数组`
`v-model: select`	радио	`v-model`привязан к`值`
	Большой выбор	`v-model`привязан к`数组`

v-model: radio

v-model: checkbox

v-model: select

5. Привязка значений

давать динамичноvalueпросто назначь
- мы писали ранееvalueВсе значения в прямо указаны во входных данных определения.
- Но на самом деле в разработке значение этих входных данных может быть получено с сервера, а затем определено
- Так что мы можем пройтиv-bind:valueДинамически привязать значение к значению

привязка значения

5. Модификаторы для v-модели

модификатор	эффект
`.lazy`	когда форма`失去焦点`или нажмите`回车`Время,`data`Данные будут обновлены
`.number`	Вход преобразуется в`number`тип данных
`.trim`	Фильтровать обе стороны контента`空格`

Общие черты Vue

1. Пользовательские инструкции

Зачем нужны пользовательские директивы

Встроенные директивы не соответствуют требованиям

Vue.directive регистрирует глобальные директивы

Пользовательский синтаксис команды (получить фокус)

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()// 获取元素的焦点
  }
})
// 使用自定义指令
<input type="text" v-focus>

пользовательская директива с параметрами

Vue.directive('color', {
      // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      // el 为当前自定义指令的DOM元素  
      // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
// 使用带参数自定义指令
<input type="text" v-color='msg'>

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

Локальные директивы, которые должны быть определены вdirectivesИспользование опции такое же, как глобальное использование
Локальные директивы могут использоваться только в текущем компоненте
Когда глобальная инструкция и локальная инструкция имеют одно и то же имя, локальная инструкция имеет преимущественную силу.

directives: {
    focus: {
        inserted: function(el) {
            el.focus();
        }
    }
}

2. Часы слушателя

Сценарии применения прослушивателя

Выполняется при изменении данных异步или开销较大的操作

image-20200511180435528

Примечание. Свойство в watch должно быть данными, которые уже существуют в data.

// 当data中的: firstName属性或lastNames属性改变时, 会自动触发对应的watch
watch: {
     firstName(val) { // val: 表示变化后的值
       this.fullName = val + ' ' + this.lastName;
     },
     lastName(val) {
       this.fullName = this.firstName + ' ' + val;
     }
  }

3. Фильтры

Концепция: Vue.js позволяет нам настраивать фильтры, которые можно использовать как некоторые общие文本格式化/处理.

Фильтры можно использовать в двух местах: выражения интерполяции усов, выражения v-bind.

Фильтры следует добавлять в конце выражений JavaScript, обозначенных символом «вертикальная черта».

фильтр не меняет реальныйdata, но просто измените отрендеренный результат и верните отфильтрованную версию

image-20200511204822969

Глобальная регистрация является фильтром, без s. Локальный фильтр — это фильтры, у которых есть s

Поддержка каскадной операции (снова фильтровать ранее отфильтрованные данные)

настраиваемый глобальный фильтр

Мы можем использовать глобальный методVue.filter()Настройте глобальный фильтр. В этом случае каждый экземпляр объекта Vue (每一个VM实例), чтобы получить этот фильтр. он получает两个参数: 过滤器的名称,过滤器函数.

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :class="msg | upper"></div>
<!-- 带参数过滤 -->
<div>{{date | format('yyyy-MM-dd')}}</div>
<script>
  // 1.全局过滤器
    Vue.filter('upper', (val) => {
        // val就是要处理的数据
      return val.charAt(0).toUpperCase() + val.slice(1);
    })
    // 2.处理带参数过滤器
    Vue.filter('format', (date, arg) => {
      // arg: 传递的参数
      if (arg === 'yyyy-MM-dd') {
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      }
    })
</script>

настраиваемый частный фильтр

Частный фильтр: фильтр, определенный внутри объекта vue, называется частным фильтром.
Этот фильтр только当前vue对象изel指定的监管区域оно работает.

<!-- 管道符前面的price: 要把price这段文本进行过滤 -->
<!-- 管道符后面的showPrice: 是通过showPrice这个过滤器来进行操作 -->
<td>{{price | showPrice}}</td>
<script>
const app = new Vue({
  filters: {
    showPrice(price) {
      return '￥' + price.toFixed(2);
    }
  }
})
</script>

4. Жизненный цикл

Процесс вещей от рождения до смерти
Процесс экземпляра Vue от создания до уничтожения, эти процессы будут сопровождаться самовызовом некоторых функций. Мы называем эти функции функциями-ловушками
основной этап
Mount (инициализировать связанные свойства)
- beforeCreate
- created
- beforeMount
- mounted
обновление (операции изменения элементов или компонентов)
- beforeUpdate
- updated
Уничтожить (уничтожить связанные свойства)
- beforeDestroy
- destroyed

функция ловушки	Обработать
beforeCreate	После инициализации экземпляра наблюдение за данными и настройка событий вызываются до того, как данные и методы, а также структура DOM страницы не будут инициализированы, и ничего нельзя будет сделать.
created	Вызывается сразу после создания экземпляра, данные и методы доступны, но страница не отрисована.
beforeMount	Вызывается перед началом монтирования.В данный момент реальных данных на странице нет.Это просто страница-шаблон.
mouted	el заменяется вновь созданным vm.$el, а хук вызывается после того, как он смонтирован на экземпляре. Данные были фактически отображены на странице.В этой функции-хуке мы можем использовать некоторые сторонние плагины.
beforeUpdate	Вызывается при обновлении данных перед исправлением виртуального DOM. Данные на странице все еще старые
update	Этот хук вызывается после повторного рендеринга виртуального DOM и исправления из-за изменений данных. Данные на странице заменены на последние
beforeDestroy	Вызывается перед уничтожением экземпляра
destroyed	На примере уничтожения звонков