1. Compréhension de Vue: Vue est un framework JavaScript progressif
2. Caractéristiques de Vue: cadre léger, liaison de données bidirectionnelle, instructions, plug-in.
3. Syntaxe de Vue:
new Vue({
el:"#app", 用于挂载要管理的元素
data:{ //定义数据
}
})
4. V-model obtient et définit la liaison de données bidirectionnelle des valeurs des éléments de formulaire:
1.指令的作用是便捷的设置和获取表单元素的值
2.绑定的数据会和表单的数据关联
3.二者相互绑定，不论哪一方发生变化，另一方都会变化。
5. Instructions:
5.1 v-text équivaut à { {xxx}}
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span> {
{msg}} </span>
5.2 v-html
v-html = "xxx" 内容按照html进行插入
5.3 v-show 和 v-if
: v-show est de définir si l'élément existe via l'attribut d'affichage de l'élément, et v-if est de définir si le nœud DOM de l'élément existe ou non
5.4 v-if v-else-if v-else
La condition ne sera affichée que lorsque certaines conditions sont remplies, c'est-à-dire que lorsque le résultat est vrai, elle sera affichée, ce qui équivaut à JavaScript 0, nul, non défini, faux est faux, d'autres sont vrais
5.5 Traversée de boucle v-for
<div v-for ="(item,index) in arr">{
{item}} </div>
item représente chaque élément du tableau et index représente l'indice.
<div v-for = "(val,key) in obj">{
{val}}{
{key}} </div>
val représente la valeur d'attribut de l'objet et key représente l'attribut
<div v-for = "(val,key,index) in obj"></div>
val représente la valeur de l'attribut, key représente l'attribut et index représente l'indice de l'attribut
5.6 Abréviation d'objet de liaison v-on @ événement de liaison.
.Stop: La méthode équivalente à la prévention du bullage d'événement est égale à event.stopPropagation () Dans des circonstances normales, la fonction liée la plus interne est exécutée en premier, puis bouillonne vers l'extérieur
.Capture Pendant le bullage d'événement, si la capture est ajoutée à un événement externe, la fonction la plus externe avec capture sera exécutée en premier. Par exemple: il y a quatre couches de div et 13 couches jointes avec des événements de capture, l'ordre de bouillonnement des événements consiste à exécuter la capture de l'extérieur vers l'intérieur, puis à bouillonner de l'intérieur vers l'extérieur.
.Prevent Le comportement par défaut de la prévention des événements est égal à event.preventDefault (). Par exemple, pour empêcher l'événement par défaut d'un bouton radio de cliquer, il n'y aura pas de coche après avoir cliqué sur un lien, et la page ne le sera pas actualiser après avoir cliqué.
.Self lie l'événement à lui-même uniquement lorsqu'il est déclenché, l'événement auto-lié sera déclenché, c'est-à-dire que l'événement auto-lié sera ignoré lors du bullage d'événement.
.Once L'événement lié à une fois est détruit après avoir été exécuté une fois, et ne continuera pas à être déclenché la prochaine fois que l'on cliquera dessus. S'il y est inséré, il sera également invalidé et l'événement de prévention de bouillonnement qu'il a lié sera également être invalidé
., Keydown, keyup Lorsqu'un événement de clavier est déclenché, il peut également être lié à des touches spéciales telles que enter shift ctrl et d'autres touches peuvent obtenir la valeur ASCII
.left- (2.2.0) Uniquement déclenché lorsque la gauche le bouton de la souris est cliqué.
. right` - (2.2.0) 只当点击鼠标右键时触发。
.Middle`- (2.2.0) Déclenché uniquement lorsque le bouton central de la souris est cliqué.
.Passive - (2.3.0) 以{passive: true} `mode pour ajouter un auditeur
5.7 v-bind est abrégé en: bind événement de liaison: lier dynamiquement un ou plusieurs attributs, ou un accessoire de composant à une expression.
V-bind est abrégé comme suit: Vous pouvez lier l'attribut class à l'élément. Il existe deux méthodes de liaison. L'une est la méthode objet et l'autre est la méthode tableau. La
méthode objet est liée {attribut: valeur d'attribut} L'attribut value peut également être une variable True et False. True signifie afficher false ou ne pas afficher. Vous pouvez également utiliser d'autres événements pour contrôler la valeur de la propriété de l'objet afin de déterminer s'il faut afficher.
Array binding method ['xxx', 'xxx'] Cette méthode de liaison, si vous ajoutez des guillemets, équivaut à une liaison directe à l'élément. Si vous n'ajoutez pas de guillemets, elle équivaut à une variable. Vous pouvez rechercher cette variable dans le modèle. Si vous la trouvez, Variable ajoute la valeur de cette variable
5.8 Utilisation v-pre: si vous ne souhaitez pas compiler le contenu dans { {}}.
5.9 v-cloak est utilisé lorsque les éléments de la page Web ne sont pas complètement chargés. Arrêtez de l'utiliser lorsque la page entière est compilée.
5.10 v-once ne peut se lier qu'une seule fois, et après la liaison une fois, les éléments que vous souhaitez écrire statiquement sur la page ne seront pas affectés par les opérations Vue.
6 options
el: indique les éléments à gérer lors du montage
les données où les variables ou les données sont stockées
Où les méthodes stockent les fonctions
watch: l'auditeur surveille une variable et déclenche la fonction correspondante lorsque la valeur de l'élément change
Lorsque vous surveillez une variable, vous pouvez directement surveiller. Lorsque vous surveillez un objet, vous devez surveiller en profondeur et ajouter deep: true
Extension: étant donné que la propriété de l'objet est liée à l'adresse de l'objet, l'adresse ne change pas lorsque la valeur change, une surveillance approfondie est donc nécessaire pour être forte.
La différence entre les méthodes calculées et les méthodes calculées a un cache qui ne sera pas appelé à nouveau lorsque la valeur ne change pas, et les méthodes sont appelées à chaque fois qu'elle est exécutée