Vue组件入门(非单文件组件)
前言
本博客是对以下视频教程做的一个笔记总结,可作为参考,不喜勿喷。
以前我们开发前端都是一个个单独的HTML和CSS或者JS文件,但是这种方式导致代码的复用性不高,为了提高代码的复用性,提出了组件化开发。
一个组件当中包括了HTML代码和CSS代码,JS代码,一个组件就是一个单独的,可复用的功能模块。
1、基本使用
代码如下:
<!DOCTYPE html>
<html lang="en">
<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">
<!--3、使用组件-->
<school></school>
<hello></hello>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; //关闭Vue的生产提示
//1、创建(定义)组件
/*school组件*/
const school = Vue.extend({
template: `
<div class="demo">
<h2>学校名称:{{schoolName}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
data() {
return {
schoolName: '华南理工',
};
},
methods: {
showName() {
alert(this.schoolName);
},
}
});
const hello = Vue.extend({
template: `
<div>
<h2>你好{{name}}</h2>
</div>
`,
data() {
return {
name: '猥琐',
}
}
});
//2、全局注册
Vue.component('hello', hello);
new Vue({
el: '#root',
data: {
msg: '666',
},
//2、注册组件(局部)
components: {
school,
},
});
</script>
</body>
</html>
总结
Vue
中使用组件的三大步骤:
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
一、如何定义一个组件?
- 使用
Vue.extend(options)
创建,其中options
和new Vue(options)
时传入的那个options
几乎一样,但也有点区别;区别如下:el
不要写,为什么? ——— 最终所有的组件都要经过一个vm
的管理,由vm
中的el决定服务哪个容器。data
必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。- 备注:使用
template
可以配置组件结构。
二、如何注册组件?
-
局部注册:
- 靠
new Vue
的时候传入components
选项(组件名和组件一样时,可以简写成一个即可) components: {组件名: 组件}
- 靠
-
全局注册:
- 靠Vue.component(‘组件名’,组件)
三、编写(使用)组件标签:
- 使用时,实际上使用的是注册组件时的组件名,也就是标签名要和注册时的组件名对应。如:
<school></school>
2、组件嵌套
代码如下:
<!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"></div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; //关闭Vue的生产提示
//定义student组件
const student = Vue.extend({
//name:指定组件名称
name: 'student',
template: `
<div>
<h2>学生姓名:{{name}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data() {
return {
name: '电子科技大学',
age: 18,
};
},
});
//定义school组件
const school = Vue.extend({
//name:指定组件名称
name: 'school',
//使用student组件
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({
//使用hello组件和school组件
template: `
<div>
<hello></hello>
<school></school>
</div>
`,
//注册组件
components: {
hello,
school,
}
});
//创建vm
new Vue({
template: `<app></app>`,
el: '#root',
//注册组件(局部)
components: {app},
});
</script>
</html>
备注:组件在哪用,就在哪注册。
3、VueComponent
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueComponent</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
<hello></hello>
</div>
<script>
Vue.config.productionTip = false;//关闭Vue的生产提示
//定义school组件
const school = Vue.extend({
name: 'school',
template: `
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
data() {
return {
name: '电子科技大学',
address: '你猜',
};
},
methods: {
showName() {
console.log('showName', this);
},
}
});
//定义test组件
const test = Vue.extend({
template: `<span>哈哈哈</span>`,
});
//定义hello组件
const hello = Vue.extend({
template: `
<div>
<h2>{{msg}}</h2>
<test></test>
</div>
`,
data() {
return {
msg: 'hello',
};
},
//注册组件(哪里用哪里注册)
components: {
test,
}
});
const vm = new Vue({
//局部注册组件
components: {
school,
hello,
}
});
/*挂载Vue实例到root容器上*/
vm.$mount('#root');
</script>
</body>
</html>
总结
关于VueComponent:
school组件
本质是一个名为VueComponent
的构造函数,且不是程序员定义的,是Vue.extend
生成的。- 我们只需要写
<school/>
或<school></school>
,Vue
解析时会帮我们创建school
组件的实例对象, - 即
Vue
帮我们执行的:new VueComponent(options)
。 - 特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!
- 关于
this
指向:- 组件配置中
- data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象vc】。
- new Vue(options)配置中:
- data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象vm】。
- 组件配置中
VueComponent
的实例对象,以后习惯简称vc
(也可称之为:组件实例对象)。Vue
的实例对象,以后习惯简称vm
。
4、一个重要的内置关系
Vue和VueComponent的关系。
代码如下:
<!DOCTYPE html>
<html lang="en">
<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">
<school></school>
</div>
<script>
/*//回顾原型
function Demo() {
this.a = 1;
this.b = 2;
}
//创建一个Demo的实例对象(回顾原型)
var demo = new Demo();
console.log(Demo.prototype); //显式原型属性
console.log(demo.__proto__); //隐式原型对象
console.log(Demo.prototype === demo.__proto__);
//程序员往构造函数的原型对象上放一个x属性,值为55
Demo.prototype.x = 55;
//程序在执行时,往实例对象的原型对象(__proto__)中查找
console.log(demo.x);*/
Vue.config.productionTip = false;
Vue.prototype.x = 55; //往Vue的原型对象上加x属性,值为55
//定义school组件
const school = Vue.extend({
name: 'school',
template: `<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showX">点我输出x</button>
</div>`,
data() {
return {
name: '电子科技大学',
address: '你猜',
}
},
methods: {
showX() {
console.log(this.x);
}
}
});
//创建一个vm
const vm = new Vue({
el: '#root',
data: {
msg: '你好',
},
//注册组件(局部)
components: {school}
});
</script>
</body>
</html>
总结
如下图:
实例的隐式原型属性,永远指向自己缔造者的原型对象。
根据以上总结:Vue实例对象上有的属性,VueComponent实例对象上也有,原因是:图上黄色原型链不是直接指向Object实例对象,而是改变指向Vue的原型对象。
Vue实例对象(vm)管理着多个VueComponent实例对象(vc)。