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

внешний интерфейс Vue.js CSS

инструкция

  • Объяснение: Директивыv-Особые свойства префиксов
  • Эффект: когда значение выражения, связанного с их воздействием, действует на отзывчивом доме

Общие команды

  • v-text
  • v-html
  • v-bind

v-text

  • Explanation: Обновите textContent элемента
<h1 v-text="msg"></h1>

v-html

  • Объяснение: обновить innerHTML элемента
<h1 v-html="msg"></h1>

v-bind

  • Функция: когда значение выражения изменяется, соответствующий эффект будет применен к DOM в ответ.
  • грамматика:v-bind:title="msg"
  • Сокращение::title="msg" 
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      // el 用来指定vue挂载到页面中的元素，值是：选择器
      // 理解：用来指定vue管理的HTML区域
      el: '#app',
      // 数据对象，用来给视图中提供数据的
      data: {
        url: 'http://www.baidu.com'
      }
    })
  </script>

v-on

  • Роль: связывать события
  • грамматика:v-on:click="say" or v-on:click="say('参数', $event)"
  • Сокращение:@click="say"
  • Описание: Событие связано сmethodsполучено в
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- 方法传参 -->
<a @click="doSomething（“123”）"></a>

 <script>
    // 2 创建 Vue 的实例对象
    var vm = new Vue({
      el: '#app',
      // methods属性用来给vue实例提供方法（事件）
      methods: {
        doSomething: function(str) {
          //接受参数，并输出
          console.log(str);
        }
      }
    })
  </script>

модификатор события

  • .stopЧтобы остановить всплытие, вызовите event.stopPropagation().
  • .preventЧтобы предотвратить событие по умолчанию, вызовите event.preventDefault().
  • .captureИспользуйте события при добавлении прослушивателей событий捕获модель
  • .selfОбратный вызов запускается только тогда, когда событие запускается в самом элементе (т.е. не в дочернем элементе).
  • .onceСобытие срабатывает только один раз

v-model

  • Роль: создание двусторонней привязки данных к элементам формы.
  • Описание: Прослушивание событий пользовательского ввода для обновления данных.
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-for

  • Роль: отображать элемент или блок шаблона несколько раз на основе исходных данных.
<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

ключевое свойство

  • Рекомендуемое использованиеv-forпредоставляется, когдаkeyсвойства для повышения производительности.
  • Описание: Используя ключ, VUE изменит порядок элементов на основе изменения ключа и удалит элементы, которые не существуют в ключе.
<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

Обработка стилей - класс и стиль

  • Описание: Оба они являются атрибутами HTML-элементов, используйтеv-bind, вам нужно только вычислить результат строки с помощью выражения
  • Тип выражения: Строка, Массив, Объект
  • грамматика:
<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>


--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-если и v-показать

  • условный рендеринг
  • v-if: Уничтожить или перестроить элемент на основе истинного или ложного условия значения выражения.
  • v-show: переключение свойства CSS отображения элемента на основе истинных и ложных значений выражения.

Улучшить пользовательский опыт: v-cloak

  • Эта инструкция сохраняется в элементе до тех пор, пока связанный экземпляр не завершит компиляцию. Эта инструкция может скрывать несимвольный тег Mustache до тех пор, пока экземпляр не будет готов, пока экземпляр не будет готов, пока экземпляр не будет готов.
  • Запретить обновление страницы, появление {{ message }} и других форматов данных при низкой скорости сети
<div v-cloak>
  {{ message }}
</div>

Улучшенная производительность: v-pre

  • Описание: Пропускает процесс компиляции этого элемента и его дочерних элементов. Может использоваться для отображения необработанных тегов Mustache. Пропуск большого количества узлов без инструкций ускоряет компиляцию.
<span v-pre>{{ this will not be compiled }}</span>

Улучшенная производительность: v-once

  • Описание: Элементы и компоненты визуализируются только один раз. При последующем повторном рендеринге элемент/компонент и все его дочерние элементы будут рассматриваться как статическое содержимое и будут пропущены. Это можно использовать для оптимизации производительности обновления.
<span v-once>This will never change: {{msg}}</span>
Категории