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

ホームページ

ウェブフロントエンド

Vue.js

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

coldplay.xixi

Oct 13, 2020 am 10:51 AM

vue.js

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

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

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

データバインディング

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

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

HTML タグを記述する従来の習慣を考慮すると、{{ data_name }} # を使用してください。 ## このようなテンプレートタグの方が快適です。もちろん、v-text ディレクティブは、現在の要素ラベルの下にテキストコンテンツを設定します。ラベル自体の属性にデータをバインドしたい場合は、v-bind# を使用する必要があります。 ## ディレクティブ。具体的な構文は、設定するラベル属性名の前に v-bind: プレフィックスを追加することです。たとえば、データを <img src="/static/imghwm/default1.png" data-src="vueLogo" class="lazy" alt="Vue.js 学習 2: データ駆動型開発" > タグの src 属性にバインドする場合は、次のように実行できます: <pre class='brush:php;toolbar:false;'><img src="/static/imghwm/default1.png" data-src="vueLogo" class="lazy" v-bind: style="max-width:90%" alt="Vue.js 学習 2: データ駆動型開発" ></pre>Also,

v-bind

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

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

もちろん、

01_sayHello

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

v-on ディレクティブを通じてターゲット要素タグのイベントハンドラーを登録する必要があります。 ##01_sayHello プログラム <img src="/static/imghwm/default1.png" data-src="../node_modules/vue/dist/vue.js" class="lazy" alt="Vue.js 学習 2: データ駆動型開発" > 要素を表示するかどうかを制御するには、プログラムの index.htm コードを次のように変更します。




    
    
    
    
    
    你好，Vue.js


    
        
 {{ sayHello }}

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

<img src="/static/imghwm/default1.png" data-src="../node_modules/vue/dist/vue.js" class="lazy" alt="Vue.js 学習 2: データ駆動型開発" >## に

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" ></script>
    <script defer="defer" src="js/main.js"></script>
    <title>待办事项</title>
</head>
<body>
    <p id="app">
        <h1 id="待办事项">待办事项</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 id="已完成事项">已完成事项</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"></p>元素中用v-for指令创建了一系列<input type="checkbox">，它们都提供v-model指令将自己双向绑定到了另一个名为doneList数据列表上。在 Vue.js 框架中，如果一组复选框元素被v-model指令绑定到了一个列表类型的数据上，那么当这些复选框被选上时，它们的value属性值就会被自动添加到这个被绑定的数据列表中。

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

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

最後に注意すべき点は、

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

# その他の関連する無料学習:

javascript(ビデオ)

以上がVue.js 学習 2: データ駆動型開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はcnblogsで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Vue.js Virtual Domが変更を検出するとどうなりますか？May 14, 2025 am 12:12 AM

henthevuue.jsvirtualdomdetectsachange、itupdatesthevirtualdom、diffsit、およびAppliesminimalchangestothestotoreldom。

Vue.jsの仮想Domを実際のDomの鏡と考えるのはどれほど正確ですか？May 13, 2025 pm 04:05 PM

Vue.jsのVirtualdomは、実際のDomの鏡であり、正確ではありません。 1.作成と更新：Vue.jsは、コンポーネントの定義に基づいてVirtualdomツリーを作成し、まず状態が変更されたときにVirtualDomを更新します。 2。違いとパッチング：DIFF操作による古い仮想ドームと新しい仮想ドミーの比較、そして最小変更のみを実際のDOMに適用します。 3。効率：VirtualDomは、バッチの更新を許可し、直接DOM操作を削減し、レンダリングプロセスを最適化します。 VirtualDomは、Vue.jsがUIの更新を最適化するための戦略的ツールです。

Vue.js vs. React：スケーラビリティと保守性May 10, 2025 am 12:24 AM

Vue.jsとReactはそれぞれ、スケーラビリティと保守性に独自の利点があります。 1）Vue.jsは使いやすく、小規模プロジェクトに適しています。構成APIは、大規模なプロジェクトの保守性を向上させます。 2）Reactは、フックと仮想DOMがパフォーマンスと保守性を向上させる大規模で複雑なプロジェクトに適していますが、学習曲線は急です。

Vue.jsとReactの未来：傾向と予測May 09, 2025 am 12:12 AM

Vue.jsとReactの将来の傾向と予測は次のとおりです。1）Vue.jsはエンタープライズレベルのアプリケーションで広く使用され、サーバー側のレンダリングおよび静的サイト生成でブレークスルーを行いました。 2）Reactは、サーバーコンポーネントとデータ収集で革新され、並行性モデルをさらに最適化します。

Netflixのフロントエンド：テクノロジースタックに深く潜りますMay 08, 2025 am 12:11 AM

Netflixのフロントエンドテクノロジースタックは、主にReactとReduxに基づいています。 1.反応は、高性能のシングルページアプリケーションを構築するために使用され、コンポーネント開発を通じてコードの再利用性とメンテナンスを改善します。 2。国家管理には、状態の変更が予測可能で追跡可能であることを確認するために、国家管理に使用されます。 3.ツールチェーンには、コードの品質とパフォーマンスを確保するために、Webpack、Babel、Jest、および酵素が含まれています。 4.パフォーマンスの最適化は、ユーザーエクスペリエンスを向上させるためのコードセグメンテーション、怠zyな読み込み、サーバー側のレンダリングを通じて達成されます。

Vue.jsおよびFrontend：インタラクティブなユーザーインターフェイスの構築May 06, 2025 am 12:02 AM

Vue.jsは、非常にインタラクティブなユーザーインターフェイスを構築するのに適したプログレッシブフレームワークです。そのコア機能には、レスポンシブシステム、コンポーネント開発、ルーティング管理が含まれます。 1）レスポンシブシステムは、Object.DefinePropertyまたはプロキシを介したデータ監視を実現し、インターフェイスを自動的に更新します。 2）コンポーネント開発により、インターフェイスを再利用可能なモジュールに分割できます。 3）Vuerouterは、ユーザーエクスペリエンスを向上させるための単一ページアプリケーションをサポートしています。

Vuejsの欠点は何ですか？May 05, 2025 am 12:06 AM

vue.jsの主な欠点には次のものが含まれます。1。エコシステムは比較的新しいものであり、サードパーティのライブラリとツールは他のフレームワークほど豊富ではありません。 2。複雑な関数では、学習曲線が急になります。 3.コミュニティのサポートとリソースは、反応や角度ほど広範ではありません。 4.パフォーマンスの問題は、大規模なアプリケーションで発生する可能性があります。 5。バージョンのアップグレードと互換性の課題が大きくなります。

Netflix：フロントエンドフレームワークを発表しますMay 04, 2025 am 12:16 AM

Netflixは、Reactをフロントエンドフレームワークとして使用します。 1.反応のコンポーネント開発と仮想DOMメカニズムは、パフォーマンスと開発効率を向上させます。 2。WebpackとBabelを使用して、コードの構築と展開を最適化します。 3.パフォーマンスの最適化のために、コードセグメンテーション、サーバー側のレンダリング、キャッシュ戦略を使用します。

See all articles