Table des matières
1. Méthodes d'instance de Vue et données d'instance
2. Méthodes d'instance et événements
3. Méthodes d'instance et cycle de vie
avant-propos
Avant de comprendre les méthodes d'instance courantes de Vue, nous devons d'abord comprendre ses attributs d'instance couramment utilisés. Quels sont les attributs d'instance de Vue que vous pouvez découvrir ? L'éditeur répertorie ici les propriétés de plusieurs instances de Vue couramment utilisées. Tout le monde peut apprendre ensemble.
- obtenir l'élément monté --vm.$el
- Obtenir un objet d'options d'initialisation pour l'instance --vm.$options
- Obtenir l'objet de données observé --vm.$data
- Un objet qui peut contenir tous les éléments DOM et les instances de composants enregistrés avec l'attribut ref
1. Méthodes d'instance de Vue et données d'instance
1、vm.$set
Cette méthode d'instance est un autre nom pour la méthode Vue.set. Sa fonction est d'ajouter des propriétés. Étant donné que vue n'a aucun moyen de détecter les nouvelles propriétés de fonction ordinaires, nous pouvons faire en sorte que vue les détecte en utilisant la méthode vm.$set.
2、vm.$supprimer
Cette méthode est également un alias pour les méthodes vue et delete. Sa fonction est de supprimer les attributs de l'objet. Vue supprime les attributs via cette méthode, qui peut être détectée.
3、vm.$regarder
Cette méthode d'instance est utilisée pour observer le changement d'une expression ou d'un résultat de calcul de fonction dans l'instance. S'il y a un changement, la fonction sera rappelée. La fonction de rappel obtiendra la nouvelle valeur et l'ancienne valeur des paramètres.
Nous pouvons comprendre cette partie à travers un exemple de code :
Exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
<button onclick="addName()">增加</button>
<button onclick="deleteName()">删除</button>
<h3>你想要的东西：{
{goods.name}}</h3>
价格：<input type="text" v-model.number="price"></br>
数量：<input type="number" v-model="count"></br>
总和：<input type="text" v-model="total"></br>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
goods:{},
price:0,
count:1,
total:0
},
});
function addName(){
Vue.set(vm.goods,'name','漫画书');
};
function deleteName(){
if(vm.goods.name){
vm.$delete(vm.goods,'name');
}
}
vm.$watch('price',function(newVal,oldVal){
return this.total = newVal*this.count;
})
vm.$watch('count',function(newVal,oldVal){
return this.total = newVal*this.price;
})
</script>
</body>
</html>résultat de l'opération :
Chaque fois que vous appuyez sur le bouton "Ajouter", la "bande dessinée" dans {{goods.name}} s'affiche, et lorsque vous appuyez sur "Supprimer", { {goods.name}} s'affiche comme vide ; lorsque Lorsque le prix et la quantité changent, le prix total change également.
2. Méthodes d'instance et événements
1、vm.$on
Cette méthode d'instance peut être utilisée pour écouter des événements personnalisés dans l'instance de vue. Ces événements sont déclenchés par vm.$emit et la fonction de rappel recevra tous les paramètres supplémentaires de la fonction entrante déclenchée par le temps.
2、vm. $emit
Cette méthode d'instance déclenche l'événement sur l'instance actuelle et les paramètres supplémentaires sont transmis à l'écouteur pour le rappel de la fonction.
3、vm.$une fois
La fonction de cette méthode d'instance est d'écouter un événement personnalisé, mais il ne peut être déclenché qu'une seule fois. Une fois déclenché, l'écouteur sera débordé.
4、vm.$off
La fonction de cette méthode d'instance est de supprimer un écouteur personnalisé.
Jetons un coup d'œil au code :
Exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
<button @click="zengjia">增加</button>
{
{num}}
<button onclick="jianshao()">减少</button>
<button onclick="off()">解除减少操作事件</button>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
num:100
},
methods:{
zengjia:function(){
this.num++;
}
}
});
vm.$on("reduce",function(step){
vm.num =step;
});
function jianshao(){
vm.$emit("reduce",2);
}
function off(){
vm.$off("reduce");
}
</script>
</body>
</html>Résultat courant : chaque fois que vous cliquez sur le bouton "Réduire", la valeur diminue ; lorsque vous cliquez sur "Supprimer l'événement d'opération de diminution", la valeur ne change pas après avoir cliqué sur le bouton de diminution.
3. Méthodes d'instance et cycle de vie
1、vm.$mount
La fonction de cette méthode d'instance est la suivante : si l'instance ne reçoit pas l'option el, elle sera dans l'état "démonté", car aucun élément DOM ne lui est associé. Les montages manuels peuvent être effectués à l'aide de cette méthode de montage.
2、vm.$détruire
Cette méthode d'instance est principalement utilisée pour détruire complètement une instance, effacer les connexions à d'autres instances et rejeter toutes les directives et les écouteurs d'événements.
3、vm.$nextTick
La fonction de rappel dans cette méthode d'instance est retardée jusqu'à ce que le DOM soit mis à jour, mais si l'événement DOM est exécuté par la fonction de crochet créée dans le cycle de vie de la vue, il doit être placé dans la fonction de rappel de .nextTick. Vous pouvez utiliser .nextTick immédiatement après la modification des données, afin que la fonction de rappel puisse être appelée une fois la mise à jour DOM terminée.
Nous le comprenons à travers des exemples de code :
Exemple de code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>methods</title>
</head>
<body>
<div id="app">
<h2 ref="first">{
{first}}</h2>
<h3 ref="secnd">{
{second}}</h3>
<input type="text" v-model="msg">
<p>{
{msg}}</p>
<button onclick="destroy()">销毁</button>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
let vm = new Vue({
data:{
msg:"看到你就烦",
first:'1',
second:'2',
},
});
vm.$mount('#app');
vm.first = '丘比特';
vm.second = vm.$refs.first.textContent;
console.log(vm.second);
Vue.nextTick(function(){
vm.second = vm.$refs.first.textContent;
console.log(vm.second);
})
function destroy(){
vm.$destroy();
}
</script>
</body>
</html>Résultat en cours d'exécution : nous pouvons voir que la console de la console est "Cupid", et la valeur de l'exécution de vm.$nextTick est la valeur dans msg -- "C'est ennuyeux de vous voir", et la page sera également mise à jour de manière synchrone. Lorsque vous cliquez sur "Détruire", puis écrivez la valeur, le texte, etc. dans la zone de texte, il a été détruit et ne sera pas mis à jour.
