Vue インスタンス オブジェクトの共通プロパティとメソッドについて話しましょう

Vue.js は、データ駆動型でコンポーネント化されたビュー機能を実装できるフロントエンド フレームワークです。 Vue.js アプリケーションでは、各 Vue インスタンス オブジェクトに独自のプロパティとメソッドがあり、これらは Vue 開発において非常に重要です。この記事では、Vue インスタンス オブジェクトの共通プロパティとメソッドを紹介します。

Vue インスタンス オブジェクトのプロパティ

data

各 Vue インスタンス オブジェクトには、Vue にデータを保存するためのルート オブジェクトである data プロパティが必要です。インスタンス オブジェクト。これは、Vue のデータ駆動型実装の中核となる側面の 1 つです。たとえば、次のように Vue インスタンスを定義します。

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

上記の Vue インスタンスでは、データ オブジェクトが定義され、文字列 'Hello World!' が初期化されます。このメッセージ属性は Vue テンプレートで使用できます。

props

propsプロパティは、親コンポーネントからデータを受け取る方法です。これは、Vue コンポーネント インスタンス オブジェクトのプロパティであり、パラメータを渡すときに自動的にパラメータを渡すために使用されます。コンポーネントを定義します。コンポーネントが別のコンポーネント内で定義されている場合、props を使用して親コンポーネントから子コンポーネントにデータを渡すことができます。例:

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{message}}</div>'
})

var vm = new Vue({
  el: '#app',
  data: {
    parentMessage: 'Hello World!'
  }
})

<div id="app">
  <child-component :message="parentMessage"></child-component>
</div>

上記の例では、child-component という名前のコンポーネントを作成しました。このコンポーネントには props 属性があり、message 属性という名前のコンポーネントが定義されています。親コンポーネントで message 属性をバインドすることにより、親コンポーネントはカスタマイズされた子コンポーネントにデータを渡すことができ、そのデータを使用して子コンポーネントのテンプレートをカスタマイズできます。

computed

computedプロパティは、Vue インスタンス オブジェクトの計算プロパティです。テンプレートで使用されるデータを他のデータの変更に基づいて変更する必要がある場合、計算プロパティを使用して計算プロパティを作成できます。例:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

上の例では、計算プロパティ reversedMessage を定義しました。これは、message 属性の値を反転することによって取得されます。メッセージが変更されると、計算されたプロパティも変更されます。

methods

Vue インスタンス オブジェクトの methods プロパティには、Vue インスタンス オブジェクトで関数として定義される再利用可能なメソッドが含まれています。 Vue インスタンス オブジェクトが動的イベントを処理する必要がある場合は、methods 属性を使用できます。例:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

上の例では、message 属性の値を反転する reverseMessage メソッドを定義しました。このメソッドは、Vue テンプレートの v-on ディレクティブを通じて呼び出すことができます。

watch

#watchプロパティは、Vue インスタンス オブジェクト内のデータの変更を監視するために使用されます。 Vue インスタンス オブジェクト内の監視対象データが変化すると、watch 属性によって関数が自動的に実行されます。例:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  watch: {
    message: function(val) {
      console.log('message changed to', val)
    }
  }
})

上記の例では、監視属性を定義しました。メッセージ属性が変更されると監視され、変更された値をコンソールに出力するために監視属性のメソッドが実行されます。 。

Vue インスタンス オブジェクト メソッド

$watch

インスタンス メソッド$watch** は、Vue インスタンス オブジェクト内のデータの変更を監視するために使用されます。 Vue インスタンス オブジェクト内の監視データが変更されると、**$watch メソッドが関数を自動的に実行します。例:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})

vm.$watch('message', function(val) {
  console.log('message changed to', val)
})

上記の例では、$watch メソッドを使用してメッセージ属性の変更を監視し、変更されたときに情報を出力します。

$on

$on メソッドは、Vue インスタンス オブジェクトにイベント リスナーを登録するために使用されます。例:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})

vm.$on('message-changed', function(val) {
  console.log('message changed to', val)
})

上記の例では、$on メソッドを使用して message-changed という名前のイベントを Vue インスタンス オブジェクトに登録します。メッセージ属性が変更されると、イベント。

$emit

$emit メソッドは、Vue インスタンス オブジェクトでイベントをトリガーするために使用されます。例:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})

vm.$on('message-changed', function(val) {
  console.log('message changed to', val)
})

vm.$emit('message-changed', 'Hello World!')

上の例では、$emit メソッドを使用して message-changed という名前のイベントをトリガーし、イベントのパラメーターを Hello World!# に設定します。 ##。

$nextTick

$nextTick メソッドは、Vue インスタンス オブジェクトの DOM が更新された後にコールバックを実行するために使用されます。例:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})

vm.$nextTick(function() {
  console.log('DOM updated')
})

上の例では、$nextTick メソッドを使用して、Vue インスタンス オブジェクトの DOM が更新された後にコールバックを実行します。

概要

Vue インスタンス オブジェクトは、Vue 開発において非常に重要な概念です。Vue インスタンス オブジェクトを作成するときは、そのプロパティとメソッドを理解する必要があります。この記事では、data、props、computed、method、watch、$watch、$on、$emit、$nextTick などの Vue インスタンス オブジェクトの共通プロパティとメソッドを簡単に紹介します。これらのプロパティとメソッドにより、Vue 開発はより柔軟で便利になります。

以上がVue インスタンス オブジェクトの共通プロパティとメソッドについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。