はじめに
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 サイトの他の関連記事を参照してください。