vue の操作データとメソッドについての詳細なチャット

Vue は、最新の Web 開発で最も人気のある JavaScript フレームワークの 1 つであり、これを使用すると、開発効率とメンテナンスが大幅に向上し、一部の複雑なタスクを大幅に簡素化できます。 Vue の中核はデータ駆動型であり、データは Vue によって管理されます。 Vue には、プロパティとリアクティブ プロパティという 2 種類のデータがあります。プロパティはオブジェクト内の 1 つ以上の値を指し、リアクティブ プロパティは、変更されたときにすぐに反応できるプロパティを指します。すべてのプロパティはバインドされています。その見解。同時に、Vue はデータを操作するためのメソッドも多数提供しており、これらのメソッドはオブジェクトや配列などの複雑なデータ構造を簡単に処理できるため、データの保守をより柔軟かつ効率的に行うことができます。

1. プロパティ

Vue のプロパティは、オブジェクト内の 1 つ以上の値です (例:

var vm = new Vue({
  data: {
    message: 'Hello Vue!'
  }
})

上記のコードでは、 Visit # を渡すことができます) ##vm.message を使用して Hello Vue! を取得します。Vue では、$data メソッドを通じてインスタンス内のすべての属性値を取得することもできます。例：

console.log(vm.$data) // 输出 {message: "Hello Vue!"}

また、オブジェクトの属性値を設定する際には、いくつかの詳細に注意する必要があります。Vue では、オブジェクトの属性値を直接変更することはできません。代わりに、次のような Vue 自体が提供するメソッドを使用する必要があります:

vm.message = 'Hello World!' // 不会修改message的值
vm.$set(vm.obj, 'newProp', 123) // 增加一个名为newProp的属性并设置值为123
vm.$delete(vm.obj, 'propToDelete') // 删除一个名为propToDelete的属性

2. レスポンシブ プロパティ

リアクティブ プロパティ (リアクティブ プロパティ) は、バインドされているすべてのビューへの変更を即座に反映できるプロパティです。データが変更されたときにそれに反映されます。 Vue のレスポンシブ プロパティの場合、Vue が提供する

Vue.observable() メソッドを使用して、追跡するデータをパラメータとして渡す必要があります。たとえば、次のようになります。たとえば、reactiveData の message または count 属性を変更すると、setState などのメソッドを使用せずに、変更内容がすぐに App コンポーネントに同期されます。

3. データ バインディング

データ バインディングは Vue の中核機能であり、データ バインディングを通じてビューとデータを接続し、より効率的で便利な開発方法を提供します。 Vue では、データ バインディングは、補間、バインディング式、バインディング HTML の 3 つの方法に分類できます。

1. 補間

補間は、DOM に変数を挿入する簡単で便利な方法です。補間では、DOM に表示されるデータを挿入できます。補間式は、2 セットの補間記号

{{ }}

の間に配置されます。例:

// 定义一个简单的响应式对象
var reactiveData = Vue.observable({
  message: 'Hello Vue!',
  count: 0
})

// 修改响应式对象中的值
reactiveData.message = 'Hello World!'
reactiveData.count++

// 在函数组件中使用reactiveData
var App = {
  render() {
    return `
      <div>
        <p>${reactiveData.message}</p>
        <p>${reactiveData.count}</p>
      </div>
    `
  }
}

When メッセージ属性の値時間が変更されると、それに応じて DOM 内で更新されます。 2. バインディング式

バインディング式では、DOM 属性に変数を挿入できます。バインディング式は、ディレクティブ

v-bind

を使用して実行されます。例:

<div>{{ message }}</div>

上記の例では、image 属性にあるデータをバインドします。 ##src

属性。 image が変更されると、src も同時に更新されます。 3. バインディング HTMLバインディング HTML では、

v-html

命令を通じて HTML コードを DOM に挿入できます。これは非常に強力な機能ですが、注意しないとクロスサイト スクリプティング (XSS) 攻撃につながる可能性があるため、あまり安全ではありません。 Vue では、次のコードを使用してユーザー入力をフィルタリングできます:

<img v-bind:src="image" />

4. メソッド Vue では、データを便利に操作するためにいくつかのメソッドが提供されており、以下にリストします。 :

1、$set および $delete

Vue では、オブジェクトのプロパティを直接変更してもビューの更新がトリガーされないため、$set メソッドを使用する必要があります。新しいプロパティを追加し、ビューの更新をトリガーします。$delete メソッドを使用してプロパティを削除することもできます (例:

<div v-html="$sanitize(html)"></div>

2, $nextTick

Vue ライフ フック関数のデータを変更する)の場合、対応する DOM 操作を実行するには、Vue が DOM をレンダリングして更新するまで待つ必要があります。 Vue が DOM をレンダリングした後に DOM 情報を取得する必要がある場合は、$nextTick を使用する必要があります。例:

vm = new Vue({
  data: {
    a: 1
  }
})

// `vm.a` 是响应式的
vm.$set(vm, 'b', 2) // 该值是响应式的
vm.$delete(vm, 'a') // `vm.a` 不再是响应式的

3、watch

watch はデータを監視し、対応する操作を実行できます。例:

mounted() {
  this.$nextTick(() => {
    // DOM 渲染完之后执行的代码

  })
}

上記のコードはメッセージ属性をリッスンし、メッセージ属性が変更されたときにいくつかの操作を実行できます。

概要

この記事では、Vue のデータとメソッドを紹介します。プロパティと反応性は Vue の中核部分であり、データ バインディングは Vue のもう 1 つの重要な部分です。また、いくつかの一般的なメソッドもリストされています。データの操作。時代の変化とともに、Vue は更新され、反復され続けており、Vue を使用する開発者がますます増えており、Vue の未来はますます良くなると信じています。

以上がvue の操作データとメソッドについての詳細なチャットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。