组件的传参
<div id="blogColumnPayAdvert">
<div class="column-group">
<div class="column-group-item column-group0 column-group-item-one">
<div class="item-l">
<a class="item-target" href="https://blog.csdn.net/huijie_0716/category_11938102.html" target="_blank" title="vue" data-report-click="{"spm":"1001.2101.3001.6332"}">
<img class="item-target" src="https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="">
<span class="title item-target">
<span>
<span class="tit">vue</span>
<span class="dec">专栏收录该内容</span>
</span>
</span>
</a>
</div>
<div class="item-m">
<span>2 篇文章</span>
<span>0 订阅</span>
</div>
<div class="item-r">
<a class="item-target article-column-bt articleColumnFreeBt" data-id="11938102">订阅专栏</a>
</div>
</div>
</div>
</div>
<article class="baidu_pl">
<div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b3c43d3711.css">
<div id="content_views" class="htmledit_views">
<h1><a name="t0"></a>组件的定义与使用</h1>
组件的传参
父App.vue 传给子CounterCom.vue
主要使用的是props
CounterCom.vue 组件中
1.接收参数并定义默认值
props:{
"num":{type:Number,default:1}
}
2.使用参数num
data(){
return {counter:this.num}
}
App.vue文件中
<CounterCom :num="10">
使用props
父传给子的数组是只读的(做默认值,读取显示)
不能进行修改
实现点击加1功能
子组件数据传递给父组件
使用的事件 $emit
CounterCom.vue
<button @click="counter++; $emit('counterchange',counter)">
App.vue
<CounterCom @counterchange="n=$event">
$emit(事件名,事件值) 发送一次事件,事件名(counterchange)和事件值(counter) 是自定义的$event 固定写法,事件的值(counterchange 事件的值,也是子组件$emit的第二个参数)
组件设计(购物车加减个数)
props
- 默认值:value
- 最大值:max
- 最小值:min
- 步进制:step(一次加多 多少)
data
被改变的值:num 加add
methods
加add
减minus
事件
numchange 数字发送变化
template
<button>-</button>
<input/>
<button>+</button>
组件设计(幻灯片)
-
<template>
-
<div class="swiper" @mousemove="overHd" @mouseout="auto">
-
<!-- item 从1开始 -->
-
<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">
-
<!-- 当index值等于item的值添加.active 类 -->
-
<!-- 单击改变index的值，切换的轮播图 -->
-
<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与methodscreated创建后
特点： 有data，没有$el，dom节点
用处： ajax请求，定时器，事件监听
挂载前后
beforeMount挂载前
特点： 有$el,数据没有渲染mounted挂载后
特点： 有dom节点，数据也渲染
用处： 操作节点，ajax请求
更新前后
beforeUpdate更新前
特点：会执行多次 数据更新，dom节点没有更新updated更新完毕
特点：会执行多次 数据更新，dom节点也更新
销毁前后
beforeDestroy销毁前
特点： 数据可以更新，视图已经不更新
用处： 移除事件监听，停止定时器destroyed销毁完毕
特点： 没有this，切换视图与vue实例的联系
1552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
