目次
1.3 Vue.js と他のフロントエンド フレームワークの比較
6.4.2 Vue-Socket.io のインストールと構成
7.1 Vue でコンポーネントを使用するにはどうすればよいですか?
7.2 Vue でデータ バインディングを実行するにはどうすればよいですか?
7.3 Vue で条件付きレンダリングを実行するにはどうすればよいですか?
7.4 Vue でレンダリング リストをループするにはどうすればよいですか?
7.5 Vue でユーザー入力を処理するにはどうすればよいですか?
7.6 Vue で AJAX リクエストを送信するにはどうすればよいですか?
1. Vue.js の概要
1.1 Vue.jsとは
Vue.js は、ユーザー インターフェイスを構築するための軽量で柔軟な JavaScript フレームワークです。MVVM (Model-View-ViewModel) アーキテクチャ パターンを採用し、双方向のデータ バインディングを通じてデータ モデルとビューを関連付けます。Vue.js には簡潔な構文と強力な機能があり、開発者は対話型のフロントエンド アプリケーションをより効率的に構築できます。
1.2 Vue.js の機能と利点
- シンプルで使いやすい: Vue.js の構文は簡潔かつ明確であり、簡単に開始できるため、開発者はすぐに Vue.js を使用してプロジェクトを構築できます。
- 双方向のデータ バインディング: Vue.js は応答性の高いデータ バインディング メカニズムを採用しているため、データの変更をビューに自動的に反映でき、ユーザーの操作をデータ モデルに自動的に更新することもできます。
- コンポーネントベースの開発: Vue.js はアプリケーションを複数の再利用可能なコンポーネントに分割し、コード構造を明確にして保守性を高め、開発効率を向上させます。
- 軽量で効率的: Vue.js はサイズが小さく、読み込み速度が速く、スムーズなユーザー エクスペリエンスを提供する高性能のレンダリング機能を備えています。
- 豊富なエコシステム: Vue.js には大規模なコミュニティ サポートがあり、多くのプラグインやツールから選択でき、開発者は豊富なエコシステムによりアプリケーションをより迅速に構築できます。
1.3 Vue.js と他のフロントエンド フレームワークの比較
- Vue.js と React: Vue.js と React はどちらも人気のあるフロントエンド フレームワークであり、どちらも仮想 DOM とコンポーネントベースの開発手法を採用しています。Vue.js はシンプルで学習しやすく、小規模および中規模のプロジェクトに適していますが、React は大規模なプロジェクトや複雑なアプリケーションに適しています。
- Vue.js と Angular: Vue.js と Angular はどちらも人気のあるフロントエンド フレームワークであり、その設計思想と使用法には特定の違いがあります。Vue.js は軽量で学習曲線が短いのに対し、Angular はより完全で強力で、大規模なエンタープライズ レベルのアプリケーションに適しています。Vue.js は、フロントエンド開発の分野で幅広い用途と活発なコミュニティのサポートを備えた、強力で使いやすいフロントエンド フレームワークです。次の学習ノートでは、Vue.js の使用スキルとベスト プラクティスをすぐに習得できるように、Vue.js のさまざまな側面を詳しく調べます。
2.Vue.jsの基本
2.1 Vueインスタンス
Vue インスタンスは Vue.js アプリケーションのルート インスタンスであり、Vue クラスをインスタンス化することによって作成されます。Vue インスタンスを作成するときに、オプション オブジェクトを渡してインスタンスの動作とプロパティを構成できます。
// 创建Vue实例
var vm = new Vue({
// 选项
el: '#app', // 指定挂载的元素
data: { // 数据
message: 'Hello Vue!'
},
methods: { // 方法
greet: function() {
alert(this.message);
}
}
});2.2 テンプレートの構文
Vue.js は、HTML ベースのテンプレート構文を使用してデータを DOM にバインドします。二重中括弧補間式とディレクティブを使用して、データをテンプレートに動的に表示できます。
<div id="app">
<p>{
{ message }}</p>
</div>2.3 計算されたプロパティ
計算プロパティは、データを計算して処理し、新しい値を返すために使用される Vue インスタンスの特別なプロパティです。計算されたプロパティの値はキャッシュされ、依存データが変更された場合にのみ再計算されます。
var vm = new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
});2.4 リスナー
Vue.js は、watchプロパティ。
var vm = new Vue({
data: {
message: 'Hello Vue!'
},
watch: {
message: function(newValue, oldValue) {
console.log('message changed from ' + oldValue + ' to ' + newValue);
}
}
});2.5 条件付きレンダリングとリストレンダリング
Vue.js は、条件付きレンダリングとリスト レンダリング関数を実装するためのいくつかの命令を提供します。このディレクティブは、v-if式の値v-forに配列またはオブジェクトを走査して、対応する要素をレンダリングするために使用されます。
<div id="app">
<p v-if="showMessage">{
{ message }}</p>
<ul>
<li v-for="item in items">{
{ item }}</li>
</ul>
</div>2.6 イベント処理
Vue.js は、DOM イベントをリッスンし、イベントがトリガーされたときに対応するメソッドを実行するv-onディレクティブを。イベント タイプはディレクティブのパラメーターを介して渡すことができ、修飾子を使用してイベントの動作を変更できます。
<div id="app">
<button v-on:click="greet">Click me</button>
</div>var vm = new Vue({
methods: {
greet: function() {
alert('Hello Vue!');
}
}
});2.7 フォーム処理
Vue.js は、フォーム入力とバインディングを処理するためのいくつかの命令を提供します。命令はv-model双方向のデータ バインディングを実装し、フォーム入力をデータ モデルに関連付けることができます。
<div id="app">
<input v-model="message" type="text">
<p>{
{ message }}</p>
</div>var vm = new Vue({
data: {
message: ''
}
});2.8 コンポーネントの開発
Vue.js はコンポーネント開発をサポートし、アプリケーションを複数の再利用可能なコンポーネントに分割します。Vue.componentメソッドを通じてコンポーネントを定義し、カスタム タグを使用してテンプレート内のコンポーネントを参照します。
<div id="app">
<my-component></my-component>
</div>Vue.component('my-component', {
template: '<p>This is my component</p>'
});
var vm = new Vue({
el: '#app'
});上記は Vue.js の基本部分の内容であり、Vue インスタンス、テンプレート構文、計算プロパティ、リスナー、条件付きレンダリングとリスト レンダリング、イベント処理、フォーム処理、コンポーネント開発などのトピックをカバーしています。これらの基本知識は Vue.js の学習と使用の基礎となり、その後の学習のための強固な基盤を築きます。次の学習ノートでは、引き続き Vue.js のさまざまな側面を詳しく調査していきます。
3. Vue コンポーネント
3.1 Vue コンポーネントとは
Vue コンポーネントは Vue.js の中核概念であり、アプリケーションを複数の独立した再利用可能な部分に分割できます。コンポーネントは、テンプレート、データ、メソッド、スタイルなどで構成されます。コンポーネントは複数回使用でき、他のコンポーネントにネストすることもできます。
3.2 コンポーネントの作成
Vue でコンポーネントを作成するには、グローバル登録とローカル登録の 2 つの方法があります。
3.2.1 グローバル登録
グローバルに登録されたコンポーネントは、アプリケーション内のどこでも使用できます。コンポーネントは、Vue.componentを。
Vue.component('my-component', {
template: '<p>This is my component</p>'
});3.2.2 部分登録
ローカルに登録されたコンポーネントは、指定された Vue インスタンスでのみ使用できます。コンポーネントは、Vue インスタンスのcomponentsオプション。
var vm = new Vue({
el: '#app',
components: {
'my-component': {
template: '<p>This is my component</p>'
}
}
});3.3 コンポーネントの使用
コンポーネントを使用するには、テンプレート内でコンポーネントのタグを参照する必要があります。カスタム タグを使用してコンポーネントを参照し、コンポーネントのプロパティ値をコンポーネントに渡すことができます。
<div id="app">
<my-component message="Hello Vue!"></my-component>
</div>3.4 コンポーネントの通信
Vue では、コンポーネント間の通信は、親子コンポーネント通信、兄弟コンポーネント通信、およびクロスレベル コンポーネント通信を通じて実現できます。
3.4.1 親子コンポーネントの通信
親子コンポーネント通信は、最も一般的なコンポーネント通信方法です。親コンポーネントは属性の形式で子コンポーネントにデータを渡すことができ、子コンポーネントはpropsオプションを
Vue.component('child-component', {
props: ['message'],
template: '<p>{
{ message }}</p>'
});
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});<div id="app">
<child-component :message="message"></child-component>
</div>3.4.2 兄弟コンポーネントの通信
兄弟コンポーネント通信とは、同じ親コンポーネントの下にある複数の子コンポーネント間の通信を指します。兄弟コンポーネント間の通信は、event busを介して。
var bus = new Vue();
Vue.component('component-a', {
template: '<button @click="sendMessage">Send Message</button>',
methods: {
sendMessage: function() {
bus.$emit('message', 'Hello from Component A');
}
}
});
Vue.component('component-b', {
data: function() {
return {
receivedMessage: ''
};
},
created: function() {
var self = this;
bus.$on('message', function(message) {
self.receivedMessage = message;
});
},
template: '<p>{
{ receivedMessage }}</p>'
});
var vm = new Vue({
el: '#app'
});<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>3.4.3 クロスレベルコンポーネント通信
クロスレベルコンポーネント通信とは、同じ親子関係を持たないコンポーネント間の通信を指します。クロスレベルのコンポーネント間の通信は、provideおよび を介して実現できます。inject
var parentComponent = {
provide: {
message: 'Hello from Parent Component'
},
template: '<child-component></child-component>'
};
var childComponent = {
inject: ['message'],
template: '<p>{
{ message }}</p>'
};
var vm = new Vue({
el: '#app',
components: {
'parent-component': parentComponent,
'child-component': childComponent
}
});<div id="app">
<parent-component></parent-component>
</div>3.5 コンポーネントのライフサイクル
Vue コンポーネントには、作成、マウント、更新から破棄までの完全なライフサイクルがあります。コンポーネントのライフサイクル中、フック関数を通じて対応する操作を実行できます。
Vue.component('my-component', {
template: '<p>{
{ message }}</p>',
data: function() {
return {
message: 'Hello Vue!'
};
},
created: function() {
console.log('Component created');
},
mounted: function() {
console.log('Component mounted');
},
updated: function() {
console.log('Component updated');
},
destroyed: function() {
console.log('Component destroyed');
}
});
var vm = new Vue({
el: '#app'
});上記は Vue コンポーネント部分の内容で、コンポーネントの作成、使用、通信、ライフサイクルなどのトピックをカバーしています。Vue コンポーネントの使用をマスターすると、コンポーネント開発をより適切に実行でき、コードの保守性と再利用性が向上します。次の学習ノートでは、Vue.js のその他の高度な機能と使用法を引き続き掘り下げていきます。
4. Vueルーティング
4.1 Vue ルーティングとは
Vue routing は、シングルページ アプリケーション (SPA) を構築するために Vue.js が公式に推奨しているプラグインで、フロントエンド ページのジャンプや切り替えを実現することができ、ユーザーは従来のマルチページ アプリケーションと同様のページ切り替えを楽しむことができます。 Web 閲覧時のデータ転送やページ間のステータス管理も容易になります。
4.2 Vue ルーティングのインストールと構成
Vue ルーティングを使用するには、まず npm または CDN を通じて Vue Router ライブラリを導入する必要があります。プロジェクトにルーティング ファイルを作成し、Vue インスタンスでルーティングを構成します。
4.2.1 Vueルーターのインストール
npm 経由で Vue Router をインストールします。
npm install vue-router4.2.2 ルーティングの構成
プロジェクト内にルーティング ファイル (router.js など) を作成し、ファイル内でルーティング情報を構成します。
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
];
const router = new VueRouter({
routes
});
export default router;ルーティング ファイルを Vue インスタンスに導入し、ルーティングを構成します。
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
el: '#app',
router,
render: h => h(App)
});4.3 ルーティングの基本的な使用法
Vue ルーティングを使用して<router-link>、<router-view>コンポーネントを介したページ ジャンプとレンダリングを実現します。
4.3.1<router-link>コンポーネント
コンポーネント<router-link>はページ ジャンプに使用されるリンクであり、クリックするとルーティング ジャンプをトリガーする<a>label。
<router-link to="/about">About</router-link>4.3.2<router-view>コンポーネント
コンポーネントは、<router-view>現在のルートと一致するコンポーネントのコンテンツをレンダリングするために使用されます。
<router-view></router-view>4.4 ルーティングパラメータと動的ルーティング
特定のルールに一致する URL と一致するように、プレースホルダーを介してルート パラメーターを定義できます。ルーティング設定でパラメータを定義する:ために。
const routes = [
{
path: '/user/:id',
component: User
}
];コンポーネント$route.params内。
export default {
created() {
console.log(this.$route.params.id);
}
}4.5 ネストされたルーティング
ネストされたルーティングにより、複数のコンポーネントをネストされたページ構造に結合できます。サルートは、ルーティング設定のchildrenオプション。
const routes = [
{
path: '/user',
component: User,
children: [
{
path: '',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
];親コンポーネントで使用して<router-view>、子ルートのコンテンツをレンダリングします。
<router-view></router-view>4.6 ナビゲーションガード
ナビゲーション ガードは、ルート ジャンプの前後にロジックを実行するために Vue ルーティングによって提供されるメカニズムです。一般的に使用されるナビゲーション ガードにはbeforeEach、、、beforeResolveおよび が含まれますafterEach。
router.beforeEach((to, from, next) => {
// 在路由跳转前执行的逻辑
next();
});
router.beforeResolve((to, from, next) => {
// 在路由跳转前解析完异步组件后执行的逻辑
next();
});
router.afterEach((to, from) => {
// 在路由跳转后执行的逻辑
});上記は Vue ルーティング部分の内容で、ルーティングのインストールと構成、基本的な使用法、パラメーターの受け渡し、ネストされたルーティング、ナビゲーション ガードなどのトピックをカバーしています。Vue ルーティングの使用をマスターすると、単一ページ アプリケーションをより適切に開発し、豊かなページ切り替え効果とインタラクティブなエクスペリエンスを実現できます。次の学習ノートでは、Vue.js の他の機能と使用法についてさらに詳しく学習していきます。
5. Vueの状態管理
5.1 Vue の状態管理とは
Vue 状態管理とは、異なるコンポーネント間でのデータ共有を促進し、データの統一管理を実現するために、アプリケーションのデータとステータスを集中管理および制御することを指します。大規模なアプリケーションでは、コンポーネントの数と複雑さが増すにつれて、状態管理が特に重要になり、アプリケーションのデータ フローをより適切に整理して維持するのに役立ちます。
5.2 Vuex
Vuex は、状態管理用に Vue.js によって公式に推奨されているライブラリであり、Flux と Redux の設計アイデアを活用し、Vue の応答メカニズムと組み合わせて、アプリケーションの状態を管理するための簡潔かつ効率的な方法を提供します。Vuex は、アプリケーション全体の状態を単一の状態ツリーに保存し、状態を変更および取得するための突然変異とアクションを定義します。
5.3 Vuex のインストールと構成
Vuex を使用するには、まず npm または CDN 経由で Vuex ライブラリをインポートする必要があります。プロジェクト内にストア フォルダーを作成し、その中に Vuex 構成ファイルとしてindex.js ファイルを作成します。
5.3.1 Vuex のインストール
npm 経由で Vuex をインストールします。
npm install vuex5.3.2 Vuex の構成
store/index.js ファイルで Vuex を構成します。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync(context) {
setTimeout(() => {
context.commit('increment');
}, 1000);
}
},
getters: {
doubleCount(state) {
return state.count * 2;
}
}
});
export default store;5.4 Vuex の使用
ストアを Vue インスタンスに導入し、設定します。
import Vue from 'vue';
import App from './App.vue';
import store from './store';
new Vue({
el: '#app',
store,
render: h => h(App)
});コンポーネントで Vuex の状態とメソッドを使用します。
<template>
<div>
<p>{
{ count }}</p>
<p>{
{ doubleCount }}</p>
<button @click="increment">Increment</button>
<button @click="incrementAsync">Increment Async</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count;
},
doubleCount() {
return this.$store.getters.doubleCount;
}
},
methods: {
increment() {
this.$store.commit('increment');
},
incrementAsync() {
this.$store.dispatch('incrementAsync');
}
}
};
</script>上記の例では、 を使用し$store.state.countて状態の値を取得し、 を使用し$store.getters.doubleCountて計算された属性の値を取得し、 を使用し$store.commit('increment')て突然変異メソッドをトリガーし、 を使用し$store.dispatch('incrementAsync')てアクション メソッドをトリガーします。
5.5 モジュール性
アプリケーションが大規模で複雑になると、Vuex は状態を整理するためのモジュール式の方法を提供します。ストアは複数のモジュールに分割でき、各モジュールには独自の状態、突然変異、アクション、ゲッターがあります。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
};
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
};
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
});コンポーネントでモジュール状態とメソッドを使用します。
<template>
<div>
<p>{
{ count }}</p>
<p>{
{ doubleCount }}</p>
<button @click="increment">Increment</button>
<button @click="incrementAsync">Increment Async</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.a.count; // 访问模块A的状态
},
doubleCount() {
return this.$store.getters['a/doubleCount']; // 访问模块A的计算属性
}
},
methods: {
increment() {
this.$store.commit('a/increment'); // 调用模块A的mutation
},
incrementAsync() {
this.$store.dispatch('a/incrementAsync'); // 调用模块A的action
}
}
};
</script>上記は Vue の状態管理部分の内容で、Vuex のインストールと設定、基本的な使い方、モジュール化などをカバーしています。Vuex の使用をマスターすると、アプリケーションのステータスをより適切に管理および共有し、開発効率とコードの再利用性を向上させることができます。次の学習ノートでは、Vue.js の他の機能と使用法についてさらに詳しく学習していきます。
6. Vue はバックエンドと対話します
6.1 Vue とバックエンドのやり取りとは何ですか?
Web アプリケーションを開発する場合、フロントエンドとバックエンド間のデータのやり取りは非常に重要な部分です。Vue は、AJAX リクエストによるデータの取得、RESTful API を使用したデータの追加、削除、変更、クエリなど、バックエンド データを操作するためのさまざまな方法を提供します。
6.2 AJAX リクエスト
AJAX (Asynchronous JavaScript and XML) は、ページを更新せずにバックエンドとの非同期データ対話を行うためのテクノロジです。Axios ライブラリを Vue で使用して、AJAX リクエストを送信できます。
6.2.1 Axios のインストールと設定
npm 経由で Axios をインストールします。
npm install axiosVue プロジェクトに API フォルダーを作成し、その中に Axios 構成ファイルとしてindex.js ファイルを作成します。api/index.js ファイルで Axios を構成します。
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://api.example.com', // 后端API的基础URL
timeout: 5000 // 请求超时时间
});
export default instance;6.2.2 Axios を使用したリクエストの送信
コンポーネントで Axios を使用してリクエストを送信します。
import api from '../api';
export default {
data() {
return {
users: []
};
},
mounted() {
this.fetchUsers();
},
methods: {
fetchUsers() {
api.get('/users')
.then(response => {
this.users = response.data;
})
.catch(error => {
console.log(error);
});
}
}
};上の例では、 を介して GET リクエストapi.get('/users')を送信し、返されたデータをusersコンポーネントの data プロパティに保存します。
6.3 RESTful API
REST (Representational State Transfer) は、シンプルなルールのセットを使用してリソースの状態と操作を定義する、Web アプリケーションを設計するためのアーキテクチャ スタイルです。データのバックエンドと対話する場合、RESTful API を使用して、リソースの追加、削除、変更、クエリを定義および管理できます。
6.3.1 RESTful APIの定義
RESTful API の設計では、通常、リソースを取得する GET、リソースを作成する POST、リソースを更新する PUT、リソースを削除する DELETE など、さまざまな操作を表すために HTTP メソッドが使用されます。たとえば、ユーザー リソースを操作するために呼び出される/usersRESTful。
- GET /users: すべてのユーザーを取得します
- GET /users/{id}: 指定された ID を持つユーザーを取得します
- POST /users: ユーザーの作成
- PUT /users/{id}: 指定された ID でユーザーを更新します
- DELETE /users/{id}: 指定された ID を持つユーザーを削除します
6.3.2 RESTful APIの使用
データ操作のためにコンポーネントで RESTful API を使用します。
import api from '../api';
export default {
data() {
return {
users: []
};
},
mounted() {
this.fetchUsers();
},
methods: {
fetchUsers() {
api.get('/users')
.then(response => {
this.users = response.data;
})
.catch(error => {
console.log(error);
});
},
createUser(user) {
api.post('/users', user)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
},
updateUser(id, user) {
api.put(`/users/${id}`, user)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
},
deleteUser(id) {
api.delete(`/users/${id}`)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
};上記の例では、すべてのユーザーを取得するapi.get('/users')ために を、新しいユーザーを作成するために を使用し、指定された ID を持つユーザーを更新するために/api.post('/users', user) users/${id} を使用し、削除するために/ users/${id } を使用します。指定された ID を持つユーザー。api.put(, user)api.delete()
6.4 Webソケット
AJAX および RESTful API に加えて、Vue は WebSocket を使用したバックエンドとのリアルタイム双方向通信もサポートします。WebSocket は、単一の TCP 接続を介した全二重通信のプロトコルであり、リアルタイムのデータのプッシュと受信を可能にします。
6.4.1 WebSocketの使用
Vue プロジェクトでは、Vue-Socket.io ライブラリを使用して WebSocket 機能を簡単に統合できます。
6.4.2 Vue-Socket.io のインストールと構成
npm 経由で Vue-Socket.io をインストールします。
npm install vue-socket.iomain.js ファイルで Vue-Socket.io を構成します。
import Vue from 'vue';
import VueSocketIO from 'vue-socket.io';
Vue.use(new VueSocketIO({
debug: true,
connection: 'http://api.example.com' // WebSocket的连接地址
}));6.4.3 コンポーネントでの WebSocket の使用
リアルタイム通信用のコンポーネントで Vue-Socket.io を使用します。
<template>
<div>
<p v-for="message in messages" :key="message.id">{
{ message.text }}</p>
<input v-model="newMessage" type="text">
<button @click="sendMessage">Send</button>
</div>
</template>
<script>
export default {
data() {
return {
messages: [],
newMessage: ''
};
},
mounted() {
this.$socket.on('message', message => {
this.messages.push(message);
});
},
methods: {
sendMessage() {
this.$socket.emit('message', { text: this.newMessage });
this.newMessage = '';
}
}
};
</script>上記の例では、this.$socket.on('message', message => { ... })を介してmessage、受信したメッセージをコンポーネントのmessages配列。テキスト コンテンツを含むオブジェクトを渡して、 をthis.$socket.emit('message', { text: this.newMessage })介してイベントをサーバーに送信します。message
7.Vue の一般的な問題と解決策
7.1 Vue でコンポーネントを使用するにはどうすればよいですか?
コンポーネントの使用は、Vue の中核機能の 1 つです。Vue でコンポーネントを使用するには、まずコンポーネントを定義する必要があります。グローバル コンポーネントは Vue.component() メソッドを使用して定義でき、ローカル コンポーネントは Vue インスタンスのコンポーネント プロパティで定義できます。次に、コンポーネントの名前を使用して、テンプレート内でコンポーネントを参照します。たとえば、グローバル コンポーネントを定義し、それをテンプレートで使用する例を次に示します。
// 定义全局组件
Vue.component('my-component', {
template: '<div>这是我的组件</div>'
})
// 创建Vue实例
new Vue({
el: '#app',
template: '<my-component></my-component>'
})7.2 Vue でデータ バインディングを実行するにはどうすればよいですか?
Vue のデータ バインディングはディレクティブを通じて実装されます。一般的に使用される命令には、v-model、v-bind、および v-on が含まれます。
- v-model ディレクティブは、双方向データ バインディングを実装するために使用され、form 要素の値を Vue インスタンスのデータ属性にバインドします。
- v-bind ディレクティブは、Vue インスタンスのデータ属性を HTML 要素の属性にバインドするために使用されます。
- v-on ディレクティブは、DOM イベントをリッスンし、トリガーされたときに Vue インスタンス内のメソッドを実行するために使用されます。たとえば、v-model、v-bind、および v-on を使用した例を次に示します。
<div id="app">
<input v-model="message"> <!-- 使用v-model实现双向数据绑定 -->
<p v-bind:title="message">鼠标悬停查看绑定的title</p> <!-- 使用v-bind绑定title特性 -->
<button v-on:click="showAlert">点击我弹出警示框</button> <!-- 使用v-on绑定click事件 -->
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
showAlert: function() {
alert('Hello World!');
}
}
})
</script>7.3 Vue で条件付きレンダリングを実行するにはどうすればよいですか?
Vue では、条件付きレンダリングに v-if および v-show 命令を使用できます。
- v-if ディレクティブは、式が true か false に基づいて要素を動的に追加または削除します。式が true の場合、要素は DOM にレンダリングされますが、式が false の場合、要素は DOM にレンダリングされません。
- v-show ディレクティブは、式が true か false に基づいて要素の表示と非表示を切り替えます。式が true の場合、要素は表示されます。式が false の場合、要素は非表示になりますが、DOM にはまだ存在します。たとえば、v-if と v-show を使用した例を次に示します。
<div id="app">
<p v-if="showMessage">这是通过v-if进行条件渲染的文本</p>
<p v-show="showMessage">这是通过v-show进行条件渲染的文本</p>
<button v-on:click="toggleMessage">点击切换文本的显示和隐藏</button>
</div>
<script>
new Vue({
el: '#app',
data: {
showMessage: true
},
methods: {
toggleMessage: function() {
this.showMessage = !this.showMessage;
}
}
})
</script>7.4 Vue でレンダリング リストをループするにはどうすればよいですか?
Vue では、v-for ディレクティブを使用してループ レンダリングを実行できます。v-for ディレクティブは配列またはオブジェクトにバインドでき、配列またはオブジェクトの内容に基づいてループでレンダリングできます。たとえば、v-for を使用した例を次に示します。
<div id="app">
<ul>
<li v-for="item in items">{
{ item }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['Item 1', 'Item 2', 'Item 3']
}
})
</script>7.5 Vue でユーザー入力を処理するにはどうすればよいですか?
Vue では、v-on ディレクティブを使用してユーザー入力イベントをリッスンし、Vue インスタンスでメソッドを実行して処理できます。たとえば、v-on を使用してユーザー入力を処理する例を次に示します。
<div id="app">
<input v-model="message" v-on:input="handleChange">
<p>{
{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
},
methods: {
handleChange: function() {
console.log(this.message);
}
}
})
</script>上記の例では、v-model ディレクティブを使用して双方向データ バインディングが実装され、入力ボックスの値が Vue インスタンスのメッセージ属性に自動的に同期されます。同時に、v-on 命令を使用して入力イベントを監視し、入力ボックスの値が変更されると、handleChange メソッドがトリガーされて入力ボックスの値を出力します。
7.6 Vue で AJAX リクエストを送信するにはどうすればよいですか?
Vue では、Vue の $http プラグインまたはサードパーティの AJAX ライブラリ (axios など) を使用して、AJAX リクエストを送信できます。Vue の $http プラグインを使用する場合は、最初に vue-resource ライブラリをインストールしてインポートする必要があります。次に、Vue インスタンスで、この .$http オブジェクトを使用して AJAX リクエストを送信できます。たとえば、Vue の $http プラグインを使用して AJAX リクエストを送信する例を次に示します。
<div id="app">
<button v-on:click="getData">点击发送AJAX请求</button>
<p>{
{ responseData }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
responseData: ''
},
methods: {
getData: function() {
this.$http.get('/api/data')
.then(function(response) {
this.responseData = response.data;
})
.catch(function(error) {
console.log(error);
});
}
}
})
</script>上の例では、ボタンをクリックすると getData メソッドがトリガーされ、GET リクエストが「/api/data」インターフェイスに送信されます。次に、Promise の then メソッドを使用して、リクエストが成功したときにコールバックを処理し、返されたデータを responseData 属性に割り当てます。リクエストでエラーが発生した場合は、catch メソッドを使用してエラーを処理します。