Propriétés et méthodes dans l'objet d'instance de Vue --- kalrry
01、le
- est un attribut unique de l'instance racine, représentant l'élément racine
- Fournit un objet DOM sur la page en tant que cible de montage de l'instance Vue. Peut être un sélecteur ou une instance d'élément DOM
02、données
- Les propriétés de l'objet de données sont réactives et la définition des propriétés directement sur l'instance vm n'est pas réactive
- La réactivité des données peut être interrompue par Object.freeze()
- L'utilisation de l'attribut data :
Dans la fonction de l'instance de Vue : utilisez this.prop pour appeler (les méthodes, les calculs sont automatiquement liés à l'instance de vue)
À l'intérieur de l'étiquette : accédez via l'expression { {porp}}
Sur l'étiquette : appel via la liaison : [ prop] = "prop"
03、méthodes
- Généralement utilisé pour définir la fonction de rappel d'événement
- Dans l'expression, vous pouvez appeler la méthode pour obtenir le même effet d'affichage qu'en appelant la propriété calculée.
- Contrairement à computed, les méthodes n'ont pas de cache et le code de la fonction est compilé et exécuté à chaque fois qu'il est appelé.
04、calculé
- Les propriétés calculées ne doivent pas être appelées avec () lorsqu'elles sont référencées, utilisez-les simplement comme des propriétés ordinaires.
- Lorsque les données dans data changent, le calcul sera recalculé et le résultat du calcul sera enregistré dans un nouvel attribut
- Le résultat de la propriété calculée sera mis en cache pour une utilisation directe la prochaine fois ; tant que les données de la méthode de la propriété calculée n'ont pas changé, elles ne seront pas recalculées 4. Il doit y avoir un exemple
de valeur de retour dans la méthode de la propriété calculée
<div id="app">
firstname：<input type="text" v-model="firstname" />
lastname：<input type="text" v-model="lastname" />
fullname：<input type="text" v-model="FullName" />
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
computed: {
FullName() {
//FullName就是新生成的属性
return this.firstname + '-' + this.lastname
}
}
})
</script>
05、modèle
1. Un modèle de chaîne, qui peut être un sélecteur ou une chaîne contenant du contenu html
06, regarder
- Il est principalement utilisé pour surveiller les modifications des propriétés existantes de l'instance de vue, et il ne peut pas surveiller les propriétés qui n'existent pas.
- watch peut obtenir l'objet précédent du changement et le nouvel objet après le changement dans la liste des paramètres
- watch peut détecter les changements dans les propriétés profondes de l'objet et définir si la fonction de rappel est déclenchée immédiatement
exemple
<div id="app">
firstname：<input type="text" v-model="firstname" />
lastname：<input type="text" v-model="lastname" />
fullname：<input type="text" v-model="FullName" />
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
FullName: ''
},
watch: {
firstname(newVal, oldVal) {
this.FullName = newVal + '-' + this.lastname
},
lastname(newVal, oldVal) {
this.FullName = this.firstname + '-' + newVal
}
}
})
</script>
07. Objet d'attribut de l'instance de vue
L'instance de Vue fournit des propriétés et des méthodes d'instance utiles au monde extérieur, qui sont représentées par le préfixe $+ nom de propriété/nom de méthode pour le distinguer des propriétés définies par l'utilisateur
Les attributs:
vm.$el:根实例的挂载DOM结点
vm.$parent:当前实例的父实例
vm.$children:当前实例的子实例
vm.$root:组件树的根实例,如果没有父实例,vm.$root指向自己
vm.$refs:注册过 ref 特性 的所有 DOM 元素和组件实例
vm.$data:指向实例的data属性
vm.$props:指向当前组件的props对象属性
vm.$watch:指向实例的watch方法
vm.$set:这个方法给实例设置的属性是响应式的.直接设置vm.prop不是响应式的
vm.$mount:这个方法等同于el属性,都是给vue实例挂载DOM结点，底层实现一样
vm.$nextTick:DOM完成更新后，自动执行，调用nextTick中的回调函数
Exemple : Obtenir l'élément DOM
<div id="app">
<h1 @click="showMessage" ref="h1">哈哈哈</h1>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
showMessage() {
console.log(this.$refs.h1.innerHTML)
}
}
})
</script>
08、avantCréer
Déclencheur : Exécuter avant la création de l'instance
Fonction : La principale chose à faire à cette étape est d'initialiser les événements et le cycle de vie
Portée : Impossible d'obtenir les données de données, impossible d'obtenir le nœud DOM
09、créé
Déclencheur : une fois l'instance créée et exécutée, elle est souvent utilisée pour faire fonctionner la
fonction vue : la principale chose à faire est l'observation des données, vous pouvez obtenir les données grâce à cela, la première requête Ajax peut être envoyée ici et le rendu
la plage peut être effectuée en modifiant les attributs : vous pouvez obtenir les données de données, impossible d'obtenir le nœud dom monté, la modification des données ici ne déclenchera pas les fonctions de crochet beforeUpdate et mise à jour
10, avant le montage
Déclencheur : déclenché avant le rendu des données, lorsque le nœud dom a été monté, mais que les données n'ont pas été rendues dans le modèle html
Fonction : terminer la compilation du modèle, préparer la
plage de rendu des données : à ce moment, le modèle de compilation est terminé, le nœud dom peut être obtenu, et l'attribut data peut être modifié, mais les données n'ont pas été finalement rendues à la page, et le résultat de rendu final de html ne peut pas être obtenu
11、monté
Déclencheur : le nœud dom est monté et les données ont été rendues dans le modèle html, qui est destiné à la méthode qui doit faire fonctionner le dom, comme lors du chargement du plug-in jQuery, chargez la fonction correspondante dedans.
Fonction : Render les données à la
plage de nœuds DOM : peuvent accéder et modifier l'attribut de données, les données ont été rendues au nœud DOM, le DOM rendu peut être manipulé et les fonctions de crochet beforeUpdate et updated peuvent être déclenchées
new Vue({
el: '#app',
data: {
name: 'onion'
},
created() {
console.log(this.name)
}
})
12、composants
Cela signifie introduire des composants. Les composants peuvent être écrits dans d'autres fichiers ou dans ce fichier. Ils doivent être affectés à des variables.