Vue.js Learning 4: Vue Component Basics
Vue.js Tutorial column today introduces you to the basic knowledge of Vue components.
So far, the notes in this series have shown extremely simple single-page web applications, often with only a few simple interactive elements on the page. However, in actual production environments, the user interface of Web applications is often composed of multiple complex pages. At this time, we need to start paying attention to the reusability of the code. To solve this problem, the solution proposed by the Vue.js framework is to first divide the elements on the user interface into independent components according to different functions, such as navigation. column, bulletin board, data form, user registration form, user login interface, etc. In this way, in our subsequent work, we can combine these components into various specific applications as needed, just like playing with Lego toys. All in all, the component system is an important concept that we must master when learning the Vue.js framework. Below, this note will write a series of experimental examples to experience the basic methods of building and using components in the Vue.js framework.
Before starting all experiments, I need to create a directory named 00_test in the code directory to store the next series of experimental projects , since these projects can only be used to experience the construction and use of Vue components and have no actual application functions, so I gave them the number 00. So, let’s start the first experiment! To do this, I need to continue to create another experimental directory named component_1 in the code/00_test directory, and execute the npm install vue command in this directory to install the Vue.js framework. Finally, I just need to create a file named index.htm in the code/00_test/component_1 directory and enter the following code:
<!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> In the above experiment , I created and registered the say-hello and welcome-you components in two different ways. Next, we will use these two components to introduce the use of these two components. The first is the say-hello component, which is created and registered in the application by calling the Vue.component() method. Components created using this method are usually called As a "global component", we need to provide two parameters when calling it:
The first parameter should be a string object used to specify the name of the component. It is also the custom tag element we want to use in the HTML document. Since HTML code is not case-sensitive, I personally recommend that you try to use lowercase letters when naming components. You can use them between words.
-This delimiter separates.-
The second parameter should be a JavaScript object, used to set various specific parameters of the component. The following three most basic parameters are defined here:
-
template: This parameter is a string object used to specify the HTML template code of the component. It should be noted that this The code snippet says that the corresponding DOM object must have and can only have one root node. This object will be represented by the custom tag corresponding to the component in the final HTML document, here it is<say-hello>. -
props: This parameter is a string array. Each element in the array is a property of the custom tag corresponding to the component. Users of the component can pass# The ##v-binddirective binds this property to a certain data so that the data can be transferred to the component. For example, here, I used thev-binddirective in the<say-hello>tag to bind thewhoattribute of the tag to the Vue instance object. on thewhodata and pass it into thesay-hellocomponent. - data
: This parameter is a function used to set the data of the component itself, such asyouhere, which I will get from the caller. whodata is assigned to it. For the latter, we can usethisreference to obtain it. Of course, in addition to the above three basic parameters, we can also set more parameters for the component, such as custom events and their processing functions, etc., which I will write in subsequent programs. Shown in experience.
-
下面，我们再来看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视频教程
The above is the detailed content of Vue.js Learning 4: Vue Component Basics. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Vue component communication: use $destroy for component destruction communication
Jul 09, 2023 pm 07:52 PM
Vue component communication: Use $destroy for component destruction communication In Vue development, component communication is a very important aspect. Vue provides a variety of ways to implement component communication, such as props, emit, vuex, etc. This article will introduce another method of component communication: using $destroy for component destruction communication. In Vue, each component has a life cycle, which includes a series of life cycle hook functions. The destruction of components is also one of them. Vue provides a $de
Vue practice: date picker component development
Nov 24, 2023 am 09:03 AM
Vue Practical Combat: Date Picker Component Development Introduction: The date picker is a component often used in daily development. It can easily select dates and provides various configuration options. This article will introduce how to use the Vue framework to develop a simple date picker component and provide specific code examples. 1. Requirements analysis Before starting development, we need to conduct a requirements analysis to clarify the functions and characteristics of the components. According to the common date picker component functions, we need to implement the following function points: Basic functions: able to select dates, and
How does Vue implement component reuse and extension?
Jun 27, 2023 am 10:22 AM
With the continuous development of front-end technology, Vue has become one of the popular frameworks in front-end development. In Vue, components are one of the core concepts, which can break down pages into smaller, more manageable parts, thereby improving development efficiency and code reusability. This article will focus on how Vue implements component reuse and extension. 1. Vue component reuse mixins Mixins are a way to share component options in Vue. Mixins allow component options from multiple components to be combined into a single object for maximum
Vue component communication: using watch and computed for data monitoring
Jul 10, 2023 am 09:21 AM
Vue component communication: using watch and computed for data monitoring Vue.js is a popular JavaScript framework, and its core idea is componentization. In a Vue application, data needs to be transferred and communicated between different components. In this article, we will introduce how to use Vue's watch and computed to monitor and respond to data. watch In Vue, watch is an option, which can be used to monitor the changes of one or more properties.
How to use third-party libraries in Vue projects
Oct 15, 2023 pm 04:10 PM
Vue is a popular JavaScript framework that provides a wealth of tools and features to help us build modern web applications. Although Vue itself already provides many practical functions, sometimes we may need to use third-party libraries to extend Vue's capabilities. This article will introduce how to use third-party libraries in Vue projects and provide specific code examples. 1. Introduce third-party libraries The first step to using third-party libraries in a Vue project is to introduce them. We can introduce it in the following ways
In-depth understanding of Vue's component life cycle
Oct 15, 2023 am 09:07 AM
To deeply understand Vue's component life cycle, you need specific code examples. Introduction: Vue.js is a progressive JavaScript framework that is favored by developers for its simplicity, ease of learning, efficiency and flexibility. In the component development of Vue, understanding the life cycle of components is an important part. This article will delve into the life cycle of Vue components and provide specific code examples to help readers better understand and apply them. 1. Life cycle diagram of Vue components The life cycle of Vue components can be regarded as components
Vue component development: implementation method of tab page component
Nov 24, 2023 am 08:41 AM
Vue component development: Tab component implementation method In modern web applications, the tab page (Tab) is a widely used UI component. The Tab component can display multiple related content on a single page and switch them by clicking on the tab. In this article, we will introduce how to implement a simple tab component using Vue.js and provide detailed code examples. The structure of the Vue tab component. The tab component usually consists of two parts: tab and panel. Labels are used to identify surfaces
How to switch between multiple data interaction methods in Vue components
Oct 08, 2023 am 11:37 AM
How to switch between multiple data interaction methods in Vue components. When developing Vue components, you often encounter scenarios where you need to switch to different data interaction methods, such as requesting data through APIs, entering data through forms, or pushing data in real time through WebSocket, etc. . This article will introduce how to implement this switching of multiple data interaction methods in Vue components, and provide specific code examples. Method 1: API request data In some cases, we need to request data through API to obtain background data. under
