目录
1-4 Vue基础
前端学习笔记(4)-VUE基础(1)_江正阳的博客-CSDN博客
5 Vue组件化编程
5.1 模块与组件、模块化与组件化
5.1.1. 模块
理解:向外提供特定功能的 js 程序,一般就是一个 js 文件
为什么:js 文件很多很复杂
作用:复用 js,简化 js 的编写,提高 js 运行效率
5.1.2. 组件
定义:用来实现局部功能的代码和资源的集合(html/css/js/image…)
为什么:一个界面的功能很复杂
作用:复用编码,简化项目编码,提高运行效率
5.1.3. 模块化
当应用中的 js 都以模块来编写的,那这个应用就是一个模块化的应用
5.1.4. 组件化
当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用
非单文件组件
5.2 非单文件组件
5.2.1 实现步骤:
1.创建组件
使用Vue.extend({配置对象})创建,其中配置对象和new Vue(options)时传入的那个options几乎一样,但也有点区别。
区别如下:
- el不要写。最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。组件就是一块砖,哪里需要哪里搬
- data必须写成函数。避免组件被复用时,数据存在引用关系。即如果data是一个配置对象,那么如果该组件被多个html引用,那么多个html的该组件的data是指向同一个对象的,则只要一个html改变data值,其他所有的html页面的该data值也改变,这样不好。
- 定义组件时,要把组件中html对应的内容写在template中。使用template配置组件结构。
const school = Vue.extend({
//组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。
// 组件就是一块砖,哪里需要往哪搬!
template: `
<div class="demo">
<h2>学校名称:{
{schoolName}}</h2>
<h2>学校地址:{
{address}}</h2>
</div>
`,
// data不能用对象的形式,不然都引用到同一个对象,要写成函数形式
data() {
return {
schoolName: "尚硅谷",
address: "北京昌平",
};
},
});
2.注册组件
- 注册局部组件
在vue实例中注册组件,靠new Vue的时候传入components选项
//创建vm
new Vue({
el: "#root",
data: {
msg: "你好!",
},
//第二步:注册组件(局部注册)
components: {
school,
student,
},
});
- 注册全局组件
局部注册是说,只有在vue实例中注册该组件,才能使用该组件,不注册就不能使用。
那如何不在vue实例中注册就可以使用组件呢?——全局注册
全局注册靠Vue.component('组件名',组件位置)
// 第二步,注册组件(全局注册)
Vue.component("school", school);
Vue.component("student", student);
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>基本使用</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{
{msg}}</h1>
<hr />
<!-- 第三步:编写组件标签 -->
<school></school>
<hr />
<!-- 第三步:编写组件标签 -->
<student></student>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
//第一步:创建school组件
const school = Vue.extend({
//组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。
// 组件就是一块砖,哪里需要往哪搬!
template: `
<div class="demo">
<h2>学校名称:{
{schoolName}}</h2>
<h2>学校地址:{
{address}}</h2>
</div>
`,
// data不能用对象的形式,不然都引用到同一个对象,要写成函数形式
data() {
return {
schoolName: "尚硅谷",
address: "北京昌平",
};
},
});
//第一步:创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名:{
{studentName}}</h2>
<h2>学生年龄:{
{age}}</h2>
</div>
`,
data() {
// 调用了给你新对象
return {
studentName: "JZY",
age: 20,
};
},
});
//创建vm
new Vue({
el: "#root",
data: {
msg: "你好!",
},
//第二步:注册组件(局部注册)
components: {
school,
student,
},
});
</script>
</html>
3 编写组件标签
<!-- 第三步:编写组件标签 -->
<school></school>
5.2.2 注意事项及总结
关于组件名:
一个单词组成:
- 第一种写法(首字母小写):school
- 第二种写法(首字母大写):School
多个单词组成:
- 第一种写法(kebab-case命名):my-school
- 第二种写法(CamelCase命名):MySchool (需要Vue脚手架支持)
注:
组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行
可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签:
- 第一种写法:<school></school>
- 第二种写法:<school/>
注:不使用脚手架时,<school/>会导致后续组件不能渲染
一个简写方式:const school = Vue.extend(options)可简写为:const school = options
5.2.3 组件嵌套
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>基本使用</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<hr />
<!-- 第三步:编写组件标签 -->
<hr />
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
//第一步:创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名:{
{studentName}}</h2>
<h2>学生年龄:{
{age}}</h2>
</div>
`,
data() {
// 调用了给你新对象
return {
studentName: "JZY",
age: 20,
};
},
});
//第一步:创建school组件
const school = Vue.extend({
//组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务于哪个容器。
// 组件就是一块砖,哪里需要往哪搬!
template: `
<div class="demo">
<h2>学校名称:{
{schoolName}}</h2>
<h2>学校地址:{
{address}}</h2>
<student></student>
</div>
`,
// data不能用对象的形式,不然都引用到同一个对象,要写成函数形式
data() {
return {
schoolName: "尚硅谷",
address: "北京昌平",
};
},
components: {
student,
},
});
//定义hello组件
const hello = Vue.extend({
template: `<h1>{
{msg}}</h1>`,
data() {
return {
msg: "欢迎学习Vue",
};
},
});
//定义app组件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>`,
components:{
school,
hello
}
})
//创建vm
new Vue({
template:`<app></app>`,
el: "#root",
data: {
msg: "你好!",
},
//第二步:注册组件(局部注册)
components: {
app,
},
});
</script>
</html>
5.2.4. VueComponent
关于VueComponent:
- 组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
- 我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)
特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!
关于this指向:
- 组件配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象
- new Vue(options)配置中:data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象
- VueComponent的实例对象,简称vc(也可称之为:组件实例对象)
vm与vc关系
vm能通过_el决定为哪个容器服务
- 一个重要的内置关系:
VueComponent.prototype.__proto__ === Vue.prototype
- 为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue 原型上的属性、方法
vue的原型上有很多方法和属性,如果没有黄色线,vue原型上的方法和属性只能vm用。
5.3 单文件组件
什么是单文件组件?
单文件组件就是一个文件扩展名为 .vue 的 single-file components (单文件组件)的文件。是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js
并且还可以使用 webpack 或 Browserify 等构建工具。
单文件组件的好处
在 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。
单文件组件格式
-
temlate标签里面的内容,必须有一个根标签
-
写入的组件必须要暴露【不然等于没写】(es6模块化)
-
csss coped样式
作用:让样式局部生效【防止和其他组件样式冲突被覆盖】
写法:
<template>
<!--这里面写html-->
</template>
<script>
export default {
name: "qq"
}
</script>
<style scoped>
/*这里面写css*/
</style>
组件使用
- 1.首先要在我们使用的地方去引入组件
- 2.引入后,配置一项components:{组件名,组件名}
- 3.配置后,直接当做标签中使用<组件名></组件名>
<template>
<div>
<h1>我是App</h1>
<School></School>
<bus></bus>
<jv-ming></jv-ming>
</div>
</template>
<script>
import School from "./components/School";
import Bus from "./components/Bus";
import JvMing from "./components/JvMing";
export default {
components:{JvMing, Bus, School},
data(){
return{',
}
},
}
</script>