Vue.js Learning 2 : Développement basé sur les données

<p>La colonne

<p>Tutoriel Vue.js présente le développement basé sur les données de la deuxième partie de l'apprentissage de Vue.js.

<p>

<p>Dans le framework Vue.js, la manière d'interagir avec les éléments de la page HTML n'est pas aussi directe que l'interface JavaScript native. Elle est d'abord intégrée dans une série de HTML similaire. balises d'élément Liez les données aux attributs de commande Vue des attributs de balise ordinaires, puis modifiez le mode d'affichage et le contenu des éléments de page en modifiant ces données liées dans le code JavaScript. En termes de méthodes de programmation, nous appelons généralement cette façon d'utiliser les modifications du contenu des données pour piloter le fonctionnement commercial de l'ensemble du programme « Développement basé sur les données ». Cette partie des notes expliquera comment utiliser les méthodes de développement basées sur les données pour effectuer la liaison de données et la réponse aux événements afin d'obtenir des fonctions de base telles que le contrôle des éléments de page et des styles CSS.

Liaison de données

<p>Dans le programme 01_sayHello précédent, nous utilisons maintenant la syntaxe du modèle dans la balise <h1> pour lier une donnée nommée sayHello. La syntaxe du modèle est en fait celle ci-dessus. sucre syntaxique pour la directive v-text. En d'autres termes, la syntaxe plus standardisée de la balise <h1> devrait être :

<h1 v-text="sayHello"></h1>

<p> Compte tenu de notre habitude traditionnelle d'écrire des balises HTML, il serait plus confortable d'utiliser des balises de modèle comme {{ data_name }} . Bien sûr, la directive v-text définit le contenu du texte sous l'étiquette de l'élément actuel. Si vous souhaitez lier les données à l'attribut de l'étiquette elle-même, vous devez utiliser la directive v-bind. La syntaxe spécifique consiste à ajouter <🎜. > préfixe. Par exemple, si vous souhaitez lier des données à l'attribut v-bind: de la balise <img>, vous pouvez faire ceci : src

<img v-bind:src="vueLogo" style="width:200px">

De plus, la directive <p> a également une forme abrégée, que vous il suffit de lier les données à Ajoutez simplement un préfixe v-bind avant le nom de l'attribut de la balise. Dans le programme : précédent, j'ai utilisé ce formulaire. Après avoir lié les données sur l'élément de page, vous pouvez créer l'instance Vue dans le script JavaScript correspondant. C'est ce que j'ai écrit dans le fichier 01_sayHello du programme 01_sayHello. Au moins les deux membres suivants doivent être définis dans cet objet instance Vue : main.js

• Membre el : Ce membre est utilisé pour définir le conteneur d'éléments correspondant à l'instance Vue actuelle. , qui est généralement un élément A , dans certains cas, il peut également s'agir de balises conteneur telles que <p> et <header> fournies par HTML5. La valeur de ce membre peut être n'importe quelle chaîne conforme à la syntaxe du sélecteur CSS, telle que <footer>, #ID, etc. .CLASSNAME
• Membre data : Ce membre est utilisé pour définir les données liées dans l'élément de page. Sa valeur elle-même est également un objet au format JSON. Chaque membre de l'objet correspond à un. Objets liés dans des éléments de page. Par exemple, dans le programme précédent, j'ai lié les deux données 01_sayHello et sayHello, et elles doivent être définies dans le membre vueLogo de l'objet Vue correspondant. data

Traitement des événements

Bien sûr, <p>le programme n'est actuellement qu'une activité d'affichage de données à sens unique. Si vous souhaitez le rendre interactif, vous devez également lier les événements aux éléments de la page. Dans le framework Vue.js, pour lier un événement, vous devez d'abord enregistrer un gestionnaire d'événement pour la balise de l'élément cible via la directive 01_sayHello. Par exemple, si nous voulons utiliser un bouton dans le programme v-on pour contrôler si. l'élément 01_sayHello est affiché ou non, Le code <img> de ce programme peut être modifié comme suit : index.htm

    
    
    
    
    
    


    

        <h1> {{ sayHello }} 
        
        
        
        
        
    

Ici, j'ai principalement fait les modifications suivantes : <p>

D'abord , ajoutez un < dans la directive
• tag 🎜>, qui peut être utilisé pour lier une donnée de type booléen (c'est-à-dire <img> ici) pour décider d'afficher ou non l'étiquette là où elle se trouve. v-showisShow Ensuite, une nouvelle étiquette de bouton est ajoutée à la page, et l'attribut
de l'étiquette est défini à l'aide de la directive
• . La valeur de cet attribut est une expression conditionnelle, qui sera basée. sur les v-bind Les valeurs affichent un texte différent. valueisShowEnfin, utilisez la directive
(
• est l'abréviation du préfixe v-on de la directive) pour enregistrer un gestionnaire d'événements de clic nommé @ pour la nouvelle étiquette du bouton. v-on:toggleShow
Continuons à modifier le code dans

, comme suit : <p>

const app = new Vue({
    el: '#app',
    data:{
        sayHello: '你好，Vue.js！',
        vueLogo: 'img/logo.png',
        isShow: true
    },
    methods:{
        toggleShow: function() {
            this.isShow = !this.isShow;
        }
    }
});

main.jsIci, j'ai principalement fait les modifications suivantes :

• 首先，在 Vue 对象的data成员中定义了之前绑定的布尔类型数据isShow，并将其默认值设置为 true。
• 然后，为 Vue 对象新增了一个名为methods的成员。该成员用于设置页面元素中注册的事件处理函数，它的值也是一个 JSON 格式的对象。该对象的每个成员都对应一个已在页面元素中用v-on指令注册的事件处理函数。在这里就是toggleShow，该函数每次调用都会将isShow的值取反。

<p>这样一来，当我们在 Web 浏览器中打开该应用程序就会看到之前的 Vue 图标旁边多了个文本内容为隐藏的按钮。当按钮被单击之后，图标就会消失，按钮上的文本也变成显示。之后，如果该按钮再次被单击，一切又会恢复原状。

用户输入

<p>对于用户来说，除了触发事件之外，允许用户在运行时输入具体的数据也是一个应用程序必不可少的一项功能。下面将通过编写一个"待办事项"的程序来学习如何使用 Vue.js 框架实现能处理用户输入数据的应用程序界面。为此，我需要在code目录下创建一个名为02_toDoList的目录，并在该目录中创建一个名为index.htm的文件，其代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
    <script defer="defer" src="js/main.js"></script>
    <title>待办事项</title>
</head>
<body>
    <p id="app">
        <h1>待办事项</h1>
        <p id="todo">
            <ul>
                <li v-for="( task,index ) in taskList">
                    <input type="checkbox" v-model="doneList" :value="task">
                    <label :for="task">{{ task }}</label>
                    <input type="button" value="删除" @click="remove(index)">
                </li>
            </ul>
        </p>
        <p id="done" v-if="doneList.length > 0">
            <h2>已完成事项</h2>
            <ul>
                <li v-for="task in doneList">
                    <label :for="task">{{ task }}</label>
                </li>
            </ul>
        </p>
        <input type="text" v-model="newTask" @keyup.enter="addNew">
        <input type="button" value="添加新任务" @click="addNew">
    </p>
</body>
</html>

<p>接下来，我会在同一目录下再创建一个名为js的目录，并在该目录下创建main.js脚本文件，其代码如下：

// 程序名称： toDoList
// 实现目标：
//   1. 学习 v-model、v-for 等指令
//   2. 掌握如何处理用户输入

const app = new Vue({
    el: '#app',
    data:{
        newTask: '',
        taskList: [],
        doneList: []
    },
    methods:{
        addNew: function() {
                  if(this.newTask !== '') {
                      this.taskList.push(this.newTask);
                      this.newTask = '';
                  }
                },
        remove: function(index) {
                  if(index >=  0) {
                      this.taskList.splice(index,1);
                  }
                }
    }
});

<p>下面来具体分析一下这个程序。在通常情况下，Web 应用程序在前端接受用户输入信息的方式主要有两种：第一种方式是用文本框元素来获取用户从键盘输入的信息。在 Vue.js 框架中，我们可以用v-model指令将<input type="text">标签绑定到newTask数据中，该指令与v-bind指令不同的在于，它是一种双向绑定。也就是说，v-model指令不止可以让 JavaScript 代码中对绑定数据的修改反映到页面元素中，也可以让页面元素获取到的用户输入数据同步到 JavaScript 代码中。在 JavaScript 代码获取到文本框中的用户输入内容之后，我们就可以通过事件处理函数addNew将其加入到一个名为taskList的数据列表中，然后将该事件处理函数注册给输入回车和鼠标单击事件。

<p>第二种方式是用单选钮、复选框等选择性元素来获取用户用鼠标勾选的信息。例如在上面这个程序中，我在<p id="todo">元素中用v-for指令创建了一系列<input type="checkbox">，它们都提供v-model指令将自己双向绑定到了另一个名为doneList数据列表上。在 Vue.js 框架中，如果一组复选框元素被v-model指令绑定到了一个列表类型的数据上，那么当这些复选框被选上时，它们的value属性值就会被自动添加到这个被绑定的数据列表中。

<p>为了证明被选中的复选框被加入到了doneList数据列表中，我还在页面中添加了一个<p id="done">元素，并对doneList数据列表进行了遍历显示。需要说明的是，用于遍历数据列表的v-for指令主要有两种形式：

• Quand on a seulement besoin de parcourir les valeurs de la liste , on peut écrire comme ceci : v-for="item in dataList" A ce moment, chaque élément de données de la liste de données (<.>) seront parcourus dans le processus. Les variables itérées (dataList) sont lues une à une. item
• Quand on a besoin d'obtenir la valeur de la liste et son index dans la liste en même temps , on peut écrire comme ceci : , à ce moment la liste de données (v-for="( item,index ) in dataList") est en cours de parcours, la valeur de chaque élément de données sera lue par la variable dataList, et l'index de chaque élément de données sera lu par la variable item. index

La dernière chose à noter est que pour l'élément <p> lui-même, j'ai utilisé la directive <p id="done"> Son effet est fondamentalement le même que la directive v-if précédente. : ajoutera ou supprimera directement le nœud de l'élément là où il se trouve dans l'arborescence DOM, tandis que l'instruction v-show masquera ou affichera simplement l'élément via l'attribut v-if de l'élément où il se trouve. En termes d'efficacité d'exécution, l'instruction v-show est plus efficace. Ici, nous définissons que lorsqu'il n'y a aucune donnée dans la liste style, le programme supprimera directement l'élément v-show de la page, et sinon ajoutera l'élément à la page. Jetons un coup d'œil à l'effet du doneList fonctionnement du programme : <p id="done">02_toDoList

<p>

Apprentissage gratuit plus pertinent : <p>javascript (Vidéo)

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!