Управление деталями Vue

Vue.js

1. Динамические имена свойств: Вы можете использовать выражения для установки имен динамических свойств или имен методов:

<!-- 属性name -->
<a :[name]="url"> ... </a>
<!-- 计算属性sss和s -->
<img :[sss]="/img/test.png"/>  
<!-- 方法change1和change2 -->
<img :[change1()]="change2()"/>

data: {
    name: 'href',
    sss: 'src'
}

Примечание. Чтобы избежать пробелов, кавычек и т. д. и требовать строчных букв, вы можете использовать вычислительные свойства для работы со сложными выражениями, вам нужно использовать []

2. computed/methods/watch

  • computedбыть пригодным для использованияget/set 
   computed: {
       top() {
           return 'top'
       },
       name: {
           get () {
               return this.name
           },
           set (val) {
               this.name = val
           }
       }
   }

  • computedЕго можно кешировать, но нельзя передавать параметры, он будет меняться в соответствии с изменением атрибута в данных, то есть он будет меняться в соответствии с отзывчивой зависимостью, иDateНе реактивная зависимость, т.е. не изменится;methodТогда расчет будет выполняться каждый раз, но параметры можно будет передавать.

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

3. привязка стиля

  • прямой объект или переменный объект
  • вычисляемое свойство
  • прямой стиль или объект стиля
<!-- 属性名可加引号也可不加，属性小驼峰 -->
<div :style="{ 'color': 'red', fontSize: fontSize + 'px' }">样式3</div>
  • Массив комбинированных тринокулярных/массивных комбинированных объектов
data: {
  isActive: true,
  activeClass: 'active'
}
<!-- 使用数组时变量和字符串需要通过引号来区分 -->
<div :class="[isActive ? activeClass : '', 'errorClass']"></div>
<!-- 使用对象时类名不加引号可表示变量也可表示字符串 -->
<div :class="[{ active: isActive }, 'errorClass']"></div>

4. v-if условный рендеринг

  • быть пригодным для использованияtemplateэлементы упаковки,templateбудет рассматриваться как невидимый элемент обертки
<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>
  • решение с несколькими условиями
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

5. key

  • Добавить кkeyне допуститьvueПовторно используйте элементы, которые вы не хотите использовать повторно, как показано ниже.inputЕсли не добавитьkey,ноvueбудет повторно использованkey,а потомinputизvalueЗначение сохраняется после переключения, т.к.vueтолько что заменилplaceholder 
<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

6. v-if и v-show

  • v-ifКомпоненты разрушения и восстановления, если начальные условияfalse, ничего не делать, пока это не станет истинным, поэтому затраты на переключение высоки, подходят, когда условия работы редко меняются
  • v-showдаdisplay:noneа такжеblockмеждуCSSПереключение, основанное на рендеринге, будет рендериться независимо от начальных условий, поэтому первоначальные накладные расходы на рендеринг высоки, и это подходит, когда частота переключения высока.

7. v-for

  • быть пригодным для использованияinилиof
  • Также возможно перебирать объекты:v-for="(value, key, index) in obj"
  • согласно сtemplateВизуализация нескольких комбинированных элементов:
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

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

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

9. Изменить адаптивные данные

  • Vue.set(object, key, value)
  • this.$set(object, key, value)
  • this.items.splice(index, 1, newValue)
  • Массовое добавление объектов:
// 不要直接Object.assign(this.items, {age: 18}
this.items = Object.assign({}, this.items, {
  age: 18,
  favoriteColor: 'Vue Green'
})

10. Модификаторы событий

  • .passive: событие прокрутки по умолчанию запускается немедленно, то есть сообщает браузеру, что вы не хотите предотвращать срабатывание события по умолчанию, что может повысить производительность мобильного терминала.
<div @scroll.passive="onScroll">...</div>
  • .capture: Использовать режим захвата событий при добавлении прослушивателей событий, то есть события, инициированные самим элементом, сначала обрабатываются здесь, а затем передаются внутренним элементам для обработки
  • .self: только тогда, когдаevent.targetОбработчик срабатывает, когда сам текущий элемент, то есть событие срабатывает не от внутреннего элемента
  • .once: событие щелчка сработает только один раз.
  • Модификаторы клавиатуры:<input @keyup.enter="submit">

11. v-model

  • поле выбора
<!-- 单选框时，picked为字符串 "a"，不是布尔值 -->
<input type="radio" value="a" v-model="picked">

<!-- 多选框时，toggle默认值设为字符串或布尔值时得到布尔值，设为数组时得到的是value值-->
<input type="checkbox" value="b" v-model="toggle">

<!-- 当选中第一个选项时，selected为字符串value的值 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>
  • модификатор.lazy:существуетchangeиногда вместоinputобновлять время от времени<input v-model.lazy="msg" >

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

  • модификатор.number: преобразование входного значения в числовое значение.
  • модификатор.trim: фильтрация завершающих пробельных символов

12. Prop

  • использоватьv-bind="obj"рассматривает каждое свойство объекта как отдельноеpropОн передается, поэтому его нужно получать один за другим при приеме.
<test v-bind="obj"></test>
  • propsХотя это односторонний поток данных, для ссылочных типов дочерний компонент все же может изменять состояние родительского компонента.
  • propsбудет проверен перед созданием экземпляра компонента, поэтому свойства экземпляра будутdefaultилиvalidatorнедоступен в .

13. Пользовательские события

  • Пользовательские события должны обращать внимание на то, чтобы имя события было в нижнем регистре или разделялось, т.к.$emit('BaseEvent')Хотя название события не меняется, вhtmlИмя события будет преобразовано в нижний регистр и не будет отслеживаться.

14. slot

  • именованный слот
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
<!-- 默认插槽也可不用加上template和v-slot -->
  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>
  • слот с прицелом
<!-- current-user组件 -->
<span>
  <slot :user="user">
    {{ user.lastName }}
  </slot>
</span>

<!-- 父级组件通过自定义名称访问子级作用域 -->
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

<!-- 支持缩写和解构 -->
<current-user>
  <template #default="{ user = { firstName: Gust } }">
    {{ user.firstName }}
  </template>
</current-user>

15. Коммуникация компонентов

  • vuex/eventBus
  • prop/$emit
  • $children/$parent
  • provide/inject
  • $refs
// 父或祖先级
provide: function () {
  return {
    getMap: this.getMap
  }
}

// 后代级
inject: ['getMap']

16. scope

  • scopedproperties автоматически добавит уникальное свойство (например,data-v-21e5b78) указывает область действия CSS внутри компонента при компиляции.list-container:hoverбудет скомпилирован во что-то вроде.list-container[data-v-21e5b78]:hover

17. Маршрутизация

  • различать:this.$routerотносится к маршрутизатору,this.$routeОтносится к текущему маршруту

  • подстановочный знак: поймать все маршруты или404 Not foundмаршрутизация

  // 含通配符的路由都要放在最后，因为优先级由定义顺序决定
{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}
  • При использовании подстановочного знака$route.paramsавтоматически добавит файл с именемpathMatchпараметр. это содержитURLЧасти, соответствующие подстановочным знакам:
// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

  • нажмите<router-link :to="...">эквивалентно вызовуrouter.push(...)метод, потому что<router-link>будет вызывать этот метод внутри, а затем вhistoryдобавить новую запись в стек

  • использовалpush, если предусмотреноpathнеполный, тоparamsБудет проигнорирован, необходимо обеспечить маршрутизациюnameили рукописный в комплекте с параметрамиpath:

const userId = '123'
router.push({ name: 'user', params: { userId }})  // -> /user/123
router.push({ path: `/user/${userId}` })          // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

  • router.push/router.replace/router.goподражатьwindow.history.pushState/window.history.replaceState/window.history.go

  • Именованные представления:router-viewимя может быть установлено, еслиrouter-viewЕсли имя не задано, то по умолчанию используется значение по умолчанию.

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      } 
    }
  ]
})
  • использование маршрутаprops: параметры маршрута могут быть установлены как свойства компонента.
const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
// 通过布尔值设置
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

// 通过函数设置query 
// URL /search?q=vue 会将 {name: 'vue'} 作为属性传递给 SearchUser 组件
const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ name: route.query.q }) }
  ]
})
  • beforeRouteEnter: быть пригодным для использованияbeforeRouteEnterЧтобы получить данные интерфейса заранее, вам необходимо получить доступ к экземплярам после NEXT:
beforeRouteEnter(to, from, next) {
  axios('/text.json').then(res => {
    next(vm => {
      vm.datas = res
    })
  })
}
  • Когда маршрут задан с параметрами, если вы перейдете на страницу, а затем вернетесь через клавишу возврата, маршрут сохранит параметры.pushЕсли переход возвращается, параметр не будет сохранен, на что нужно обратить внимание, когда третья сторона вызывает модуль для передачи параметра.

18. loader

  • Vue Loader компилирует один файлtemplateblock, преобразует все встречающиеся ресурсы URL в запросы модуля webpack:
// <img src="../image.png">将会被编译成为：
createElement('img', {
  attrs: {
    src: require('../image.png') // 现在这是一个模块的请求了
  }
})
  • Правила преобразования URL ресурса
  1. Если это абсолютный путь, например./images/foo.png), останется как есть.
  2. Если путь начинается с.Вначале будут рассматриваться как относительные зависимости модулей и разрешаться в соответствии со структурой каталогов в вашей локальной файловой системе.
  3. Если путь начинается с~В начале следующие части будут рассматриваться как зависимости модуля.
  4. Если путь начинается с@Вначале это также рассматривается как зависимость модуля.

Последующие действия будут продолжать обновляться, добро пожаловать на внимание!

Категории