vue组件化编程
vue组件化编程传统的编程方式:学了vue之后,我们需要了解组件是什么组件的定义:实现应用中局部功能代码和资源的集合为什么我们需要组件,因为一个界面功能很复杂,我们可以利用组件复用编码,简化项目编码,提高运行效率什么是模块化:将庞大的js模块化的拆分成多个js文件什么是组件化:应用里面按照功能点拆分的组件vue中如何定义(创建一个组件)非单文件组件:...
一.vue组件化编程
传统的编程方式:
学了vue之后,我们需要了解组件是什么
组件的定义:实现应用中局部功能代码和资源的集合
为什么我们需要组件:
因为一个界面功能很复杂,我们可以利用组件复用编码,简化项目编码,提高运行效率
除了了解组件,我们还需要知道模块化和组件化是什么
什么是模块化:
将庞大的js模块化的拆分成多个js文件
什么是组件化:
应用里面按照功能点拆分的组件
二.vue中如何定义(创建一个组件)
组件有两种编写方式:
非(不是)单文件组件和单文件组件
非单文件组件:一个文件中包含n个组件
单文件组件:一个文件中只包含有1个组件
1.单文件组件
- 创建组件
const a = Vue.extend({ })
Vue.extend是一个函数要调用,并且调用的时候要传入配置对象({ })配置对象里可以传入很多东西都是用于控制组件相关内容
注意的是,创建vm时候的配置对象几乎都可以在这里面使用
const school = Vue.extend({
// el: '#root',组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务
data() {
return {
schoolName: '双语幼儿园',
address: '北京',
}
},
})
el: '#root'
,组件定义时,一定不要写el配置项,因为最终所有的组件都要被一个vm管理,由vm决定服务
组件就是一块砖哪里需要哪里搬,不能把它定义死了- data要写成函数形式且要有返回值return,如果写成对象形式,A修改school里面的内容,B看到的也是修改之后的,因为对象里面的内容地址是一个,data写成函数形式方便修改
2.注册组件(但是这是一个局部注册)
在注册组件里要写el,管理着其他的小弟
new Vue({
el: '#root',
components: {
school,//简写形式
student
}
})
components里面是key:value组合,key指的组件名,value指的是组件位置。与创建组件时的a相对应,说明创建组件时的const a这个a只是一个中转变量,简写形式可以把value删掉
上面的创建组件和注册组件只有数据没有结构
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
`,
data() {
return {
schoolName: '双语幼儿园',
address: '北京',
}
},
})
结构写在template里面,加了template:``之后school组件才是真正有意义的组件,school组件里面数据和结构都有
3.编写组件标签
<div id="root">
<!-- 第三步:编写组件标签 -->
<school></school>
</div>
只写一遍组件,写两遍组件标签,所有的样式结构都能被复用
2.单文件组件的嵌套
我们要将student组件嵌套在school组件里,需要将student组件写在school组件前面,这样就是先创建后注册将不会报错
接下来是注册组件,在school里面注册student组件
而 school组件里需要写components:{student, }
它与data同级
// 创建school组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<student></student>
</div>`,
data() {
return {
name: '双语幼儿园',
address: '北京'
}
},
components:{
student,
}
})
最后一步编写组件标签,在哪里注册的就编写在哪里,所以只用在school的div里加
他们三者之间的关系:
嵌套vue里面的效果:
app组件嵌套
app是众多组件中选出那个最优秀的组件来引领大家,属于是一人之下万人之上
所以我们只需要将那两下属的标签写在app里,
vue里面也只需要写 components: {app}
// 定义app组件
const app = Vue.extend({
template:`
<div>
<school></school>
<hello></hello>
</div>`,
components:{
school,
hello
}
})
new Vue({
el: '#root',
components: {app}
})
关于VueComponet:
1.school组件的本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
2.我们只需要写<school></school>或<school/>
,vue解析时会帮我们创建school组件的实例对象
即vue帮我们执行的:new VueComponent(options)
3.特别注意:每次调用vue.extend,返回的都是一个个全新的VueComponet
4.关于this指向:
(1)组件配置中:
data函数、methods中的函数、computed中的函数 他们的this均是VueComponet的实例
(2)new VueComponent(options)配置中:
data函数、methods中的函数、computed中的函数 他们的this均是Vue实例对象
5.VueComponet的实例对象,以后简称VC(也可称之为组件实例对象)
vue的实例对象,简称vm
vue和VueComponet的关系:
一个重要的内置关系:VueComponet.prototype.proto===Vue.prototype
为什么会有这个关系:让组件实例对象vc可以访问到vue原型上的属性、方法
3.单文件组件
创建.vue文件,这是最基本的结构,交互,样式
<template>
<!-- 组件的结构 -->
</template>
<script>
// 组件交互相关的代码(数据、方法)
</script>
<style>
/* 组件的样式 */
</style>
<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.schoolName)
}
},
}
</script>
<style>
.demo{
background:orange;
}
</style>
app.vue汇总所有的组件
打一个<v 模板就出来了
更多推荐
所有评论(0)