组件(components)
以前我们讲过模块化,而模块化指的是纯js的部分,也就是纯逻辑部分。
前端包含html、css、js。前端提出了一个组件化思想:
组件化:指把html、css、js通过某种规范把它蹂躏在一起。然后我通过书写标签的方式,那么就复用了某段代码(包含你封装好的html、css、js),那封装好的这个东西就叫组件 。
组件化一定是包含模块化的(每个组件都是独立的)、而模块化不等于组件化。
定义
组件(component)在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,为了分工明确,可以使用组件对一些抽象的功能进行封装.
作用
- 提高代码的复用率
组件注册
局部注册组件
- 1.组件名自定义
- 2.组件的值是一个Object
- 3.组件中要展示的模板内容,存放在template 属性中
- template当中有且只能有一个根节点。
<div id="app">
<one></one>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
//注册组件/声明组件/创建组件
components:{
one:{ //one理解为组件的名称,随意起即可。
template:`<div><div>我是one组件1</div><div>我是one组件2</div></div>`
}
}
})
</script>
全局注册组件
Vue.component('自定义的组件名',{template:'在模板中展示的内容'})
全局注册组件和局部注册组件的区别
- 全局注册组件:可以在任何vue实例使用
- 局部注册组件:只能在当前vue实例使用
<div id="app">
<one></one>
<two></two>
</div>
<div id="root">
<one></one>
<!-- two:报错。因为two即没有定义全局组件,也没有在root实例中定义局部组件-->
<two></two>
</div>
<script src="vue.js"></script>
<script>
Vue.component('one',{
template:'<div>one组件,全局注册的</div>'
})
new Vue({
el: '#app',
data: {
},
components:{
two:{
template:`<div>我是two组件1</div>`
}
}
})
new Vue({
el:'#root'
})
</script>
组件名称
- 建议组件名称使用小驼峰声明, 在视图中调用时,将首字母大写转为 "-小写"即可
- 在template模板中.有且只能有一个根节点. 如果内容需要换行时,使用模板字符串
template模板
<div id="app">
<one></one>
</div>
<template id="a">
<div><div>我是one组件1</div><div>我是one组件2</div></div>
</template>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
//注册组件/声明组件/创建组件
components:{
one:{ //one为组件的名称,随意起即可。
//template:`<div><div>我是one组件1</div><div>我是one组件2</div></div>`
template:'#a'//template可以指定 前面定义的template的模板的id属性名称
}
}
})
</script>
根组件与组件
- 一个根组件是一个Vue实例 ,根组件中有很多选项: el data methods watch computed filters template render components 8个钩子函数.
- 一个组件是一个VueComponent实例,组件中同样有很多选项: 除了el不可再次挂载,其他都可以写。 包括components(即可以再套组件),但这些属性包括各个属性中的数据或方法都是各个组件所私有的。
<div id="app">
</div>
<script src="vue.js"></script>
<script>
// new Vue() 是一个特殊组件,是个根组件,所有显示的东西都会落实在#app中。
new Vue({
el:'#app',
components:{
//除了el,其它都有 data methods filters watch computed template render8个生命周期钩子函数
},
template:'',
//8个生命周期钩子函数
})
</script>
组件的嵌套
- 组件A中定义组件B,那么B只能在A中使用。
- 只有全局的数据在所有组件中都可以使用。
- 组件与组件中都是私有的、独立的。
<div id="app">
{{username}}
<v-a></v-a>
</div>
<script src="vue.js"></script>
<template id="a">
<div class="c-a">
my is a component
<v-b></v-b>
</div>
</template>
<template id="b">
<div>
my is b component
</div>
</template>
<script>
new Vue({ // app组件实例
el: '#app',
data: {
username:'vue实例的username'
},
components:{
'vA':{ //A 组件实例,它访问不到上层的data数据,需要自己定义data
template:'#a',
components:{
'vB':{
template:'#b' //b组件是在a组件中定义的,那就意味着只在在a组件中使用b组件
}
}
}
}
})
</script>
data的用法
根组件中data是一个对象
- 在js中对象类型里的属性本身是属于引用类型,不管数据被复用多少次,数据都是处于共享状态,一旦data数据发生改变,那么所有复用的地方都会发生改变。
组件中data为函数
- 组件可复用vue实例,组件一旦被创建好之后,就有可能被复用在各个地方,不管组件被复用了多少次,他们之间的数据都应该是相互独立,互不影响的.
- 在组件中,data被声明为函数返回值的形式,利用函数的独立作用域即闭包,保存变量数据,相当于为每一份组件开辟一个独立的空间.这个空间维护着各自的数据,不管组件被复用多少次,组件之间数据都是相互独立的
<body>
<div id="app">
<v-one></v-one>
<v-one></v-one>
</div>
<template id="one">
<div class="box">
{{num}}
<button @click="num++">++</button>
</div>
</template>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
components: {
vOne: {
template: '#one',
data: function () { //组件中的data用的是函数,更加保证数据的私有性
return {
num: 0 //保证这里
}
}
},
}
})
</script>
</body>
脚手架安装(重点)
快速的把我们所需项目结构给搭建好。
下载安装脚手架
一定得先安装node
1.npm i @vue/cli -g #全局安装脚手架
2.vue -V #查看版本
通过脚手架创建项目
- 方式一
vue create 项目名称
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OzaF9bAq-1637323745932)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447331890.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HVnens2y-1637323745934)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447506433.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gVypWGlP-1637323745936)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447542841.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d7AYf4q4-1637323745940)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447587511.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A5JsPMxn-1637323745945)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447697973.png)]
- 方式二: 可视化面板的方式
注意:不要有中文路径 。
vue ui
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QZRrpIoE-1637323745950)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636447872440.png)]
项目目录
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0hCJ2rKY-1637323745951)(C:/Users/Administrator/Desktop/%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0/%E7%AC%AC%E5%9B%9B%E9%98%B6%E6%AE%B5/bj_803_4/day04/%E7%AC%94%E8%AE%B0/assets/1636448324693.png)]
- node_modules: 项目所需依赖,不用发给别人
- public : 项目运行的根目录
- src : 项目的源代码文件夹(自己的代码一定是放在src中的)
.gitignore git上传的忽略配置信息
babel.config.js babel的配置,不用管
package.json 项目的配置信息
readme.md 读我
vuter插件.
脚手架组件注册
关于.vue文件
components:{
组件名称:{
template:"具体的模板字符串",
data,
methods,
filters,
//样式
}
}
- vue是面向组件化编程。
- vue为了方便编程,提出了以.vue为后缀的单文件组件。组件由html、css、js组成
- 每一个.vue文件就是一个独立的组件。
- 因此暴露时不需要写template属性,直接引入注册即可。
<template>
<根节点>
</根节点>
</template>
<script>
export default {
//这里不需要使用template属性
}
</script>
<style>
</style>
局部注册
import vHello from "./components/vHello"; //.vue 后缀可以省略
//局部注册
export default {
components: {
vHello,
},
};
全局注册
在main.js中注册 Vue.componet
//全局注册组件
import vHeader from './components/vHeader'
Vue.component( 'vHeader',vHeader )
v-if与v-show的生命周期影响
- v-if符合条件会创建组件的生命周期,不符合条件不会创建生命周期。
- v-show不管符合不符合条件都会创建生命周期,但只会创建一遍,之后利用样式控制显示与否。
scoped 样式的问题
- 每一个.vue的style上加一个 scoped属性,那么样式只会对本页面的组件产生作用。
部注册
export default {
components: {
vHello,
},
};
### 全局注册
在main.js中注册 Vue.componet
```js
//全局注册组件
import vHeader from './components/vHeader'
Vue.component( 'vHeader',vHeader )
v-if与v-show的生命周期影响
- v-if符合条件会创建组件的生命周期,不符合条件不会创建生命周期。
- v-show不管符合不符合条件都会创建生命周期,但只会创建一遍,之后利用样式控制显示与否。
scoped 样式的问题
-
每一个.vue的style上加一个 scoped属性,那么样式只会对本页面的组件产生作用。
-
app.vue一般不加scoped,我们可以当作全局样式。