Vue.js Learning 2: Datengesteuerte Entwicklung-View.js-php.cn

<p>Vue.js-TutorialDie Kolumne stellt die datengesteuerte Entwicklung des Vue.js-Lernprogramms vor, Teil zwei.

<p>

Vue.js Learning 2: Datengesteuerte Entwicklung

<p>Im Vue.js-Framework ist die Art und Weise der Interaktion mit HTML-Seitenelementen nicht so direkt wie bei der nativen JavaScript-Schnittstelle. Sie ist daran gebunden, zunächst eine Reihe von Vue-Anweisungsattributen ähnlich den gewöhnlichen Tag-Attributen in den HTML-Code einzubetten Element-Tag Definieren Sie Daten und ändern Sie dann den Anzeigemodus und den Inhalt von Seitenelementen, indem Sie diese gebundenen Daten im JavaScript-Code ändern. In Bezug auf Programmiermethoden nennen wir diese Art, Änderungen im Dateninhalt zu nutzen, um den Geschäftsbetrieb des gesamten Programms voranzutreiben, normalerweise „datengesteuerte Entwicklung“. In diesem Teil der Hinweise wird beschrieben, wie datengesteuerte Entwicklungsmethoden zur Vervollständigung der Datenbindung und Ereignisreaktion verwendet werden, um grundlegende Funktionen wie die Steuerung von Seitenelementen und CSS-Stilen zu erreichen.

Datenbindung

<p>Im vorherigen 01_sayHello-Programm verwenden wir jetzt die Vorlagensyntax im <h1>-Tag, um eine Datei mit dem Namen sayHello Daten, diese Vorlagensyntax ist eigentlich der Syntaxzucker der <code>v-text-Direktive. Mit anderen Worten, die standardisiertere Syntax des <h1>-Tags sollte wie folgt lauten: 01_sayHello程序中，我们现在<h1>标签中使用模版语法绑定了一个名称为sayHello的数据，该模版语法实际上是v-text指令的语法糖。换句话说，该<h1>标签更规范的语法应该是：

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

Nach dem Login kopieren

<p>考虑到我们传统上编写 HTML 标签的习惯，使用{{ data_name }}这样的模版标记会是更让人舒服的做法。当然了，v-text指令设置的是当前元素标签下面的文本内容，如果要为标签本身的属性绑定数据，就得要使用v-bind指令，具体语法是在要设置的标签属性名前面加上v-bind:前缀。例如，如果想为<img>标签的src属性绑定数据，就可以这样做：

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

Nach dem Login kopieren

<p>另外，v-bind指令还有一个简写形式，只需要在要绑定数据的标签属性名之前加一个:前缀即可。在之前的01_sayHello程序中，我采用的就是这种形式。在页面元素上绑定了数据之后，接下来就可以在相对应的 JavaScript 脚本中创建 Vue 实例了，这就是我之前在01_sayHello程序的main.js文件中编写的内容。这个 Vue 实例对象中至少要定义以下两个成员：

el成员：该成员用于设置当前 Vue 实例所对应的元素容器，这通常是一个<p>元素，某些情况也可以是 HTML5 提供的<header>、<footer>等容器类标签。该成员的值可以是任何一个符合 CSS 选择器语法的字符串，例如#ID、.CLASSNAME等。
data成员：该成员用于设置页面元素中绑定的数据，它的值本身也是一个 JSON 格式的对象，该对象的每个成员都对应一个页面元素中绑定的对象，例如在之前的01_sayHello程序中，我绑定了sayHello和vueLogo这两个数据，就必须要在 Vue 对象的data成员中为为它们设置相应的值。

事件处理

<p>当然，01_sayHello程序目前只是一个单向显示数据的业务。如果想要让其具备交互能力，还需要为页面元素绑定事件。在 Vue.js 框架中，绑定事件首先要通过v-on指令来为目标元素标签注册事件处理函数，例如如果我们想在01_sayHello程序用一个按钮来控制<img>元素的显示与否，可以将该程序的index.htm代码修改如下：




    
    
    
    
    
    你好，Vue.js


    
        <h1> {{ sayHello }}

Nach dem Login kopieren

<p>在这里，我主要做了如下修改：

首先，在<img>标签中增加了一个v-show指令，该指令可用于绑定一个布尔类型的数据（即这里的isShow），以此来决定是否显示其所在的标签。
然后，在页面中新增了一个按钮标签，并用v-bind指令设置了该标签的value属性，该属性的值是一个条件表达式，它将根据isShow的值显示不同的文本。
最后，用v-on指令（@是该指令v-on:前缀的简写形式）为新增的按钮标签注册了一个名为toggleShow的单击事件处理函数。

<p>下面继续来对main.js

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

Nach dem Login kopieren

Angesichts unserer traditionellen Gewohnheit, HTML-Tags zu schreiben, verwenden Sie {{ data_name }}</code > Ein solches Template-Markup wäre komfortabler. Natürlich legt die <code>v-text-Direktive den Textinhalt unter dem aktuellen Elementlabel fest. Wenn Sie Daten an die Attribute des Labels selbst binden möchten, müssen Sie v-bind< verwenden /code> verwenden, besteht die spezifische Syntax darin, das Präfix <code>v-bind: vor dem festzulegenden Label-Attributnamen hinzuzufügen. Wenn Sie beispielsweise Daten an das Attribut src des Tags <img> binden möchten, können Sie Folgendes tun: <p>

<!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>

Nach dem Login kopieren

Auch v- bind</code >Die Direktive hat auch eine abgekürzte Form. Sie müssen lediglich ein <code>:-Präfix vor dem Label-Attributnamen hinzufügen, an den Daten gebunden werden. Im vorherigen 01_sayHello-Programm habe ich dieses Formular verwendet. Nachdem Sie die Daten an das Seitenelement gebunden haben, können Sie eine Vue-Instanz im entsprechenden JavaScript-Skript erstellen. Dies ist der main.js</code meines vorherigen <code>01_sayHello-Programms in der Datei. In diesem Vue-Instanzobjekt müssen mindestens die folgenden zwei Mitglieder definiert sein: 🎜

🎜el Mitglied 🎜: Dieses Mitglied wird verwendet, um den Elementcontainer festzulegen, der der aktuellen Vue-Instanz entspricht. Das ist normalerweise ein Element. Das <p>-Element kann in manchen Fällen auch Container-Tags wie <header> und <footer> bereitgestellt von HTML5. Der Wert dieses Mitglieds kann eine beliebige Zeichenfolge sein, die der CSS-Selektorsyntax entspricht, z. B. #ID, .CLASSNAME usw.
🎜data member🎜: Dieses Mitglied wird verwendet, um die im Seitenelement gebundenen Daten festzulegen. Sein Wert selbst ist auch ein Objekt im JSON-Format An das in einem Seitenelement gebundene Objekt habe ich beispielsweise im vorherigen 01_sayHello-Programm die beiden Daten sayHello und vueLogo gebunden Legen Sie entsprechende Werte für sie im data-Member des Vue-Objekts fest.

Ereignisverarbeitung 🎜🎜Natürlich ist das Programm 01_sayHello derzeit nur ein einseitiges Datenanzeigegeschäft. Wenn Sie es interaktiv gestalten möchten, müssen Sie auch Ereignisse an Seitenelemente binden. Um im Vue.js-Framework ein Ereignis zu binden, müssen Sie zunächst einen Ereignishandler für das Zielelement-Tag über die Direktive v-on registrieren. Wenn wir beispielsweise einen Ereignishandler in verwenden möchten die Programmschaltfläche 01_sayHello, um zu steuern, ob das Element <img> angezeigt wird oder nicht. Sie können den Code index.htm des Programms ändern wie folgt: 🎜// 程序名称： toDoList
// 实现目标：
//   1. 学习 v-model、v-for 等指令
//   2. 掌握如何处理用户输入

const app = new Vue({
    el: &#39;#app&#39;,
    data:{
        newTask: &#39;&#39;,
        taskList: [],
        doneList: []
    },
    methods:{
        addNew: function() {
                  if(this.newTask !== &#39;&#39;) {
                      this.taskList.push(this.newTask);
                      this.newTask = &#39;&#39;;
                  }
                },
        remove: function(index) {
                  if(index >=  0) {
                      this.taskList.splice(index,1);
                  }
                }
    }
});
Nach dem Login kopieren
Nach dem Login kopieren
🎜Hier habe ich hauptsächlich die folgenden Änderungen vorgenommen: 🎜Zunächst wird eine v-show-Direktive zum <img>< hinzugefügt /code>-Tag, das zum Binden eines booleschen Datentyps (d. h. hier isShow) verwendet werden kann, um zu bestimmen, ob das Etikett dort angezeigt werden soll, wo es sich befindet. 
Dann wird der Seite eine neue Schaltflächenbeschriftung hinzugefügt und die Direktive v-bind wird verwendet, um das Attribut value der Beschriftung festzulegen. Der Wert dieses Attributs ist ein bedingter Ausdruck, der basierend auf dem Wert von isShow unterschiedlichen Text anzeigt. 
Verwenden Sie abschließend den Befehl v-on (@ ist die Abkürzung des Präfixes v-on: des Befehl) als Die neue Schaltflächenbezeichnung registriert einen Klickereignishandler mit dem Namen toggleShow. 
🎜Ändern wir weiterhin den Code in main.js wie folgt:🎜rrreee🎜Hier habe ich hauptsächlich die folgenden Änderungen vorgenommen:🎜首先，在 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>
Nach dem Login kopieren
Nach dem Login kopieren
<p>接下来，我会在同一目录下再创建一个名为js的目录，并在该目录下创建main.js脚本文件，其代码如下：
// 程序名称： toDoList
// 实现目标：
//   1. 学习 v-model、v-for 等指令
//   2. 掌握如何处理用户输入

const app = new Vue({
    el: &#39;#app&#39;,
    data:{
        newTask: &#39;&#39;,
        taskList: [],
        doneList: []
    },
    methods:{
        addNew: function() {
                  if(this.newTask !== &#39;&#39;) {
                      this.taskList.push(this.newTask);
                      this.newTask = &#39;&#39;;
                  }
                },
        remove: function(index) {
                  if(index >=  0) {
                      this.taskList.splice(index,1);
                  }
                }
    }
});
Nach dem Login kopieren
Nach dem Login kopieren
<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指令主要有两种形式：


Wenn wir nur die Werte in der Liste durchlaufen müssen, können wir so schreiben: v-for="item in dataList", dann in der Datenliste ( dataList) Jedes Datenelement wird während des Durchlaufprozesses einzeln von der Iterationsvariablen (item) gelesen. 
v-for="item in dataList"，这时候数据列表（dataList）中的每一项数据就会在遍历过程中逐一被迭代变量（item）说读取。
当我们需要同时获取列表值及其在列表中的索引时，可以这样写：v-for="( item,index ) in dataList"，这时候数据列表（dataList）在遍历过程中，每一项数据的值会被item变量读取，而每一项数据的索引会被index变量读取。

<p>最后需要说明的是，对于<p id="done">元素本身，我使用了v-if指令，它的效果与之前的v-show指令基本相同，唯一的区别是：v-if指令会直接在 DOM 树上增加或删除其所在的元素节点，而v-show指令则是单纯通过其所在元素的style属性隐藏或显示该元素而已。在执行效率上，v-show指令要更高效一些。在这里，我们设置了当doneList列表中没有数据时，程序就直接将<p id="done">元素从页面中移除，反之则在页面中添加该元素。下面来看一下02_toDoList
Wenn wir den Listenwert und seinen Index gleichzeitig in der Liste abrufen müssen<p>, können wir so schreiben: v-for="(item,index) in dataList" Code>, zu diesem Zeitpunkt Während des Durchlaufprozesses der Datenliste (<code>dataList) wird der Wert jedes Datenelements von der Variablen item und dem Index gelesen Jedes Datenelement wird von der index Variable gelesen. Als letztes ist noch zu beachten, dass ich für das <p id="done">-Element selbst den v-ifverwendet habe >-Anweisung, ihre Wirkung ist im Grunde die gleiche wie die vorherige v-show-Anweisung. Der einzige Unterschied besteht darin, dass die v-if-Anweisung das Element direkt dort hinzufügt oder löscht befindet sich im DOM-Baumknoten, und der Befehl v-show blendet das Element einfach über das Attribut style des Elements aus, in dem es sich befindet. Im Hinblick auf die Ausführungseffizienz ist der Befehl v-show effizienter. Hier legen wir fest, dass das Programm das Element <p id="done"> direkt von der Seite entfernt, wenn keine Daten in der Liste doneList vorhanden sind. und umgekehrt. Fügen Sie dann das Element zur Seite hinzu. Werfen wir einen Blick auf die Wirkung der Ausführung des Programms 02_toDoList: 
<p> Weitere verwandte kostenlose Lerninhalte: Javascript
 (Video) 🎜🎜🎜Das obige ist der detaillierte Inhalt vonVue.js Learning 2: Datengesteuerte Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!