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

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

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

{{ }}

// 定义一个简单的响应式对象
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>
    `
  }
}

v-bind

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

属性。 image が変更されると、src も同時に更新されます。 3. バインディング HTMLバインディング 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 サイトの他の関連記事を参照してください。