Quelles sont les API couramment utilisées dans Vue ?

Les API de

vue incluent : 1. nextTick ; 2. mixin ; 3. « $forceUpdate » ; 4. set et delete ; 6. directive ; . "$données"; 10. "$props", etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

nextTick

---

Fonction : Ajoutez un rappel différé après la fin du prochain cycle de mise à jour du Dom. Après avoir modifié les données, vous pouvez obtenir le Dom mis à jour.
Utilisation :

Vue.nextTick( [callback, context] )
vm.$nextTick( [callback] )
// 用法2
// 作为一个 Promise 使用 (2.1.0 起新增)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

Description :

• callback : fonction de rappel différé
• contexte : objet optionnel

ps : nouveau depuis 2.1.0 : si aucun rappel n'est fourni et dans un environnement supportant Promise , une promesse est retournée. Veuillez noter que Vue n'est pas fourni avec les polyfills Promise, donc si votre navigateur cible ne prend pas en charge nativement Promise (IE : pourquoi me regardez-vous), vous devez fournir le polyfill vous-même.

Extension : concernant le mécanisme d'exécution et les scénarios d'utilisation de nextTick, nous devons également maîtriser les requêtes similaires requestAnimationFrame() et process.nextTick(). Le premier est le propre moniteur du navigateur (exécuté avant la prochaine refonte), et le second l'est. Dans l'environnement de nœud, il est exécuté au prochain moment d'interrogation d'événement.

mixin

---

Fonction : Enregistrez un mixin, affectant chaque instance Vue créée après l'enregistrement. Les auteurs de plug-ins peuvent utiliser des mixins pour injecter des comportements personnalisés dans les composants.
Utilisation :

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

Description :

• objet : une propriété ou une méthode d'une machine virtuelle

ps : Veuillez utiliser les mixins globaux avec prudence car cela affectera chaque instance Vue créée individuellement (y compris les composants tiers ) ). Dans la plupart des cas, cela ne doit être appliqué qu'aux options personnalisées, comme dans l'exemple ci-dessus. Il est recommandé de le publier en tant que plugin pour éviter les mixins d'applications répétées.

$forceUpdate

---

Fonction : Forcer le rendu de l'instance Vue.
Utilisation :

vm.$forceUpdate()

Description : Notez que cela n'affecte que l'instance elle-même et les composants enfants insérés dans le contenu du slot, pas tous les composants enfants.

set, delete

---

Fonction :  Définissez et supprimez les propriétés des données réactives et déclenchez les mises à jour des vues en même temps.
Utilisation :

// 用法1
Vue.set( target, key, value )
Vue.delete( target, key )
// 用法2
vm.$set( target, key, value )
vm.$delete( target, key )

Instructions :

• cible : objet cible
• clé : nom d'attribut à ajouter
• valeur : valeur d'attribut à ajouter

ps : principaux scénarios d'utilisation, vous pouvez éviter Vue La limitation des propriétés supprimées ne peut pas être détectée

filter

---

Fonction : Utilisé pour certains formatages de texte courants et certains mappages de données canoniques.
Utilisation :

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

// 注册
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

// 全局注册
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

Description :

• La fonction de filtre reçoit toujours la valeur de l'expression (le résultat de la chaîne d'opérations précédente) comme premier paramètre.
• Les filtres doivent être ajoutés à la fin des expressions JavaScript, indiqués par le symbole « pipe ».

ps : Le filtre peut accepter plusieurs paramètres, tels que {{ message | filterA('arg1', arg2) }} Ici, filterA est défini comme une fonction de filtre qui reçoit trois paramètres. La valeur du message est utilisée comme premier paramètre, la chaîne ordinaire « arg1 » est utilisée comme deuxième paramètre et la valeur de l'expression arg2 est utilisée comme troisième paramètre.

directive

---

Fonction : Utilisé pour enregistrer des instructions personnalisées.
Utilisation :

<!-- 当页面加载时，该元素将获得焦点 --> 
<input v-focus>

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 注册局部指令，组件中也接受一个 directives 的选项
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

Description :

• inserted n'est qu'une des fonctions d'interpolation de l'instruction d'enregistrement. Les attributs d'enregistrement complets peuvent également inclure :
  • bind : appelé une seule fois, lorsque l'instruction est liée à. l'élément pour la première fois. Appelez, où vous pouvez effectuer des paramètres d'initialisation uniques.
  • inséré : Appelé lorsque l'élément lié est inséré dans le nœud parent (seul le nœud parent est garanti d'exister, mais pas nécessairement inséré dans le document).
  • update : Appelé lorsque le VNode du composant est mis à jour, mais cela peut se produire avant que son VNode enfant ne soit mis à jour. La valeur de la directive peut avoir changé ou non, mais les mises à jour inutiles du modèle peuvent être ignorées en comparant les valeurs avant et après la mise à jour.
  • componentUpdated : Appelé une fois que tous les VNode du composant où se trouve l'instruction et ses sous-VNodes ont été mis à jour.
  • unbind : Appelé une seule fois, lorsque l'instruction n'est pas liée à l'élément.

Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

v-model Le sucre syntaxique

v-model est souvent utilisé pour la liaison bidirectionnelle de données sur des éléments de formulaire, tels que . En plus des éléments natifs, il peut également être utilisé dans des composants personnalisés.

v-model est un sucre de syntaxe qui peut être décomposé en props : value et events : input. C'est-à-dire que le composant doit fournir un accessoire nommé value et un événement personnalisé nommé input Si ces deux conditions sont remplies, l'utilisateur peut utiliser v-model sur le composant personnalisé. Par exemple, l'exemple suivant implémente un sélecteur de nombre :

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span >{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: &#39;InputNumber&#39;,
    props: {
      value: {
        type: Number
      }
    },
    data () {
      return {
        currentValue: this.value
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit(&#39;input&#39;, this.currentValue);
      }
    }
  }
</script>

props 一般不能在组件内修改，它是通过父级修改的，因此实现 v-model 一般都会有一个 currentValue 的内部 data，初始时从 value 获取一次值，当 value 修改时，也通过 watch 监听到及时更新；组件不会修改 value 的值，而是修改 currentValue，同时将修改的值通过自定义事件 input 派发给父组件，父组件接收到后，由父组件修改 value。所以，上面的数字选择器组件可以有下面两种使用方式：

<template>
  <InputNumber v-model="value" />
</template>
<script>
  import InputNumber from &#39;../components/input-number/input-number.vue&#39;;

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

或：

<template>
  <InputNumber :value="value" @input="handleChange" />
</template>
<script>
  import InputNumber from &#39;../components/input-number/input-number.vue&#39;;

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    },
    methods: {
      handleChange (val) {
        this.value = val;
      }
    }
  }
</script>

如果你不想用 value 和 input 这两个名字，从 Vue.js 2.2.0 版本开始，提供了一个 model 的选项，可以指定它们的名字，所以数字选择器组件也可以这样写：

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span >{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: &#39;InputNumber&#39;,
    props: {
      number: {
        type: Number
      }
    },
    model: {
      prop: &#39;number&#39;,
      event: &#39;change&#39;
    },
    data () {
      return {
        currentValue: this.number
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit(&#39;number&#39;, this.currentValue);
      }
    }
  }
</script>

在 model 选项里，就可以指定 prop 和 event 的名字了，而不一定非要用 value 和 input，因为这两个名字在一些原生表单元素里，有其它用处。

.sync 修饰符

如果你使用过 Vue.js 1.x，一定对 .sync 不陌生。在 1.x 里，可以使用 .sync 双向绑定数据，也就是父组件或子组件都能修改这个数据，是双向响应的。在 Vue.js 2.x 里废弃了这种用法，目的是尽可能将父子组件解耦，避免子组件无意中修改了父组件的状态。

不过在 Vue.js 2.3.0 版本，又增加了 .sync 修饰符，但它的用法与 1.x 的不完全相同。2.x 的 .sync 不是真正的双向绑定，而是一个语法糖，修改数据还是在父组件完成的，并非在子组件。

仍然是数字选择器的示例，这次不用 v-model，而是用 .sync，可以这样改写：

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span >{{ value }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: &#39;InputNumber&#39;,
    props: {
      value: {
        type: Number
      }
    },
    methods: {
      increase (val) {
        this.$emit(&#39;update:value&#39;, this.value + val);
      }
    }
  }
</script>

用例：

<template>
  <InputNumber :value.sync="value" />
</template>
<script>
  import InputNumber from &#39;../components/input-number/input-number.vue&#39;;

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

看起来要比 v-model 的实现简单多，实现的效果是一样的。v-model 在一个组件中只能有一个，但 .sync 可以设置很多个。.sync 虽好，但也有限制，比如：

• 不能和表达式一起使用（如 v-bind:title.sync="doc.title + '!'" 是无效的）；

• 不能用在字面量对象上（如 v-bind.sync="{ title: doc.title }" 是无法正常工作的）。

其它简单的常用属性和方法

// console.log(vm.$root); 
vm.$root    //实例对象

vm.$el  //根元素（真实的DOM元素）
// console.log(vm.$el);

vm.$el.innerHTML    //得到根元素（真实的DOM元素）中的内容
// console.log(vm.$el.innerHTML);

vm.$data    //实例下的data对象
// console.log(vm.$data);

vm.$options     //实例下的挂载项
// console.log(vm.$options);

vm.$props   //组件之间通信的数据
// console.log(vm.$props);

vm.$parent      //在组件中，指父元素
// console.log(vm.$parent);

vm.$children    //在组件中，指子代元素
// console.log(vm.$children);

vm.$attrs   //用来获取父组件传递过来的所有属性
// console.log(vm.$attrs);

vm.$listeners   //用来获取父组件传递过来的所有方法
// console.log(vm.$listeners);

vm.$slots   //组件中的插槽
// console.log(vm.$slots);

vm.$scopedSlots     //用来访问作用域插槽
// console.log(vm.$scopedSlots);

vm.$refs    //用来定位DOM元素（使用ref进行追踪）
// console.log(vm.$refs);

vm.$watch   //用于监听数据（在vue文件中使用后会自动销毁）
// console.log(vm.$watch);

vm.$emit    //用于派发事件（常用于数据通信）
// console.log(vm.$emit);

vm.$on  //用于监听事件的派发
// console.log(vm.$on);

vm.$once    //只监听事件一次（之后不监听）
// console.log(vm.$once);

//生命周期
beforeCreate() {
}
created() {
}
beforeMount() {
}
mounted() {
}
beforeUpdate() {
}
updated() {
}
beforeDestroy() {
}
destroyed() {
}

（学习视频分享：vuejs教程、web前端）

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!