一、模块
理解:向外提供特定功能的js程序,一般就是一个js文件。
为什么:js文件很多很复杂。
作用:复用js,简化js的编写,提高js运行效率。模块化:
当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。
二、组件
理解:用来实现应用中局部功能代码和资源的集合。
为什么:一个界面的功能很复杂。
作用:复用编码,简化项目编码,提高运行效率。组件化:
当应用中的功能都是多组件的方式来编写的,那这个应用就是组件化的应用。非单文件组件:
一个文件中包含有n个组件。单文件组件:
一个文件中只包含有一个组件。
三、非单文件组件
Vue中使用组件的三大步骤:
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
几个注意点:
- 关于组件名:
一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
多个单词组成:
第一种写法(kebab-case命名):my-school
第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
备注:
(1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。- 关于组件标签:
第一种写法:<school></school>
第二种写法:<school/>
备注:不用使用脚手架时,<school/>会导致后续组件不能渲染。- 一个简写方式:
const school = Vue.extend(options) 可简写为:const school = options
(1)创建组件
script代码:
// 创建组件需要使用API:extends
const girl = Vue.extends({
//newVue里面的配置对象这里的使用方式几乎一样
//data必须写成函数
data() {
return {
name: 'Mary',
age: 18
}
},
})
// 创建组件需要使用API:extends
const boy = Vue.extends({
//newVue里面的配置对象这里的使用方式几乎一样
//data必须写成函数
data() {
return {
name: 'Mike',
age: 19
}
},
})
(2)注册组件
script代码:
//创建vm
new Vue({
el: '.root',
//注册组件(局部注册)
components: {
//里面是键值对的方式,当组件名和变量名相同时可缩写
girl,
boy
}
})
(3)使用组件
使用template可以配置组件结构:
template: `
<div>
<h1>男生信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
</div>`
template: `
<div>
<h1>女生信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
</div>`
在html结构中编写组件标签:
<div class="root">
<!-- 编写组件标签 -->
<boy></boy>
<hr>
<!-- 编写组件标签 -->
<girl></girl>
</div>
最终页面输出效果:
四、组件的嵌套
注意:注册给谁就把组件标签写在谁的template里边
假设我们准备了一个学校组件和一个学生组件,学生组件包含在学校组件里面。
(一)首先我们需要在定义一个学校组件和一个学生组件:
const student = Vue.extend({
template: `
<h1>学生名字:{{name}}</h1>
`,
data() {
return {
name: '张三',
}
},
})
const school = Vue.extend({
template: `
<h1>学校名字:{{name}}</h1>
`,
data() {
return {
name: '北京大学',
}
},
})
(二)注册组件
//在Vue里面注册学校组件
components: {
school
}
//在学校组件里面注册学生组件
components: {
student
}
(三)使用组件
//在HTML编写school组件标签
<div class="root">
<school></school>
</div>
template: `
<div>
<h1>学校名字:{{name}}</h1>
//在school组件里面编写student标签
<student></student>
</div>`
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/6244.html