Основные дополнения Vue.js

Vue.js

Синтаксис шаблона

интерполяция

1. Форма привязки данных Vue.js имеет форму синтаксиса «усы» (двойные фигурные скобки).Для HTML-кода вам необходимо использоватьv-htmlинструкция.

<p>Using v-html directive: <span v-html="rawHtml"></span></p>

2. Синтаксис усов не может использоваться на функциях HTML, поэтому вам нужно использоватьv-bindинструкция.

<div v-bind:id="dynamicId"></div>

инструкция

1. Некоторые команды могут получать «параметр», который представлен двоеточием после имени команды, напримерv-bind.

<a v-bind:href="url">...</a>

2. Начиная с версии 2.6.0, в качестве параметров команды можно использовать выражения Javascript, заключенные в квадратные скобки.

<a v-bind:[attributeName]='url'>...</a>

Здесь attributeName будет динамически оцениваться как выражение JavaScript, а оцененное значение будет использоваться в качестве окончательного параметра. Например, если ваш экземпляр Vue имеет атрибут данных attributeName со значением «href», то эта привязка будет эквивалентна v-bind:href.

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

<a v-on:[eventName]="doSomething"> ... </a>

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

3. Модификатор - период полуширины.Специальный суффикс, указывающий, что директива должна быть связана особым образом. Такие как.preventмодификатор сообщаетv-onДиректива вызывается для инициированного событияevent.prevent

<form v-on:submit.prevent="onSubmit">...</form>

4. Аббревиатура инструкции

директива v-bind

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

команда v-on

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

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

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

Вычисляемые методы получения свойств не имеют побочных эффектов.

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

Мы можем определить одну и ту же функцию как метод вместо вычисляемого свойства, и конечный результат будет одинаковым в обоих случаях. разница в томВычисляемые свойства кэшируются на основе их зависимостей.当相关依赖不变的情况下，计算属性是直接获取缓存的结果，不需要执行函数，而方法的写法每当重新渲染时，都会被再次执行。

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

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

Так когда же лучше выбирать недвижимость для прослушивания?

Использование свойства listen полезно, когда обработка в ответ на изменения данных является асинхронной или дорогостоящей операцией.

Привязка класса и стиля

v-bindиспользуется дляclassа такжеstyleКогда Vue.js сделал специальные улучшения, тип результата выражения может быть объектом или массивом в дополнение к строке.

Привязать класс HTML

1,v-bind：classИнструкции могут сосуществовать с обычным атрибутом класса. Мы также можем привязать вычисляемое свойство целевого возврата, что является очень полезной моделью.

2. Мы можем передать массивv-bind：class, чтобы применить список классов.

3. При использовании атрибута класса в пользовательском компоненте эти классы будут добавлены к корневому элементу компонента. Классы, которые уже существуют в этом элементе, не будут перезаписаны.

Связывание встроенных стилей

1,v-bind:styleСинтаксис объекта интуитивно понятен — он очень похож на CSS, но на самом деле это объект JavaScript. Имена свойств CSS могут быть названы в CamelCase или разделены тире (кебаб-регистр, не забудьте заключить их в одинарные кавычки).

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

3. Синтаксис объекта часто используется в сочетании с вычисляемыми свойствами, которые возвращают объекты.

4. Когда v-bind:style использует свойство CSS, для которого требуется префикс движка браузера, например, transform, Vue.js автоматически обнаружит и добавит соответствующий префикс.

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

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

1,v-ifДирективы используются для условного рендеринга части контента. Это содержимое будет отображаться только в том случае, если выражение директивы возвращает истинное значение. Также можно добавить «блок else» с помощью v-else.v-elseэлемент должен следовать сразу за бэндомv-ifилиv-else-ifпосле элемента, иначе он не будет распознан.

2. В<template>использовать на элементахv-ifУсловная группировка рендеринга

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

4, сv-showэлементы всегда визуализируются и остаются в DOM.v-showПросто переключите свойство CSS элементаdisplay.

v-if & v-show

v-ifявляется «настоящим» условным рендерингом, поскольку он гарантирует, что прослушиватели событий и дочерние компоненты внутри условного блока будут правильно уничтожены и перестроены во время перехода.

v-ifТакже лениво: если условие ложно при начальном рендеринге, ничего не делать - условный блок не начнет рендеринг, пока условие не станет истинным в первый раз.

Напротив,v-showГораздо проще — элемент всегда будет отображаться независимо от начальных условий и просто переключаться на основе CSS.

Вообще говоря,v-ifимеет более высокие коммутационные накладные расходы, в то время какv-showИмеет более высокие начальные накладные расходы на рендеринг. Поэтому, если вам нужно переключаться очень часто, используйтеv-showлучше; используйте, если условия редко меняются во время выполненияv-ifлучше.

5. Когдаv-ifа такжеv-forПри совместном использованииv-forимеет соотношениеv-ifболее высокий приоритет.

Рендеринг списка

1,v-forДирективы отображаются в соответствии с массивом списков опций.v-forкоманда должна использоватьitem in itemsспециальный синтаксис формы,itemsявляется исходным массивом данных иitemявляется псевдонимом для итерации элемента массива.

2, можно использоватьofзаменятьinв качестве разделителя, потому что это самый близкий синтаксис к итераторам JavaScript,v-for="item of items"

3. Можно использоватьv-forдля перебора свойств объекта.v-for="(value, key) in object"

При обходе объекта нажмитеObject.keys()Результат обхода , но нет гарантии, что его результаты согласуются с различными движками JavaScript.

4. Чтобы дать Vue подсказку, чтобы он мог отслеживать идентификатор каждого узла и, таким образом, повторно использовать и переупорядочивать существующие элементы, вам необходимо предоставить каждому элементу уникальныйkeyАтрибуты. идеальныйkeyЗначение уникально для каждого элементаid.

Не используйте объект или массив не примитивного значения типа, такого как V-для ключа. Вместо этого, со значением строки или номера.

5. Из-за ограничений JavaScript Vue не может обнаружить следующие изменения:

  • При установке элемента непосредственно с помощью индекса обновление состояния не запускается. Это может быть достигнуто за счет:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
// 使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名 
vm.$set(vm.items, indexOfItem, newValue)
  • При непосредственном изменении длины массива обновление состояния не запускается. Это может быть достигнуто за счет:
vm.items.splice(newLength)

6. Vue не может обнаружить добавление или удаление свойств объекта

Vue не может динамически добавлять реактивные свойства корневого уровня к уже созданным экземплярам. Однако можно добавить реактивные свойства к вложенным объектам, используя метод Vue.set(object, key, value)

7. Вам необходимо присвоить несколько новых свойств существующим объектам, например, с помощью Object.assign() или _.extend(). В этом случае следует создать новый объект со свойствами обоих объектов.

// ❌
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

// ✅
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

8. Отображать отфильтрованные/отсортированные результаты, чего можно добиться путем создания вычисляемых свойств, которые возвращают отфильтрованные или отсортированные массивы. В случаях, когда вычисляемые свойства неприменимы (например, во вложенных циклах v-for), для их обработки можно использовать метод method.

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

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

10. В пользовательском компоненте вы можете использовать его как любой обычный элементv-for.

В версии 2.2.0+ используйте его в компонентеv-forчас,keyЭто обязательно сейчас.

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

// 一个完整的todolist demo
<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

обработка событий

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

  • .stop
  • .prevent
  • .capture
  • .self
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

При использовании модификаторов важен порядок, соответствующий код будет сгенерирован в том же порядке. Таким образом, использование v-on:click.prevent.self предотвратит все клики, а v-on:click.self.prevent предотвратит клики только по самому элементу.

  • .once(2.1.4 new)
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

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

  • .passive(2.3.0 new)
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>  // 2.3.0 new

Модификатор .passive может особенно улучшить мобильную производительность.

Не используйте .passive с .prevent, потому что .prevent будет проигнорирован и браузер может показать вам предупреждение. Помните, что .passive сообщает браузеру, что вы не хотите блокировать поведение событий по умолчанию.

ключевой модификатор

При прослушивании событий клавиатуры нам часто нужно проверять подробные нажатия клавиш. Vue позволяет добавлять модификаторы клавиш для v-on при прослушивании событий клавиатуры.

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

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

  • .enter
  • .tab
  • .delete (захватывает клавиши «удалить» и «возврат»)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

Системные клавиши-модификаторы (новинка 2.1.0)

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

  • .ctrl
  • .alt
  • .shift
  • .meta

Обратите внимание, что клавиши-модификаторы отличаются от обычных клавиш.При использовании с событием keyup клавиша-модификатор должна быть нажата, когда событие срабатывает. Другими словами, keyup.ctrl может быть запущен только в том случае, если другие клавиши будут отпущены, пока Ctrl удерживается нажатым. И просто отпускание ctrl не вызовет событие. Если вам нужно такое поведение, вместо этого используйте keyCode: keyup.17 для ctrl.

.exact модификатор (2.5.0 новый)

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

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

Модификаторы кнопок мыши (новинка 2.2.0)

  • .left
  • .right
  • .middle

Эти модификаторы запрещают обработчикам реагировать только на определенные кнопки мыши.

привязка ввода формы

Вы можете использовать директиву v-model в форме<input>,<textarea>а также<select>Создайте двустороннюю привязку данных к элементу. Он автоматически выбирает правильный метод для обновления элемента в зависимости от типа элемента управления. Хотя это и несколько волшебно, v-модель по сути является синтаксическим сахаром. Он отвечает за прослушивание событий пользовательского ввода для обновления данных и выполняет некоторую специальную обработку для некоторых экстремальных сценариев.

v-model игнорирует начальное значение атрибутов value, checked и selected всех элементов формы и всегда использует данные экземпляра Vue в качестве источника данных. Вы должны объявить начальное значение в параметре данных компонента через JavaScript.

v-model внутренне использует разные свойства для разных элементов ввода и выдает разные события:

  • элементы text и textarea используют атрибут value и событие ввода;
  • флажок и радио используют проверенный атрибут и событие изменения;
  • Поле выбора имеет значение как реквизит и изменение как событие.

Для языков, которым требуется метод ввода (например, китайский, японский, корейский и т. д.), вы обнаружите, что v-model не будет обновляться в процессе составления метода ввода. Если вы хотите обработать и этот процесс, используйте событие ввода.

модификатор

.lazy

По умолчанию v-model синхронизирует значение поля ввода с данными после запуска каждого события ввода (за исключением случаев, когда приведенный выше метод ввода объединяет текст). Вы можете переключиться на использование события change для синхронизации, добавив модификатор lazy:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

Если вы хотите автоматически преобразовывать введенное пользователем значение в числовой тип, вы можете добавить модификатор числа в v-model:

<input v-model.number="age" type="number">

Это часто полезно, потому что значение элемента ввода HTML всегда будет возвращать строку, даже если type="number" . Если значение не может быть проанализировано функцией parseFloat(), будет возвращено исходное значение.

.trim

Если вы хотите автоматически фильтровать начальные и конечные пробельные символы, введенные пользователем, вы можете добавить модификатор trim в v-model:

<input v-model.trim="msg">

Основы компонентов

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

1. данные должны быть функцией

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

2. Существует два типа регистрации компонентов:Глобальная регистрацияа такжеЧастичная регистрация. Наши компоненты только что зарегистрированы глобально через Vue.component.

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

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

3. Передайте данные дочерним компонентам через Prop

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

4. Каждый компонент должен иметь только один корневой элемент

5. Родительский компонент может прослушивать любое событие экземпляра дочернего компонента через v-on, подобно обработке собственных событий DOM, а дочерний компонент может инициировать событие, вызвав встроенный метод $emit и передав имя события:

<parentElement 
  ...
  v-on:special-event="todo something..."></parentElement>

<childElement v-on:click="$emit('special-event')">
  Click to trigger special-enent
</childElement>

слот

Пользовательский<slot>Элементы могут реализовывать распределение контента через слоты.

Соображения при разборе DOM

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

<table>
  <tr is="blog-post-row"></tr>
</table>

Ограничения не действуют в следующих случаях:

  • Строковый шаблон (например, шаблон: '...')
  • Компонент с одним файлом (.vue)
  • <script type="text/x-template">

резюме

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

Категории