Vue.js 学习之四：Vue 组件基础
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两个组件。接下来就借由这两个组件来介绍一下这两种组件的使用。首先是say-hello组件，该组件是通过调用Vue.component()方法来创建并注册到应用程序中的，使用该方法创建的组件通常被称之为"全局组件"，我们在调用它的时候需要提供两个参数：
第一个参数应该是一个字符串对象，用于指定组件的名称，该名称也是我们要在 HTML 文档中使用的自定义标签元素，而由于 HTML 代码是大小写不敏感的，所以我个人会建议大家在给组件起名字的时候应该尽量一律使用小写字母，单词之间可以使用
-这样分隔符进行区隔。-
第二个参数应该是一个 JavaScript 对象，用于设置组件的各项具体参数。这里定义了以下三项最基本参数：
-
template：该参数是个字符串对象，用于指定该组件的 HTML 模版代码，需要注意的是，这段代码说对应的 DOM 对象必须有且只能有一个根节点。而这个对象在最终的 HTML 文档中将会由该组件所对应自定义标签所代表，在这里就是<say-hello>。 -
props：该参数是一个字符串数组，该数组中的每个元素都是该组件所对应的自定义标签的一个属性，该组件的用户可以通过v-bind指令将该属性绑定到某一数据上，以便将数据传到组件内部。例如在这里，我在<say-hello>标签中就用v-bind指令将该标签的who属性绑定到了 Vue 实例对象的who数据上，并将其传进say-hello组件中。 -
data：该参数是一个函数，用于设置组件自身的数据，例如这里的you，我将从调用者那里获取的who数据赋值给了它。对于后者，我们可以用this引用来获取。
当然了，除了上面三个基本参数之外，我们还可以为组件设置更多参数，例如自定义事件及其处理函数等，这些我将会在后续的程序编写体验中展示。
-
下面，我们再来看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视频教程
Atas ialah kandungan terperinci Vue.js 学习之四：Vue 组件基础. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1389
52
Komunikasi komponen Vue: gunakan $destroy untuk komunikasi pemusnahan komponen
Jul 09, 2023 pm 07:52 PM
Komunikasi komponen Vue: Gunakan $destroy untuk komunikasi pemusnahan komponen Dalam pembangunan Vue, komunikasi komponen merupakan aspek yang sangat penting. Vue menyediakan pelbagai cara untuk melaksanakan komunikasi komponen, seperti props, emit, vuex, dsb. Artikel ini akan memperkenalkan satu lagi kaedah komunikasi komponen: menggunakan $destroy untuk komunikasi pemusnahan komponen. Dalam Vue, setiap komponen mempunyai kitaran hayat, yang merangkumi satu siri fungsi cangkuk kitaran hayat. Pemusnahan komponen juga merupakan salah satu daripadanya Vue menyediakan $de
Bagaimanakah Vue melaksanakan penggunaan semula dan sambungan komponen?
Jun 27, 2023 am 10:22 AM
Dengan pembangunan berterusan teknologi bahagian hadapan, Vue telah menjadi salah satu rangka kerja yang popular dalam pembangunan bahagian hadapan. Dalam Vue, komponen ialah salah satu konsep teras, yang boleh memecahkan halaman kepada bahagian yang lebih kecil dan lebih mudah diurus, dengan itu meningkatkan kecekapan pembangunan dan kebolehgunaan semula kod. Artikel ini akan menumpukan pada cara Vue melaksanakan penggunaan semula dan sambungan komponen. 1. Campuran guna semula komponen Vue Mixins ialah cara untuk berkongsi pilihan komponen dalam Vue. Mixin membenarkan pilihan komponen daripada berbilang komponen digabungkan menjadi satu objek untuk maksimum
Amalan Vue: pembangunan komponen pemilih tarikh
Nov 24, 2023 am 09:03 AM
Pertempuran Praktikal Vue: Pembangunan Komponen Pemilih Tarikh Pengenalan: Pemilih tarikh ialah komponen yang sering digunakan dalam pembangunan harian Ia boleh memilih tarikh dengan mudah dan menyediakan pelbagai pilihan konfigurasi. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue untuk membangunkan komponen pemilih tarikh yang mudah dan menyediakan contoh kod khusus. 1. Analisis keperluan Sebelum memulakan pembangunan, kita perlu menjalankan analisis keperluan untuk menjelaskan fungsi dan ciri-ciri komponen. Menurut fungsi komponen pemilih tarikh biasa, kita perlu melaksanakan titik fungsi berikut: Fungsi asas: dapat memilih tarikh, dan
Komunikasi komponen Vue: menggunakan jam tangan dan dikira untuk pemantauan data
Jul 10, 2023 am 09:21 AM
Komunikasi komponen Vue: menggunakan jam tangan dan dikira untuk pemantauan data Vue.js ialah rangka kerja JavaScript yang popular dan idea terasnya ialah komponenisasi. Dalam aplikasi Vue, data perlu dipindahkan dan disampaikan antara komponen yang berbeza. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jam tangan Vue dan dikira untuk memantau dan bertindak balas kepada data. watch Dalam Vue, jam tangan ialah pilihan yang boleh digunakan untuk memantau perubahan dalam satu atau lebih sifat.
Cara menggunakan perpustakaan pihak ketiga dalam projek Vue
Oct 15, 2023 pm 04:10 PM
Vue ialah rangka kerja JavaScript popular yang menyediakan pelbagai alatan dan ciri untuk membantu kami membina aplikasi web moden. Walaupun Vue sendiri sudah menyediakan banyak fungsi praktikal, kadangkala kita mungkin perlu menggunakan perpustakaan pihak ketiga untuk memperluaskan keupayaan Vue. Artikel ini akan memperkenalkan cara menggunakan perpustakaan pihak ketiga dalam projek Vue dan memberikan contoh kod khusus. 1. Memperkenalkan perpustakaan pihak ketiga Langkah pertama untuk menggunakan perpustakaan pihak ketiga dalam projek Vue ialah memperkenalkannya. Kita boleh memperkenalkannya dengan cara berikut
Pemahaman mendalam tentang kitaran hayat komponen Vue
Oct 15, 2023 am 09:07 AM
Untuk memahami dengan mendalam kitaran hayat komponen Vue, anda memerlukan contoh kod khusus Pengenalan: Vue.js ialah rangka kerja JavaScript progresif yang digemari oleh pembangun kerana kesederhanaan, kemudahan pembelajaran, kecekapan dan fleksibiliti. Dalam pembangunan komponen Vue, memahami kitaran hayat komponen adalah bahagian penting. Artikel ini akan menyelidiki kitaran hayat komponen Vue dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menerapkannya dengan lebih baik. 1. Gambar rajah kitaran hayat komponen Vue Kitaran hayat komponen Vue boleh dianggap sebagai komponen
Pembangunan komponen Vue: kaedah pelaksanaan komponen halaman tab
Nov 24, 2023 am 08:41 AM
Pembangunan komponen Vue: Kaedah pelaksanaan komponen tab Dalam aplikasi web moden, halaman tab (Tab) ialah komponen UI yang digunakan secara meluas. Komponen Tab boleh memaparkan berbilang kandungan berkaitan pada satu halaman dan menukarnya dengan mengklik pada tab. Dalam artikel ini, kami akan memperkenalkan cara untuk melaksanakan komponen tab mudah menggunakan Vue.js dan memberikan contoh kod terperinci. Struktur komponen tab Vue Komponen tab biasanya terdiri daripada dua bahagian: tab dan panel. Label digunakan untuk mengenal pasti permukaan
Cara bertukar antara kaedah interaksi data berbilang dalam komponen Vue
Oct 08, 2023 am 11:37 AM
Cara menukar antara kaedah interaksi data berbilang dalam komponen Vue Apabila membangunkan komponen Vue, anda sering menghadapi senario di mana anda perlu menukar kepada kaedah interaksi data yang berbeza, seperti meminta data melalui API, memasukkan data melalui borang atau menolak data dalam masa nyata. melalui WebSocket, dsb. Artikel ini akan memperkenalkan cara melaksanakan penukaran kaedah interaksi data berbilang dalam komponen Vue dan memberikan contoh kod khusus. Kaedah 1: Data permintaan API Dalam sesetengah kes, kami perlu meminta data melalui API untuk mendapatkan data latar belakang. bawah
