Quelques points de connaissances importants dans Vue

Cet article partage principalement avec vous quelques points de connaissances importants sur Vue, en espérant aider tout le monde.

N'utilisez pas de fonctions fléchées sur les propriétés d'option ou les rappels

Par exemple,

• créé : () => .a)

• vm.$watch('a', newValue => this.myMethod())
  Parce que la fonction flèche est liée au contexte parent Ensemble, this ne sera pas une instance de Vue comme vous vous y attendiez, conduisant souvent à des erreurs comme Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function

Voir : ici

v-html

Les doubles accolades interpréteront les données comme du texte normal plutôt que du code HTML. Afin de générer du vrai HTML, vous devez utiliser la directive v-html :

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

Voir ici pour plus de détails :

Cache d'attributs calculés vs méthode

Nous pouvons définir la même fonction comme une méthode au lieu d'une propriété calculée. Le résultat final est en effet exactement le même dans les deux sens. Cependant, la différence est que les propriétés calculées sont mises en cache en fonction de leurs dépendances. Une propriété calculée n'est réévaluée que lorsque ses dépendances associées changent. Cela signifie que tant que le message n'a pas changé, plusieurs accès à la propriété calculée reverseMessage renverront immédiatement le résultat calculé précédent sans avoir à réexécuter la fonction.
Qu'est-ce que cela signifie que les propriétés calculées sont mises en cache en fonction de leurs dépendances ?

computed: {  now: function () {    return Date.now()
  }
}

Bien que la valeur de Date.now() continue de changer, ce n'est pas watch car ce n'est pas une dépendance réactive.

Pour plus de détails, voir : ici

Les styles CSS ajoutent automatiquement des préfixes

Lorsque v-bind:style utilise des propriétés CSS qui nécessitent l'ajout de préfixes de moteur de navigateur, telles que transform, Vue .js détectera et ajoutera automatiquement le préfixe correspondant.

Pour plus de détails, voir : ici

Utiliser le regroupement de rendu conditionnel v-if sur l'élément <template>

Parce que v-if est une directive, elle doit être ajoutée à a sur les éléments. Mais que se passe-t-il si vous souhaitez changer plusieurs éléments ? À ce stade, vous pouvez traiter un élément comme un élément d'habillage invisible et utiliser v-if dessus. Le résultat final du rendu ne contiendra pas d'éléments <template>.

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

Voir ici

v-if et v-show et v-for

• v- si c'est l'opération d'ajout et de suppression d'éléments de page

• v-show est l'opération d'affichage et de masquage d'éléments de page

• lorsque v- Lorsqu'il est utilisé ensemble avec if et v-for, v-for a une priorité plus élevée que v-if.

Pour plus de détails, voir : ici

Remarques sur la détection des changements de matrice

Vue ne peut pas détecter une matrice dont le mode a changé, la mise à jour de la vue sera donc ne pas être déclenché

• Lorsque vous définissez un élément directement à l'aide de l'index, par exemple : vm.items[indexOfItem] = newValue

• Lorsque vous modifiez la longueur du tableau, par exemple : vm.items.length = newLength

Pour plus de détails, voir : ici

Notes de détection de changement d'objet

Vue ne peut pas détecter l'ajout ou la suppression de attributs d'objet

var vm = new Vue({
  data: {
    a: 1
  }
})// `vm.a` 现在是响应式的vm.b = 2// `vm.b` 不是响应式的

Mais nous pouvons ajouter des propriétés réactives aux objets imbriqués via la méthode Vue.set(object, key, value).
Il existe aussi cette méthode couramment utiliséeObject.assign() Lorsque nous voulons attribuer plusieurs nouveaux attributs à un objet, vous devez jouer comme ceci

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

<.>Pour plus de détails, voir : ici

Utilisez la méthode

dans v-formethods

<li v-for="n in even(numbers)">{{ n }}</li>

Pour plus de détails, voir : ici

Composants utilisant

v-for

Dans les composants personnalisés, vous pouvez utiliser

comme n'importe quel élément normal. v-for

<my-component v-for="item in items" :key="item.id"></my-component>

Pour plus de détails, voir : ici

Modificateurs d'événement (nouveau dans la version 2.1.4).once

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

peut également être utilisé sur des .oncecomposants personnalisés.

Pour plus de détails, voir : ici

Fonctionnalitésis

En raison de certaines limitations de certains éléments dom eux-mêmes,

, <ul>, <ol>, <table> Il existe des restrictions sur les éléments autorisés dans un tel élément. <select>

<div id="app">  <table>    <money></money>  </table></div>Vue.component('txt',{
   template: '<div>I like money!</div>'})new Vue({
  el:'#app'})

sera analysé dans le dom suivant

<div id="app">
  <div>I like money!</div>
  <table></table>
</div>

Si vous souhaitez l'analyser correctement, vous devez utiliser le

attribut . is

<div id="app">
  <table>
    <tr is="money"></tr>
  </table>
</div>

De cette façon, le dom est analysé correctement.

<div id="app">
  <table>
     <tbody>
        <div>I like money!</div>
     </tbody>
  </table>
</div>

具体见:这里

将对象的所有属性作为 prop 进行传递

如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：

todo: {
  text: 'Learn Vue',
  isComplete: false}

然后:

<todo-item v-bind="todo"></todo-item>

将等价于：

<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"></todo-item>

具体见： 这里

非 Prop 特性的替换与合并

• class 和 style这两个特性的值都会做合并 (merge) 操作

• 其他属性(如: type) 则会进行覆盖

具体见: 这里

Props的一般绑定和动态绑定

我们常用的一般是动态绑定:

// 父组件<child :my-message="parentMsg"></child>new Vue({  data () {    return {
       parentMsg: '来自父组件的数据'
    }
  }
})// 子组件Vue.component('child', {  // 在 JavaScript 中使用 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'})

显示:

<span>来自父组件的数据</span>

一般绑定:

// 父组件<!-- 在 HTML 中使用 kebab-case --><child my-message="hello!"></child>

子组件获得的是: 字符串 'hello!'

具体见:这里

.sync 修饰符(2.3.0+新增)

之前在 2.0 版本中移除后，在 2.3.0 中又加上了，只是调用的逻辑发生了变化，变成了一种语法糖。
如下代码:

<comp :foo.sync="bar"></comp>

会被扩展为：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

有点类似与 v-model

具体见:这里

自定义组件的 v-model(2.2.0 新增)

默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。这也是之前 v-model 默认绑定的元素 和 事件方法。

但是到 2.2.0 时候，我们可以通过 model 配置这个两个属性。

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',    event: 'change'
  },
  props: {
    checked: Boolean,    // 这样就允许拿 `value` 这个 prop 做其它事了
    value: String
  },  // ...})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代码等价于：

<my-checkbox  :checked="foo"
  @change="val => { foo = val }"
  value="some value"></my-checkbox>

具体见:这里

插槽内容分发

我们不总能遇见我们的组件中包含了哪些元素，这时候我们在开发组件的时候，需要让这部分内容自定义。
假定 my-component 组件有如下模板：

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

父组件模板：

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

渲染结果：

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

当然还有 具名插槽 、作用域插槽(2.1.0 新增)、slot-scope(2.5.0新增)

具体见:这里

动态组件

通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">  <!-- 组件在 vm.currentview 变化时改变！ --></component>

注意这里的 is 与 之前说的 v-bind:is 别混淆

具体见:这里

对低开销的静态组件使用 v-once

尽管在 Vue 中渲染 HTML 很快，不过当组件中包含大量静态内容时，可以考虑使用 v-once 将渲染结果缓存起来，就像这样：

Vue.component('terms-of-service', {
  template: '\    <div v-once>\      <h1>Terms of Service</h1>\      ...很多静态内容...\    </div>\  '})

具体见:这里

混合(mixins)的合并策略

周期钩子的合并策略

• 同名钩子函数将混合为一个数组，因此都将被调用

• 混合对象的钩子将在组件自身钩子 之前 调用

var mixin = {  created: function () {    console.log('混合对象的钩子被调用')
  }
}new Vue({
  mixins: [mixin],  created: function () {    console.log('组件钩子被调用')
  }
})// => "混合对象的钩子被调用"// => "组件钩子被调用"

methods, components 和 directives 的合并策略

• 两个对象键名冲突时，取组件对象的键值对

var mixin = {
  methods: {    foo: function () {      console.log('foo')
    },    conflicting: function () {      console.log('from mixin')
    }
  }
}var vm = new Vue({
  mixins: [mixin],
  methods: {    bar: function () {      console.log('bar')
    },    conflicting: function () {      console.log('from self')
    }
  }
})vm.foo() // => "foo"vm.bar() // => "bar"vm.conflicting() // => "from self"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!