vue2_13、组件化编程
1、模块与组件、模块化与组件化
模块
a. 理解:向外提螃定功能的js程序,一般就是一个js文件
b.为什么要使用模块:js文件很多很复杂
c.作用:复用、简化js的编写,提高js运行效率
组件
a.定义:用来实现局部功能的代码和资源的集合(html/css/js/image...)
b.为什么:一个界面的功能很复杂
c.作用:复用编码,简化项目编码,提高运行效率
模块化
当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用
组件化
当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用
2、非单文件组件
非单文件组件:一个文件中包含有n个组件
单文件组件:一个文件中只有1个组件
2.1、基本使用:
Vue
中使用组件的三大步骤:
一、定义组件(创建组件):
使用Vue.extend(options)
创建,其中options
和new Vue(options)
时传入的那个options几乎一样,但也有点区别:
①.el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
②.data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。
备注:使用template可以配置组件结构。
二、注册组件
1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component('组件名',组件)
三、使用组件(写组件标签)
如:<school></school>
<body>
<!-- 准备好一个容器-->
<div id="root">
<hello></hello>
<!-- 第三步:编写组件标签 -->
<school></school>
<hr>
<student></student>
</div>
<div id="root2">
<hello></hello>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue启动时生成生产提示
//第一步:创建school组件
const school=Vue.extend({
//el:"#root",//组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm所管理,由vm决定服务于哪个容器。
template:
`
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
<Button @click='showName'>点我提示学校名</Button>
</div>
`,
data:function(){
return {
schoolName:"南充职业技术学院",
address:"南充",
}
},
methods:{
showName(){
alert(this.schoolName);
}
}
});
//创建student组件
const student=Vue.extend({
template:
`
<div>
<h2>学生姓名:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data:function(){
return {
studentName:"张三",
age:18,
}
},
});
//创建hello组件
const hello=Vue.extend({
template:
`
<div>
<h3>你好啊:{{name}}</h3>
</div>
`,
data(){
return {
name:"Tom"
}
}
});
//第二步 :注册组件(全局注册,这样每个组件都-能够直接使用该组件标签)
Vue.component("hello",hello);
new Vue({
el:"#root",
//第二步 :注册组件(局部注册)
components:{
school:school,
student:student
}
});
new Vue({
el:"#root2",
});
</script>
</body>
2.2、组件注意事项:
关于组件名:
-
一个单词组成:
第一种写法(首字母小写):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
,因为父组件components引入时会自动创建。
2.3、组件的嵌套:
<body>
<!-- 准备好一个容器-->
<div id="root">
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue启动时生成生产提示
//student组件
const student=Vue.extend({
template:`
<div>
<h3>学生姓名:{{name}}</h3>
<h3>年龄:{{age}}</h3>
</div>
`,
data(){
return{
name:"张三",
age:18
}
}
});
//school组件
const school=Vue.extend({
template:`
<div>
<h3>学校名称:{{name}}</h3>
<h3>地址:{{address}}</h3>
<student></student>
</div>
`,
data(){
return{
name:"南充职业技术学院",
address:"南充"
}
},
components:{
student
}
});
//hello组件
const hello=Vue.extend({
template:`
<div><h2>{{msg}}</h2></div>
`,
data(){
return{msg:"你好世界"}
}
});
//定义app组件
const app=Vue.extend({
template:`<div><hello></hello>
<school></school></div>`,
components:{
school,
hello
}
});
new Vue({
el:"#root",
template:`<app></app>`,
//注册组件(局部)
components:{
app
},
});
</script>
</body>
2.4、VueComponent:
关于VueComponent:
1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
2.我们只需要写<school/>
或<school></school>
,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)
。
3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!
4.关于this指向:
-
(1).组件配置中:
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。 -
(2).new Vue(options)配置中:
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。Vue的实例对象,以后简称vm。
<body>
<!-- 准备好一个容器-->
<div id="root">
<school></school>
<hello></hello>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue启动时生成生产提示
//school组件
const school=Vue.extend({
template:`
<div>
<h3>学校名称:{{name}}</h3>
<h3>地址:{{address}}</h3>
<button @click="showName">点我提示信息</button>
</div>
`,
data(){
return{
name:"南充职业技术学院",
address:"南充"
}
},
methods: {
showName(){
console.log(this);
}
},
});
const hello=Vue.extend({
template:`<h2>{{msg}}</h2>`,
data(){
return {msg:"你好啊"}
}
});
//console.log(school);
// console.log(hello);
const vm=new Vue({
el:"#root",
//注册组件(局部)
components:{
school,
hello
},
});
//vm身上的组件实例
console.log(vm.$children);
</script>
</body>
2.5、一个重要的内置关系:
1.一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
2.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。
<body>
<!-- 准备好一个容器-->
<div id="root">
<school></school>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue启动时生成生产提示
//往Vue身上添加一个属性,证明VueComponent.prototype.__proto__ === Vue.prototype,组件可以使用Vue原型上的属性
Vue.prototype.testX="测试原型上的属性";
//school组件
const school=Vue.extend({
template:`
<div>
<h3>学校名称:{{name}}</h3>
<h3>地址:{{address}}</h3>
<button @click="showName">点我提示信息</button>
</div>
`,
data(){
return{
name:"南充职业技术学院",
address:"南充"
}
},
methods: {
showName(){
//this就是组件实例对象
console.log(this.testX);
}
},
});
const vm=new Vue({
el:"#root",
//注册组件(局部)
components:{
school,
},
});
</script>
</body>
3、单文件组件
创建下图的文件夹和里面的几个文件
School.vue
文件如下:
<template>
<!-- 组件的结构 -->
<div class="demo">
<h2>学校名称:{{name}}</h2>
<h2>地址:{{address}}</h2>
<button @click="showName">点我提示信息</button>
</div>
</template>
<script>
//组件交换相关的代码(数据、方法等)
export default {
name:"School",
data(){
return{
name:"家里蹲大学",
address:"某国"
}
},
methods:{
showName(){
alert(this.name);
}
}
};
</script>
<style>
/* 组件的样式 */
.demo{
background-color: aqua;
}
</style>
Student.vue
文件和上面差不多 ,即不再写了。
App.vue
文件如下:
<template>
<div>
<School></School>
<Student></Student>
</div>
</template>
<script>
//引入组件
import School from "./School.vue";
import Student from "./Student.vue";
export default {
name:"App",
components:{
School,
Student
}
}
</script>
main.js
文件如下:
import App from "./App.vue";
new Vue({
el:"#root",
template:`<App></App>`,
components:{
App
}
});
index.html
文件如下:当然,这个文件必须在vue脚手架环境运行,浏览器无法直接运行引入模块和直接引入使用.vue
结尾的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
</div>
<!--引入vue-->
<script src="../vueBaseJs/vue.js"></script>
<!--引入组件 -->
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器