Article directory
1. Modules and components, modularization and componentization
1.1. Modules
- Understand: Provide specific functions to the outside worldjs program, usually a js file
- Why: There are many js files and they are complicated
- Function: Reuse js, simplify js writing, and improve js operating efficiency
1.2. Components
- understand:A collection of codes used to achieve local (specific) functional effects(html/css/js/image……)
- Why: The functionality of an interface is complex
- Function: reuse coding, simplify project coding, improve operating efficiency
1.3. Modularity
When the js in an application is written in modules, then the application is a modular application.
1.4. Componentization
When the functions in the application are written in a multi-component manner, then the application is a componentized application.
2. Non-single file components
2.1Basic use
1. Three major steps for using components in Vue:
- Define components (create components)
- Register component
- Use components (write component tags)
2. How to define a component?
Created using Vue.extend(options), the options are almost the same as the options passed in when new Vue(options), but there are some differences; the differences are
as follows:
- Don't write el, why? ——— In the end, all components must be managed by a vm, and the el in the vm determines which container to serve.
- data must be written as a function, why? ———— Avoid data reference relationships when components are reused.
Note: Use template to configure the component structure.
3. How to register components?
- Partial registration: Pass in the components option when relying on new Vue
- Global registration: rely on Vue.component('component name', component)
4. Write component tags:
<school></school>
Code:
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>{
{msg}}</h1>
<school></school>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定义组件
const s = Vue.extend({
name:'atguigu',
template:`
<div>
<h2>学校名称：{
{name}}</h2>
<h2>学校地址：{
{address}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
}
})
new Vue({
el:'#root',
data:{
msg:'欢迎学习Vue!'
},
components:{
school:s
}
})
</script>
2.2 Several points to note:
- About the component name:
- One word consists of:
- The first way of writing (the first letter is lowercase): school
- The second way of writing (the first letter is capitalized): School
- Made up of multiple words:
- The first way of writing (kebab-case naming): my-school
- The second way of writing (CamelCase naming): MySchool (requires Vue scaffolding support)
- Remark:
- (1). The component name should avoid existing element names in HTML as much as possible, such as h2 and H2.
- (2). You can use the name configuration item to specify the name of the component as it appears in the developer tools.
- About component tags:
- The first way to write:
<school></school> - The second way of writing:
<school/> - Note: When scaffolding is not used, subsequent components will not be rendered.
- A shorthand way:
const school = Vue.extend(options) can be abbreviated as: const school = options
2.3 Nesting of components
<body>
<!-- 准备好一个容器-->
<div id="root">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//定义student组件
const student = Vue.extend({
name:'student',
template:`
<div>
<h2>学生姓名：{
{name}}</h2>
<h2>学生年龄：{
{age}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
age:18
}
}
})
//定义school组件
const school = Vue.extend({
name:'school',
template:`
<div>
<h2>学校名称：{
{name}}</h2>
<h2>学校地址：{
{address}}</h2>
<student></student>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
},
//注册组件（局部）
components:{
student
}
})
//定义hello组件
const hello = Vue.extend({
template:`<h1>{
{msg}}</h1>`,
data(){
return {
msg:'欢迎来到尚硅谷学习！'
}
}
})
//定义app组件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
})
//创建vm
new Vue({
template:'<app></app>',
el:'#root',
//注册组件（局部）
components:{
app}
})
</script>
2.4VueComponent
- The essence of the school component is a constructor called VueComponent, which is not defined by programmers but is generated by Vue.extend.
- We only need to write
<school/>or<school></school>, Vue will help us create the instance object of the school component when parsing, that is, Vue will help us execute:new VueComponent(options). - Special note: Every time Vue.extend is called, a brand new VueComponent is returned! ! ! !
- About this pointing:
(1). In component configuration: the
this of data function, function in methods, function in watch, and function in computed are all [VueComponent instance objects].
(2).new Vue(options) configuration:
data function, function in methods, function in watch, function in computed, their this are all [Vue instance objects]. - The instance object of VueComponent, hereafter referred to as vc (can also be called: component instance object).
The instance object of Vue will be referred to as vm from now on.
2.5 Single file components
1. The composition of a .vue file (3 parts)
(1) Template page: <template>page template </template>
(2) JS module object:
<script>
export default {
data() {
return {
}},
methods: {
},
computed: {
},
components: {
}
}
</script>
(3) Style <style>: Style definition </style>
2. Basic usage
(1) Introduce components
(2) Map to labels
(3) Use component labels