Vue.js 學習之四：Vue 元件基礎
- coldplay.xixi轉載
- 2020-10-16 14:43:372331瀏覽
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视频教程
以上是Vue.js 學習之四：Vue 元件基礎的詳細內容。更多資訊請關注PHP中文網其他相關文章！