一.组件介绍和注册
1.定义:
组件是组成完整页面常用功能模块的封装
简单来讲:组件就是组成页面的零部件
2.组件的组成部分
- 视图(html)
- 样式(css)
- 逻辑(js)
3.作用
- 提高开发效率(提高代码的复用率)
- 提高代码的可维护性
4.注册
- 全局注册
书写格式
Vue.component('组件的名称',{
template:'要渲染到页面中的内容'
})
eg:
// 全局注册组件
Vue.component('one',{
template:'<div>全局注册组件</div>'
})
- 局部注册
书写格式
new Vue({
el:'',//需要挂载的点
components:{
组件名称:{
template:'要渲染到页面中的内容'
}
}
})
eg:
// 局部注册组件
components:{
two:{
template:'<h2>局部注册组件</h2>'
}
}
- 全局注册和局部注册的区别
全局注册组件:在任何vue实例中都能使用
局部注册组件:只能在当前vue实例中使用
注意事项:
Vue.component('one',{
template:`<div>
全局注册组件
</div>`
})
总结:
在注册组件中,template属性的值,可以使用'',但是不能换行,如果需要换行,使用``即可.
5.组件名称
* 1.不能使用现有标签作为组件名,eg :div p span img等等；
* 2.不能使用现有标签的大写作为组件名,eg: DIV Div dIv
* 3.如果组件名中包含有大写,需要将大写转换为 -小写
* 4.建议定义组件名时使用小驼峰法,方便书写
* 5.template属性模板中只能有一个根节点
6.template(模板[标签])
使用template模板替换template属性的值
<!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>
<!-- 1.引入vue.js -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<v-header></v-header>
<v-one></v-one>
</div>
<!-- one模板 -->
<template id="one">
<div>
<div>王一博</div>
<p>hello</p>
</div>
</template>
<!-- header模板 -->
<template id="header">
<div>
<h1>赵丽颖</h1>
</div>
</template>
<script>
// 3.实例化vue
new Vue({
el:'#app',
// 数据
data:{},
// 方法
methods:{},
components:{
/**
* 1.不能使用现有标签作为组件名,eg :div p span img
* 2.不能使用现有标签的大写作为组件名,eg: DIV Div dIv
* 3.如果组件名中包含有大写,需要将大写转换为 -小写
* 4.建议定义组件名时使用小驼峰法,方便书写
*
*/
vHeader:{
template:'#header'
},
vOne:{
template:'#one'
}
}
})
</script>
</body>
</html>
一个组件是一个新的vueComponent实例
<!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>
<!-- 1.引入vue.js -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<v-one></v-one>
<v-two></v-two>
</div>
<!-- one模板 -->
<template id="one">
<div>
<h1>one组件</h1>
</div>
</template>
<!-- two模板 -->
<template id="two">
<div>
<h1>two组件</h1>
</div>
</template>
<script>
// 3.实例化vue
new Vue({
el:'#app',
// 数据
data:{},
// 方法
methods:{},
components:{
// 1.一个组件是一个新的vueComponent实例
vOne:{
template:'#one',
beforeCreate(){
console.group('子创建之前');
console.groupEnd()
},
created(){
console.group('子创建完成');
console.groupEnd()
},
beforeMount(){
console.group('子挂载之前');
console.groupEnd()
},
mounted(){
console.group('子挂载完成')
console.log(this);
console.groupEnd()
}
},
vTwo:{
template:'#two'
}
},
beforeCreate(){
console.group('父创建之前');
console.groupEnd()
},
created(){
console.group('父创建完成');
console.groupEnd()
},
beforeMount(){
console.group('父挂载之前');
console.groupEnd()
},
mounted(){
console.group('父挂载完成')
console.log(this);
console.groupEnd()
}
})
</script>
</body>
</html>
7.data
在子组件中data是一个函数,并且要有返回值
<!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>
<!-- 1.引入vue.js -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<v-one></v-one>
</div>
<!-- one模板 -->
<template id="one">
<div>
<h2>{{name}}</h2>
<ul>
<li v-for="item in arr" :key="item">{{item}}</li>
</ul>
<div>{{user.age}}</div>
</div>
</template>
<script>
// 3.实例化vue
new Vue({
el:'#app',
// 数据
data:{},
// 方法
methods:{},
components:{
vOne:{
template:'#one',
// 在子组件中data是一个函数,并且要有返回值
// 组件是可复用的vue实例
data(){
return {
name:'谢娜',
arr:[1,2,3,4],
user:{
age:30
}
}
}
}
}
})
</script>
</body>
</html>
总结:
1.父vue实例:
区别:
1.挂载点选项为el:
2.data是一个{}
2.子vueComponent实例:
区别:
1.挂载点选项为:template
2.data(){return{}}
相同点:
methods,filters,computed,watch,components,以及8个生命周期都一致.
8.组件嵌套
1.template是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>
<!-- 1.引入vue.js -->
<script src="./vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.container{
width: 100vw;
height: 100vh;
background: grey;
display: flex;
flex-direction: column;
}
.header{
height: 100px;
background: orange;
}
.main{
flex:1;
display: flex;
}
.left{
width: 200px;
background: pink;
}
.right{
flex:1;
background: green;
}
.footer{
height: 100px;
background: orange;
}
</style>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
</div>
<!-- page模板 -->
<template id="page">
<div class="container">
<v-header></v-header>
<v-main></v-main>
<v-footer></v-footer>
</div>
</template>
<!-- header模板 -->
<template id="header">
<div class="header">
header
</div>
</template>
<!-- main模板 -->
<template id="main">
<div class="main">
<v-left></v-left>
<v-right></v-right>
</div>
</template>
<!-- footer模板 -->
<template id="footer">
<div class="footer">
footer
</div>
</template>
<!-- left模板 -->
<template id="left">
<div class="left">
left
</div>
</template>
<!-- right模板 -->
<template id="right">
<div class="right">
right
</div>
</template>
<script>
// left
const vLeft = {
template:'#left'
}
const vRight = {
template:'#right'
}
const vHeader = {
template:'#header'
}
const vMain = {
template:'#main',
components:{
vLeft,
vRight
}
}
const vFooter = {
template:'#footer'
}
const vPage = {
template:'#page',
components:{
vHeader,
vMain,
vFooter
}
}
// 3.实例化vue
new Vue({
el:'#app',
// 数据
data:{},
// 方法
methods:{},
// components组件的注册
components:{
vPage
},
template:'<v-page></v-page>'
})
</script>
</body>
</html>
总结:
template的用法
1.在子组件中template指组件的挂载点,
2.template模板,包裹子组件的作用域
<template id="one">
<div>
子组件内容
</div>
</template>
3.在vue实例选项中使用template,作用:渲染组件到模板中
9.动态组件
component是系统自动注入的标签- 作用:通过
component标签实现动态组件- 实现:
component标签结合is属性来实现动态组件
- 实现:
- 作用:通过
9.缓存组件
keep-alive是系统自动注入的组件- 作用:实现组件的缓存(为了避免重复的创建和销毁组件)
- 使用: 需要缓存的组件被
keep-alive包裹起来
10.缓存组件的生命周期钩子函数
-
activated组件激活时自动被触发 -
deactivated组件失活时自动被触发-
注意事项
-
activated和deactivated只能在缓存组件中使用.
-
<!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>
<!-- 1.引入vue.js -->
<script src="./vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<button @click="change('login')">登录</button>
<button @click="change('reg')">注册</button>
<button @click="change('home')">首页</button>
<hr>
<!-- 方式二: component标签来实现动态组件 -->
<keep-alive>
<component :is="isShow"></component>
</keep-alive>
</div>
<!-- 登录模板 -->
<template id="login">
<div class="login">
<h2>{{title}}</h2>
</div>
</template>
<!-- 注册模板 -->
<template id="reg">
<div class="reg">
<h2>{{title}}</h2>
</div>
</template>
<!-- 首页模板 -->
<template id="home">
<div class="home">
<h2>{{title}}</h2>
</div>
</template>
<script>
// 登录组件
const login = {
template:'#login',
data(){
return {
title:'欢迎登录'
}
},
// 创建完成
created(){
console.log('login-create');
},
// 激活时
activated(){
console.log('login-activated');
},
//失活时
deactivated(){
console.log('login-deactivated');
}
}
// 注册组件
const reg = {
template:'#reg',
data(){
return {
title:'欢迎注册'
}
},
// 创建完成
created(){
console.log('reg-create');
},
// 激活时
activated(){
console.log('reg-activated');
},
//失活时
deactivated(){
console.log('reg-deactivated');
}
}
// 首页组件
const home = {
template:'#home',
data(){
return {
title:'欢迎来到首页'
}
},
// 创建完成
created(){
console.log('home-create');
},
// 激活时
activated(){
console.log('home-activated');
},
//失活时
deactivated(){
console.log('home-deactivated');
}
}
// 3.实例化vue
new Vue({
el:'#app',
// 数据
data:{
isShow:'login'
},
// 方法
methods:{
change(name){
this.isShow = name
}
},
components:{
login,
reg,
home
}
})
</script>
</body>
</html>
二.脚手架
1.安装webpack
作用:webpack其实就是一个打包工具
没有安装:
npm i webpack -g
npm i webpack-cli -g
webpack -v 查看版本
2.cli:command-line-interface(命令行接口)
3.安装vue脚手架:
目的:为了快速开发
npm i vue-cli -g
vue -V 查看版本
4.通过脚手架创建项目
vue init webpack 项目的名称
cd 项目名称
npm i 安装依赖项
npm run dev 项目运行
5.项目运行成功之后: http://localhost:8080
6.打包项目:
npm run build
1.脚手架目录介绍
-build #webpack的项目配置文件
-config #项目的配置文件
-node_modules # 项目的依赖包
-src #你的项目代码
-static #静态资源文件(img js css )
1.static中的静态资源文件在index.html中引入
2.static中的静态资源文件不参与压缩打包
.babelrc #es6转es5的配置文件
.editorconfig #编辑器的配置项
.gitignore #上传到git上需要忽略的文件
.postcssrc.js #css的配置项
index.html #唯一的页面
package.json #项目的相关信息及依赖包的相关版本
README.md #项目启动信息
-src
-assets: #静态资源文件(img js css )
1.assets中的静态资源文件在main.js入口文件中引入
2.assets中的静态资源文件参与压缩打包
-components:#局部组件
-common #公共组件
-utils #工具类
-store #状态管理
-page #我自己的代码
App.vue #根组件
main.js #唯一的入口文件
vuter vscode的插件
2.项目介绍
1.安装项目
vue init webpack 项目名称
2.清空工作
assets 清空
components 清空
App.vue 内容清空 vue 产生模板
main.js
三.面试题
1.列举出在vue中组件的定义方式有哪几种？
2.组件中的data为什么必须是函数？
答案：组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，
组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。
组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，
类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。
而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
3.vue-cli中怎样定义和使用组件？
4.请说出vue-cli项目中src目录每个文件夹和文件的用法？
扫一扫
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
