ホームページ > 記事 > ウェブフロントエンド > Vue.js 学習 4: Vue コンポーネントの基本
Vue.js 学習 4: Vue コンポーネントの基本
- coldplay.xixi転載
- 2020-10-16 14:43:372283ブラウズ
Vue.js チュートリアル今日のコラムでは、Vue コンポーネントの基本的な知識を紹介します。
このシリーズのこれまでのメモでは、非常に単純な単一ページの Web アプリケーションを紹介してきましたが、多くの場合、ページ上には単純なインタラクティブな要素がいくつかしかありませんでした。ただし、実際の運用環境では、Web アプリケーションのユーザー インターフェイスは複数の複雑なページで構成されることがよくあります。このとき、コードの再利用性を考慮する必要がありますが、この問題を解決するために、Vue.js フレームワークが提案する解決策は、まずユーザー インターフェイス上の要素を機能ごとに独立したコンポーネントに分割することです。ナビゲーション、コラム、掲示板、データフォーム、ユーザー登録フォーム、ユーザーログインインターフェースなどこのようにして、その後の作業では、レゴのおもちゃで遊ぶのと同じように、必要に応じてこれらのコンポーネントをさまざまな特定のアプリケーションに組み合わせることができます。全体として、コンポーネント システムは、Vue.js フレームワークを学習する際に習得しなければならない重要な概念です。以下、このノートでは、Vue.js フレームワークでコンポーネントを構築および使用する基本的な方法を体験するための一連の実験例を書きます。
すべての実験を開始する前に、次の一連の実験プロジェクトを保存するために、code ディレクトリに 00_test という名前のディレクトリを作成する必要があります。これらのプロジェクトは、以前は Vue コンポーネントの構築と使用を経験していましたが、実際のアプリケーション機能を持っていないため、##00 という番号を付けました。それでは、最初の実験を始めましょう！これを行うには、引き続き code/00_test ディレクトリに component_1 という名前の別の実験用ディレクトリを作成し、このディレクトリで npm install vue コマンドを実行する必要があります。 Vue.js フレームワークをインストールします。最後に、code/00_test/component_1 ディレクトリに index.htm という名前のファイルを作成し、次のコードを入力するだけです。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA -Compatible" content="ie=edge">
<title>学习 vue 组件实验（1）：组件注册</title>
`</head>
<body>
<p id="app">
<say-hello :who="who"></say-hello>
<welcome-you :who="who"></welcome-you>
</p>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 全局组件注册
Vue.component('say-hello', {
template: `<h1>你好， {{ you }}！</h1>`,
props: ['who'],
data: function() {
return {
you: this.who
};
}
});
const app = new Vue({
el: '#app',
// 局部组件注册
components: {
'welcome-you': {
template: `<h2>欢迎你， {{ you }}！</h2>`,
props: ['who'],
data: function() {
return {
you: this.who
};
}
}
},
data: {
who: 'vue'
}
});
</script>
</body>
</html> 上記の実験では、 、 say-hello コンポーネントと welcome-you コンポーネントを 2 つの異なる方法で作成して登録しました。次に、これら 2 つのコンポーネントを使用して、これら 2 つのコンポーネントの使用方法を紹介します。 1 つ目は say-hello コンポーネントです。このコンポーネントは、Vue.component() メソッドを呼び出すことによってアプリケーションに作成および登録されます。このメソッドを使用して作成されたコンポーネントは通常、「として」と呼ばれます。グローバル コンポーネント」を呼び出す場合、呼び出し時に 2 つのパラメータを指定する必要があります:
- 最初のパラメータは、コンポーネントの名前を指定するために使用される文字列オブジェクトである必要があります。これはカスタム タグ要素でもありますHTML ドキュメントで使用したいと考えています。HTML コードでは大文字と小文字が区別されないため、コンポーネントに名前を付けるときは小文字を使用することを個人的にお勧めします。単語の間に小文字を使用できます。
-
この区切り文字は区切り文字です。 - 2 番目のパラメーターは、コンポーネントのさまざまな特定のパラメーターを設定するために使用される JavaScript オブジェクトである必要があります。ここでは、次の 3 つの最も基本的なパラメータが定義されています:
- template
: このパラメータは、コンポーネントの HTML テンプレート コードを指定するために使用される文字列オブジェクトです。このコード スニペットでは、対応する DOM オブジェクトにはルート ノードが 1 つだけ必要であり、ルート ノードを 1 つだけ持つことができると記載されています。このオブジェクトは、最終的な HTML ドキュメントのコンポーネントに対応するカスタム タグによって表されます。ここでは、<say-hello>です。 - props
: このパラメータは文字列配列です。配列内の各要素は、コンポーネントに対応するカスタム タグのプロパティです。コンポーネントのユーザーは、##v- を渡すことができます。 bindディレクティブは、このプロパティを特定のデータにバインドして、データをコンポーネントに転送できるようにします。たとえば、ここでは、<say-hello>タグのv-bindディレクティブを使用して、タグのwho属性を Vue にバインドしました。インスタンス オブジェクトをwhoデータに追加し、それをsay-helloコンポーネントに渡します。 data - : このパラメーターは、呼び出し元から取得するコンポーネント自体のデータ (ここでは
youなど) を設定するために使用される関数です。 ## データが割り当てられます。後者の場合、thisリファレンスを使用して取得できます。もちろん、上記の 3 つの基本パラメータに加えて、カスタム イベントやその処理関数など、コンポーネントにさらに多くのパラメータを設定することもできます。これについては後続のプログラムで記述します。 . 経験で示される。
下面，我们再来看
welcome-you组件的构建。如你所见，该组件是在 vue 实例的components成员中构建并注册到应用程序中的，使用该方法创建的组件通常被称之为"局部组件"（它与全局组件的区别是，全局组件会在程序运行时全部加载，而局部组件只会在被实际用到时加载） 。该components成员的值也是一个 JSON 格式的数据对象，该数据对象中的每一个成员都是一个局部组件，这些组件采用键/值对的方式来定义,键对应的是组件的名称，值对应的是组件参数的设置。当然了，由于局部组件的命名规则与具体参数的设置方法都与全局对象一致，这里就不再重复说明了。需要注意的是，第一个实验项目的编写方式将 HTML 代码、Vue 实例的构建代码以及组件的构建代码糅合在了一起，这对于提高代码的可复用性这个目的来说，显然是不行的。要想解决这个问题，我们可以利用 ES6 规范新增的模块规则将这三部分代码隔离开来。为了体验这种用法，我继续开始了第二个实验。具体做法就是在
code/00_test目录中再创建一个名为component_2的实验目录，并在该目录下执行npm install vue命令来安装 Vue.js 框架。最后，我只需在code/00_test/component_2目录下创建一个名为index.htm的文件，并输入如下代码：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <script src="./node_modules/vue/dist/vue.js"></script> <script type="module" src="./main.js"></script> <title>学习 vue 组件实验（2）：以 ES6 模块的方式注册组件</title> </head> <body> <p id="app"> <say-hello :who="who"></say-hello> </p> </body> </html>
在上述 HTML 代码中，我们在照常引入 vue.js 框架之后，使用模块的方式引入了
main.js脚本文件，最好在<p id="app">标签中使用了后面将要定义的组件所对应的自定义标签。接下来，我只需要在相同的目录下创建一个名为main.js的 JavaScript 脚本文件，并在其中输入如下代码：// import Vue from './node_modules/vue/dist/vue.js'; import sayhello from './sayhello.js'; const app = new Vue({ el: '#app', components: { 'say-hello': sayhello }, data: { who:'vue' } });在上述 JavaScript 代码中，我首先使用了 ES6 新增的
import-from语句导入了后续要在sayhello.js文件中构建的组件，然后在构建 Vue 实例时将其注册成了局部组件。最后，我只需在同一目录下再创建这个sayhello.js脚本文件，并在其中输入如下代码：const tpl = ` <p> <h1>你好， {{ you }}！</h1> <input type="text" v-model="you" /> </p> `; const sayhello = { template: tpl, props : ['who'], data : function() { return { you: this.who } } }; export default sayhello;在这部分代码中，我先定义了一个局部组件，然后再使用 ES6 新增的
export default语句将其导出为模块。当然，考虑到各种 Web 浏览器对 ES6 规范的实际支持情况，以及 Vue.js 框架本身使用的是 CommonJS 模块规范，所以上述实验依然可能不是编写 Vue.js 项目的最佳方式，其中可能还需要配置 babel 和 webpack 这样的转译和构建工具来辅助。在下一篇笔记中，我就来记录如何使用这些工具来构建具体的 vue 应用程序。相关学习推荐：js视频教程
- template
以上がVue.js 学習 4: Vue コンポーネントの基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。