【无标题】

mttp02

已于 2023-02-08 21:40:42 修改

阅读量166

点赞数

文章标签： vue.js javascript 前端

于 2023-02-08 16:17:28 首次发布

本文链接：https://blog.csdn.net/m0_74348480/article/details/128933495

版权

中间人模式!

<body>
<div id="box">
<button @click="handleAjax">ajax</button>
<film-item v-for="item in datalist" :key="item.filmId": mydata="item">

<film-item :filmData="filmData"></film-item>
</div>


<script>
Vue.component( "filmItem",{
props: [ "mydata"]，
template:`
<div class="item">
<img :src="mydata.poster" />
{{imydata.name}}
<div>
<button @click="handleclick">详情</button>
</div>
</div>`
,
methods:{
handleclick(){

this.$emit("event",this.mydata.synopsis)

}
}})
vue.component( "filmDetail",{
template: 
<div class="filminfo">
1111111111
</div>

new Vue({
el: "#box",data:{
datalist:[]},
methods:{
handleAjax(){
fetch("./json/test.json")
.then(res=>res.json()).then(res=>{
console.log(res.data.films)this.datalist = res.data
.films
})
},


handleEvent(data){
console.log("父组件定义)
}
</script>

中央事件总线

var bus = new Vue()
// bus.$on监听
// bus.$emit触发


Vue.component( "filmItem" ,{
props: [ "mydata"],
template: `
<div class="item">
<img :srC="mydata.poster" />{{mydata.name}}
<div>
<button @click="handleclick">详情</button></div>
</div>`
,

//生命周期
mounted(){
//console.log("当前组件上树后触发")
bus.$on( "kerwin" ,(data)=>{
console.log("1111111",data)
this.info =data
})
},

-ref组件通信

ref -绑定dom节点，拿到的就是 dom对象
ref-绑定组件，拿到的就是组件对象

组件

//属性–父组件传给你的属性,只有父组件可以重新传,但不允许子组件随意修改.
//状态–组件内部的状态,可以随意修改

动态组件

在这里插入图片描述
省略

<!-- <home v-show=" which=== 'home' "></home>
<list v-show=" which=== 'list' "></list>
<shopcar v-show=" which=== 'shopcar' "></shopcar> -->
<keep-alive>

<component :is="which"></component>
</keep-alive>

-旧版slot

在这里插入图片描述

<div slot="a">11111111111111</div>
<div slot="b">22222222222222</div>

<slot name="a"></slot>
<slot name="b"></slot>

插槽

vue.component( "navbar",{
template:`
<div>
<slot name="left"></slot>
<span>navbar</span>
<slot name="right"></slot>
</div>`

})

新版slot

在这里插入图片描述

-过渡双未

在这里插入图片描述

.aaa-enter-active {animation: aaa 1.55;}
/*出场动画*/
.aaa- leave-active {
animation: aaa 1.5s reverse;}
@keyframes aaa {
0% {
opacity: 0;
transform: translatex( 100px);}
100% {
opacity: 1;
transform: translatex(Opx);}
}

在这里插入图片描述

交替

过渡中的diff算法

在这里插入图片描述

生命周期

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

vue生命周期可以分为八个阶段，分别是：

beforeCreate（创建前）、
created（创建后）、
beforeMount(载入前)、
mounted（载入后）、
beforeUpdate（更新前）、
updated（更新后）、
beforeDestroy（销毁前）、
destroyed（销毁后）

1、创建前（beforeCreate）

对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。

2、创建后（created）

对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。
在这里插入图片描述

3、载入前（beforeMount）

对应的钩子函数是beforemount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
依赖于dom创建之后，才进行初始化工作的插件
(轮播插件）
订阅bus.$on
发ajax

4、载入后（mounted）

对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

5、更新前（beforeUpdate）

对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。
在这里插入图片描述

6、更新后（updated）

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。
在这里插入图片描述

7、销毁前（beforeDestroy）

对应的钩子函数是beforeDestroy。在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。

8、销毁后（destroyed）

对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

-swiper组件-1

-vue3组件写法

console.log (vue.component工var obj = {
data(){
return {
myname : "kerwin"
}
},
methods:{
},
computed:{
}

var app = Vue.createApp(obj)
app.component( "navbar",{
props: [ "myname"],template:'
<div>
I
navbar-{{myname}}<slot>< /slot></div>
})
app.component ( "sidebar",{
template: `<div>
sidebar
</div>
})
app. mount( " #box")