组件基础使用及脚手架安装
回顾
Q:1.动画的使用方法以及动画库的使用方式
2.vue中的指令有哪些？
3.vue中生命周期钩子函数有哪些？分别代表什么含义？
4.filter的语法是什么？
5.computed的特点是什么？
6.watch与computed的区别？
7.vue中的配置项有哪些？
8.页面中新增加属性后页面不渲染问题怎么解决？
9.数组中的forEach，some，every是如何使用的？
10.格式化时间时的补零操作两种方法？
padStart(位数，‘a’)头部补零(用a补)
padEnd(位数，‘a’)尾部补零
一、组件的基础使用
1.组件
特点：一组可复用的vue实例
组件化和模块化的区别？
组件化：组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性
特点：一个具有html+css+js的页面（单页面组件）
模块化：侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。
2.命名规则
<1>.不能以标签起名，包含大写
<2>.建议使用驼峰方式 需要把大写字母变为小写同时加上连字符：vOne——>v-one
<3>.首字母大写，后面直接写名字。如果后面有大写需要转换为驼峰 OneInfo——>One-info
3.用法：全局定义,局部定义
Vue.component(‘组件名’,{模板对象})
components:{组件名:{模板对象}}
4.template模板：要往页面上渲染的模板
特点：template 有且只能有一个根元素 通常是div
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<div id='app'>
<v-one></v-one>
<v-two></v-two>
<v-three></v-three>
</div>
</body>
<!-- 开发环境 -->
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
// 组件：一组可复用的vue实例
// 用法：全局定义,局部定义
// Vue.component('组件名',模板对象)
// components:{组件名:{模板对象}}
//必须要写在实例对象之前
Vue.component('vOne',{
// template:要往页面上渲染的模板
template:'<div>我是第一个组件</div>'
})
let vm = new Vue({
el: '#app',
data: {},
methods: {
},
components:{
vTwo:{
template:'<div>我是第二个模板对象<div>abc</div></div>'
},
vThree:{
template:`<div>我是第二个模板对象
<h2>我是标题2</h2>
</div>`
}
}
})
// 特点：template 有且只能有一个根元素 通常是div
</script>
</html>
5.组件嵌套
总结：
组件中关系：只有父子和非父子关系
嵌套:子组件只能在父组件中使用
组件中的data ：定义为方法，必须有返回值，同时返回值的类型为对象
data 中的数据只能供自己使用 如果其他组件需要使用需要传值 比如data,methods,filter,cmpputed,watch…
<body>
<div id='app'>
{{msg}}
<v-one></v-one>
</div>
<template id="temp1">
<div>
<h2>我是模板一</h2>
{{name}}
<!-- {{msg}} -->
<!-- <v-inner></v-inner> -->
</div>
</template>
<template id="temp2">
<div>
<h2>我是模板二</h2>
</div>
</template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
// 组件：一个可复用的vue实例
let vm = new Vue({
el: '#app',
data: {
msg:'hello '
},
methods: {
},
components:{
vOne:{
template:'#temp1',
components:{
vInner:{
template:'<div>我是里层嵌套的模板<v-three></v-three></div>',
components:{
vThree:{
template:'#temp2'
}
}
},
vOuter:{
}
},
data(){
return {
name:'张三'
}
}
}
}
})
// 总结：组件中关系：只有父子和非父子关系
// 嵌套:子组件只能在父组件中使用
// 组件中的data ：定义为方法，必须有返回值，同时返回值的类型为对象
// data 中的数据只能供自己使用 如果其他组件需要使用需要传值 比如：data,methods,filter,cmpputed,watch...
</script>
6.data使用
重点：组件中定义data为函数，原因是：为了共享数据但是又互相不干扰.
<body>
<div id='app'>
<div>{{msg}}</div>
<p>{{msg}}</p>
<button @click = 'change'>点击修改msg</button>
<hr>
<v-one></v-one>
<v-one></v-one>
</div>
<template id="temp1">
<div>
<p>{{content}}</p>
<button @click='changeOne'>修改内容</button>
</div>
</template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg:'abc'
},
methods: {
change(){
this.msg='123'
}
},
components:{
vOne:{
template:'#temp1',
data(){
return {
content:'我要被修改了'
}
},
methods: {
changeOne(){
this.content = '我被修改了'
}
},
}
}
})
// 总结:data定义为函数的原因:由于需要共享数据，但是又要互不干扰，所以定义为函数。
</script>
7.后台管理页面实现
注意：1.外层嵌套大盒子（container） 2.划分布局 3.书写组件 4.组件嵌套 5.添加样式
vw 视口宽度 viewWidth vh 视口高度
<style>
.container {
/* vw 视口宽度 viewWidth vh 视口高度 */
width: 100vw;
height: 100vh;
background-color: red;
display: flex;
flex-direction: column;
}
.header {
width: 100vw;
height: 100px;
/* flex:1; */
background-color: gold;
}
.footer {
width: 100vw;
height: 60px;
/* flex:2; */
background-color: teal;
}
.main {
flex: 1;
background-color: pink;
display: flex;
}
.left {
width: 150px;
background-color: purple;
}
.right {
flex: 1;
background-color: hotpink;
}
</style>
</head>
<body>
<div id='app'>
<App></App>
</div>
<template id="container">
<div class="container">
<v-header></v-header>
<v-main></v-main>
<v-footer></v-footer>
</div>
</template>
<template id="header">
<div class="header">
header
</div>
</template>
<template id="main">
<div class="main">
<v-left></v-left>
<v-right></v-right>
</div>
</template>
<template id="footer">
<div class="footer">
footer
</div>
</template>
<template id="left">
<div class="left">
left
</div>
</template>
<template id="right">
<div class="right">
right
</div>
</template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
let vRight = {
template: '#right'
}
let vLeft = {
template: '#left'
}
let vMain = {
template: '#main',
components: {
vLeft,
vRight,
}
}
let vFooter = {
template: '#footer'
}
let vHeader = {
template: '#header'
}
let App = {
template: '#container',
components: {
vHeader,
vMain,
vFooter,
}
}
// 可复用的vue实例
let vm = new Vue({
el: '#app',
data: {},
methods: {
},
components: {
App,
},
template:'<div>我是vm的模板</div>'
})
</script>
8.生命周期 --8个钩子函数 mounted 是最常用的
v-if 会引起生命周期的改变
v-show 不会引起
<body>
<div id='app'>
<div v-html='msg' v-if='isShow'></div>
<button @click='change'>点击</button>
<hr>
<v-one v-show='isShow'></v-one>
</div>
<template id="temp1">
<div>
<div v-if='show'>{{con}}</div>
<button @click='changeC'>点击切换内容</button>
</div>
</template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello world！',
isShow: true
},
methods: {
change() {
this.isShow = !this.isShow
}
},
components: {
vOne: {
template: '#temp1',
data() {
return {
con: '我是组件模板',
show: true
}
},
methods: {
changeC() {
this.con = '我被修改了!!!!!!!'
}
},
mounted() {
console.log('组件内容挂载完成')
},
destroyed() {
console.log('销毁执行了')
},
}
},
mounted() {
console.log('vm内容挂载完成')
},
destroyed() {
console.log('vm销毁执行了')
},
})
</script>
上述案例生命周期的执行过程为：
首先是vm实例的生命周期执行beforeCreate，created，beforeMount，之后是到组件走生命周期beforeCreate，created，beforeMount，mounted，最后是走vm的mounted。
9.脚手架
步骤：
//全局安装webpack
npm i webpack -g
//查看版本
webpack -v
//全局安装vue脚手架 2.x
npm i vue-cli -g
//查看版本
vue -V
以上操作只需要操作一次
//创建项目
vue init webpack demo
//进入项目
cd demo
//启动
npm run dev //localhost:8080
注意： 安装cnpm方法 淘宝镜像
npm i -g cnpm --registry=https://registry.npm.taobao.org
注意：
1.名字：不能带大写
2.目前全选n
3.在当前文件夹中不能有vue.js这个文件
1.index.html ->页面的入口文件
2.main.js->程序的入口文件
3.App.vue ->组件–>类似上午的containter
总结:
后台项目：
1.划分组件
App.vue->container 整个容器
header,footer，main，left，right 都是单独的组件 需要用谁直接 import导入就行
//点击弹框
局部定义弹框 首先要有弹框组件 alertbtn.vue 哪里用在哪里引入
<template>
<div class="left">
left
<v-alert></v-alert>
</div>
</template>
<script>
import vAlert from './aletrBtn'
export default {
components: {
vAlert
},
data() {
return {};
},
methods: {},
mounted() {},
};
</script>
<style>
.left{
width: 200px;
background: orange;
}
</style>
//全局引入弹框 需要在main.js中定义
// 引入弹框的组件
import vAlert from './components/aletrBtn.vue'
Vue.component('vAlert',vAlert)
<template>
<div class="header">
header
<v-alert></v-alert>//在其他页面只需要调用组件名即可 （v-alert）
</div>
</template>
<script>
export default {
}
</script>
<style>
.header{
width: 100vw;
height: 100px;
background: red;
}
</style>