vueから値を取得する方法

はじめに

Vue.js は、開発者が Web 開発をより簡単に行えるようにする、軽量、柔軟、効率的なフロントエンド フレームワークです。 Vue.js はデータ駆動型でコンポーネント化されており、使いやすいため、初心者にとって最も直接的な利点は、データ バインディングと双方向データ フロー機能です。 Vue.jsでの値の取得は開発において非常に重要な作業ですが、この記事ではVue.jsでの値の取得方法を簡単に紹介します。

1. Vue インスタンスの値を取得する

主に data 属性を通じて Vue インスタンスの値を取得します。 Vue インスタンスでデータ属性を定義し、データをバインドした後、表示に {{ }} 補間式を使用できます。具体的なコードは次のとおりです:

<div id="app">
    <p>{{ message }}</p>
</div>

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

上記のコードでは、Vue をインスタンス化することで Vue インスタンス vm が作成され、マウントされた要素のセレクターを指定するために使用される el 属性を受け取ります。ページ内の ID はアプリの要素です。同時に、vm でデータ属性が定義され、オブジェクトの属性をページのテンプレートにバインドして表示できます。

2. コンポーネントの値を取得する

Vue.js では、コンポーネントは再利用可能な Vue インスタンスであり、抽象概念です。コンポーネントはデータ属性を通じて定義することもできます。

Vue.component('my-component', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<div>{{ count }}</div>'
})

上記のコードでは、Vue コンポーネントを作成し、data 属性を通じてカウント値を定義し、それをテンプレートに表示しました。このコンポーネントを親コンポーネントで使用する場合、props 属性を通じてデータを渡すことができます。コードは次のとおりです:

<my-component :count="6"></my-component>

カウント値を更新する必要がある場合、$emit を通じて変更イベントをトリガーできます。

Vue.component('my-component', {
  props: ['count'],
  template: '<div>{{ count }}</div>',
  methods: {
    updateCount: function () {
      this.$emit('change', this.count + 1)
    }
  }
})

は、上記のコードで updateCount メソッドを定義し、新しい値を渡すために変更イベントを送信します。子コンポーネントは、親コンポーネントからイベントを受け取ると、コードは次のとおりです: 上記コードの

<my-component :count="count" @change="count = $event"></my-component>

@change はイベントの受信方法を定義し、$event は子コンポーネントから渡されるパラメーターを表します。

3. 結論

Vue.js は非常に強力で柔軟なフロントエンド フレームワークです。上で示したように、Vue.js のインスタンスとコンポーネントは、data 属性を通じてバインドされるデータを定義できます。 .データを受け取り、props 属性を通じて新しい値を受け取り、データの双方向バインディングを実現できます。実際には、Vue.js で値を取得する方法に習熟して、より優れた効率的なコードを作成できるようになると思います。

以上がvueから値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。