组件的定义与使用

组件的传参

父App.vue 传给子CounterCom.vue

主要使用的是props

CounterCom.vue 组件中
1.接收参数并定义默认值
props:{
    "num":{type:Number,default:1}
}
2.使用参数num
data(){
    return {counter:this.num}
}

App.vue文件中

使用props
父传给子的数组是只读的(做默认值,读取显示)
不能进行修改

 实现点击加1功能

 子组件数据传递给父组件

使用的事件 $emit

CounterCom.vue

App.vue

$emit(事件名,事件值)  发送一次事件,事件名(counterchange)和事件值(counter) 是自定义的

$event 固定写法,事件的值(counterchange 事件的值,也是子组件$emit的第二个参数)

组件设计(购物车加减个数)

 props

1.     默认值:value
2.     最大值:max
3.     最小值:min
4.     步进制:step(一次加多 多少)

data
    被改变的值:num 加add
methods 
    加add
    减minus
事件
    numchange 数字发送变化
template
    -
    
    +

组件设计(幻灯片)

<template>
	<div class="swiper" @mousemove="overHd" @mouseout="auto">
		
		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind===index">
			<img :src="item" alt="" width="100%">
		div>
		
		
		<div class="thumbs">
			
			
			<span class="thumb" @click="index=item-1" :class="{'active':item===index+1}" v-for="item in gallery.length" :key="item">{{item}}span>
		div>
	div>
template>
 
<script>
	// item 1,2,3,4
	// index0
	export default{
		props:{
			// 引用类型的默认值必须是函数返回数据
			gallery:{
				type:Array,
				default(){return []}
			}
		},
		data(){
			return {
				// 默认显示
				index:0,
				stopID:null,//停止id
			}
		},
		// 当组件创建完毕,执行自动播放
		created() {
			this.auto();
		},
		methods:{
			// 自动播放
			auto(){
				this.stopID=setInterval(()=>{
					// 每隔2500毫秒让index值加1
					// 检查index的边界
					this.index++;
					this.check()
				},2500)
			},
			// 鼠标移入停止
			overHd(){
				clearInterval(this.stopID);
			},
			// 检查边界
			check(){
				// 如果index等于gallery长度 让index值为0
				if(this.index>=this.gallery.length){
					this.index=0
				}
			}
		}
	}
script>
 
<style scoped="scoped">
	.swiper{
		position: relative;
	}
	.thumbs{
		position: absolute;
		bottom: 10px;
		text-align: center;
		width: 100%;
	}
	.thumb{
		height: 15px;
		width: 15px;
		display: inline-block;
		border-radius: 15px;
		margin: 0 5px;
		background-color: #fff;
		/* 隐藏文本(首行缩进) */
		text-indent: 999em;
	}
	.thumb:hover{
		cursor: pointer;
		background-color: #f70;
	}
	.active{
		background-color: #f70;
	}
style>

<template>
	<div>
		<h1>swiper幻灯片组件h1>
		<SwiperCom style="width: 800px;" :gallery="gallery">SwiperCom>
	div>
template>
 
<script>
	// 01导入组件
	import SwiperCom from './components/SwiperCom.vue'
	export default {
		components: {
			SwiperCom
		},
		data() {
			return {
				gallery: [
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/290270b6fc499fc5fcb653417e99fe91.jpg?w=632&h=340",
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d1892854c8bb165e755d68bde287d71.jpg?w=632&h=340",
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340"
				]
 
			}
		}
	}
script>
 
<style>
style>

组件设计(跑马灯)

//vue.app
<template>
	<div>
		<h1>文字滚动h1>
		
		<MarQuee :inter='100' str="vue 学好,月薪过万,很容易!">MarQuee>
		<MarQuee :inter='200' str="我喜欢jsdjn!">MarQuee>
	div>
template>
 
<script>
	// 导入组件
	import MarQuee from './components/MarQuee.vue'
	export default{
		// 注册组件
		components:{
			MarQuee
		}
	}
script>
 
<style>
style>
 
 
//MarQuee.vue
<template>
	<div>
		{{msg}}
	div>
template>
 
<script>
	export default {
		props:{
			inter:{type:Number,default:50},//滚动的速度
			str:{type:String,default:''},//滚动的初始文本
		},
		data(){
			return{
				msg:this.str //显示文本
			}
		},
		created() {
			// 组件创建完毕,调用自动播放
			this.auto();
		},
		methods:{
			auto(){
				setInterval(()=>{
					// 把msg的文本第一个字符放到最后一个
					// slice(1)从第一截取到最后
					// slice(0,1)截取第0个字符
					this.msg=this.msg.slice(1)+this.msg.slice(0,1)
				},this.inter)
			}
		}
	}
script>
 
<style>
style>

生命周期

概念

每个组件从创建到销毁都会经历一系列特定的过程，称为生命周期
把过程执行的回调函数称为生命周期函数

作用

创建后发起ajax请求
挂载后操作dom
添加事件监听
销毁前移除间隔调用，事件监听
说明：并不是每个生命周期都必须使用 

 创建前后

beforeCreate创建前
    特点： 有this，没有data与methods

created创建后
    特点： 有data，没有$el，dom节点
    用处： ajax请求，定时器，事件监听

 挂载前后

beforeMount挂载前
    特点： 有$el,数据没有渲染

mounted挂载后
    特点： 有dom节点，数据也渲染
    用处： 操作节点，ajax请求

 更新前后

beforeUpdate更新前
    特点：会执行多次  数据更新，dom节点没有更新

updated更新完毕
    特点：会执行多次 数据更新，dom节点也更新

 销毁前后

beforeDestroy销毁前
    特点： 数据可以更新，视图已经不更新
    用处： 移除事件监听，停止定时器

destroyed销毁完毕
    特点： 没有this，切换视图与vue实例的联系