Vue.js 学習 2: データ駆動型開発-Vue.js-php.cn

Vue.js チュートリアルコラムでは、Vue.js 学習パート 2 のデータ駆動型開発について紹介します。

Vue.js 学習 2: データ駆動型開発

Vue.js フレームワークでは、HTML ページ要素を操作する方法は、ネイティブ JavaScript インターフェイスほど直接的ではなく、最初に一連の同様の HTML に埋め込まれます。通常のタグ属性の Vue ディレクティブ属性にデータをバインドし、これらのバインドされたデータを JavaScript コードで変更することで、ページ要素の表示モードとコンテンツを変更します。プログラミング手法の観点から、私たちは通常、このようにデータ内容の変更を利用してプログラム全体の業務運営を推進する手法を「データ駆動開発」と呼んでいます。ノートのこの部分では、データ駆動型開発手法を使用してデータバインディングとイベント応答を完了し、ページ要素や CSS スタイルの制御などの基本的な機能を実現する方法を記録します。

データバインディング

前の 01_sayHello プログラムでは、<h1> タグのテンプレート構文を使用して、データの名前をバインドします。 sayHello のこのテンプレート構文は、実際には v-text 命令の糖衣構文です。つまり、<h1> タグのより標準化された構文は次のようになります。

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

ログイン後にコピー

HTML タグを記述する従来の習慣を考慮すると、{{ data_name }} # を使用してください。 ## このようなテンプレートタグの方が快適です。もちろん、v-text ディレクティブは、現在の要素ラベルの下にテキストコンテンツを設定します。ラベル自体の属性にデータをバインドしたい場合は、v-bind# を使用する必要があります。 ## ディレクティブ。具体的な構文は、設定するラベル属性名の前に v-bind: プレフィックスを追加することです。たとえば、データを <img> タグの src 属性にバインドする場合は、次のように実行できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><img v-bind:src="vueLogo" style="width:200px"></pre><div class="contentsignin">ログイン後にコピー</div></div>Also,

v-bind

ディレクティブには省略形もあり、データがバインドされるラベル属性名の前に : プレフィックスを追加するだけです。前回の 01_sayHello プログラムでは、このフォームを使用しました。ページ要素にデータをバインドした後、対応する JavaScript スクリプトで Vue インスタンスを作成できます。これは、01_sayHello プログラムで使用した main.js ファイルです。。この Vue インスタンスオブジェクトでは、少なくとも次の 2 つのメンバーを定義する必要があります:

elMember : このメンバーは、に対応する要素コンテナを設定するために使用されます。現在の Vue インスタンス。通常は
要素です。場合によっては、<header>、<footer># になることもあります。 ## および HTML5 によって提供されるその他のコンテナークラス。このメンバーの値には、#ID、.CLASSNAME などの CSS セレクター構文に準拠する任意の文字列を指定できます。
Member: このメンバーは、ページ要素にバインドされたデータを設定するために使用され、その値自体も JSON 形式のオブジェクトです。各メンバーは、ページ要素にバインドされたオブジェクトに対応します。たとえば、前の 01_sayHello プログラムでは、2 つのデータ sayHello と vueLogo をバインドしました。 Vue オブジェクトの data メンバーに対応する値を設定します。 イベント処理

もちろん、

01_sayHello

プログラムは、現時点では一方向のデータ表示ビジネスにすぎません。インタラクティブにしたい場合は、イベントをページ要素にバインドする必要もあります。 Vue.js フレームワークでイベントをバインドするには、まず

v-on ディレクティブを通じてターゲット要素タグのイベントハンドラーを登録する必要があります。 ##01_sayHello プログラム <img> 要素を表示するかどうかを制御するには、プログラムの index.htm コードを次のように変更します。




    
    
    
    
    
    你好，Vue.js


    
        <h1> {{ sayHello }}

ログイン後にコピー

ここでは主に以下の修正を行いました。 まず、

<img>## に

v-show

ディレクティブを追加します。 # タグ。ブール型データ (つまり、ここでは

) をバインドして、ラベルが配置されている場所にラベルを表示するかどうかを決定するために使用できます。次に、新しいボタンラベルがページに追加され、v-bind ディレクティブを使用してラベルの value 属性が設定されます。この属性は、
の値に基づいて異なるテキストを表示する条件式です。最後に、v-on コマンド (@ はコマンドの
プレフィックスの省略形です) を使用して、新しいボタンこのラベルは、toggleShow という名前のクリックイベントハンドラーを登録します。 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;
        }
    }
});
```
ログイン後にコピー

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

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

用户输入

对于用户来说，除了触发事件之外，允许用户在运行时输入具体的数据也是一个应用程序必不可少的一项功能。下面将通过编写一个"待办事项"的程序来学习如何使用 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>

ログイン後にコピー

接下来，我会在同一目录下再创建一个名为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);
                  }
                }
    }
});

ログイン後にコピー

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

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

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

リスト内の値をトラバースする必要があるだけの場合は、次のように記述できます: v-for="item in dataList"データリスト ( dataList の各データ項目) は、走査プロセス中に反復変数 (item) によって 1 つずつ読み取られます。
リスト値とリスト内のインデックスを同時に取得する必要がある場合は、次のように記述できます: v-for="(item,index) in dataList"、この時点では、データリスト (dataList) の走査プロセス中に、データの各項目の値が item 変数によって読み取られます。データの各項目のインデックスは index変数の読み取りになります。

最後に注意すべき点は、

<p id="done"> 要素自体に v-if ディレクティブを使用したことです。 , この効果は、基本的に前の v-show 命令と同じです。唯一の違いは、v-if 命令は、配置されている要素ノードを直接追加または削除することです。 ##v-show コマンドは、要素が配置されている要素の style 属性を使用して要素を非表示または表示するだけです。実行効率の点では、v-show コマンドの方が効率的です。ここでは、doneList リストにデータがない場合、プログラムは <p id="done"> 要素をページから直接削除し、その逆を行うように設定します。この要素をページに追加します。 02_toDoList プログラム操作の効果を見てみましょう: