vue2的脚手架笔记总结2

流殇꧂

于 2024-06-28 22:03:45 发布

阅读量1.1k

点赞数 26

分类专栏： vue 文章标签：笔记 vue2

本文链接：https://blog.csdn.net/weixin_68926017/article/details/140053145

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

        webStorage

1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2.浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制(session 和 localStorage的功能一样，但是session会在浏览器关闭时清除数据)

3.相关API

                         3.1存储          localStorage.setItem("msg","hello") 接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值

                        3.2读取    JSON.parse('字符串') 转化为对象
   localStorage.getItem("msg") 接受一个键名作为参数，返回键名对应的值，读取指定信息,读取不存在的信息是null                 JSON.stringify('对象') 将对象转化为字符串

3.3删除                 localStorage.clear() 清空
localStorage.removeItem('msg') 接受一个键名作为参数，并把该键名从存储中删除

        组件的自定义事件

1.一种组件间通信的方式，适用于：子组件 ===> 父组件

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件：

3.1第一种方式，在父组件中：
<StudentB @xiao="getStudentB"/>
3.2第二种方式，在父组件中：
<StudentB ref="stu"/> 
  mounted() {
    this.$refs.s.on('绑定了ref的组件stu',()=>{})
  },
若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

4.触发自定义事件：
this.$emit('事件名',数据)
5.解绑自定义事件
this.$off('事件名')
                        组件上也可以绑定原生DOM事件，需要使用native修饰符。

      全局事件总线（GlobalEventBus）

1.一种组件间通信的方式，适用于任意组件间通信。

2.安装全局事件总线：

                        2.1 创建一个VueComponent的实力作为全局事件总线
const Demo = Vue.extend()
Vue.prototype.x = new Demo()
2.2在vue生成前创建
  beforeCreate(){ 
  Vue.prototype.$bus = this  //安装全局事件总线，$bus就是当前应用的vm
  }
3.使用事件总线(谁需要谁创建，停用时销毁),接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身(创建和销毁在一个组件中)。

3.1创建
  mounted(){
    this.$bus.$on("xxx",()=>{ })
  }
             3.2使用
methods(){
  this.$bus.$emit('xxx',...params)
}
3.3销毁
  beforeDestroy(){
    this.$bus.$off('xxx')
  }
        消息订阅与发布（pubsub）

                1.一种组件间通信的方式，适用于任意组件间通信。

                2.使用步骤

2.1安装pubsub
npm i pubsub-js
2.2引入
import pubsub from 'pubsub-js'
2.3订阅数据,订阅的是用来接收数据的组件,A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
  mounted(){ 
   this.pubId=   pubsub.subscribe("hello",(a,b)=>{console.log('发布消息',a,b)})
  },
  beforeDestroy(){ 
    pubsub.unsubscribe(this.pubId)
  }
            2.4发送数据
   g(){
      pubsub.publish('hello',777)
   }
nextTick

1. 语法
this.$nextTick()
2.作用：在下一次 DOM 更新结束后执行其指定的回调。

3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

        Vue封装的过度与动画

                1.作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

                2.写法

          2.1准备好样式

                        元素进入的样式（v指的是transition的name）

                                v-enter：进入的起点

                                v-enter-active：进入过程中

                                v-enter-to：进入的终点

                        元素离开的样式：

                                v-leave：离开的起点

                                v-leave-active：离开过程中

                                v-leave-to：离开的终点
@keyframes lll {
   from{
      transform: translateX(-100%);
   }
   go{
      transform: translateX(0);
   }
}
.v-enter-active{
   animation: lll 1s linear;
}
.v-leave-active{
   animation: lll 1s linear reverse;
}
如果transition有name需要把v改成name的值
3.使用<transition>包裹要过度的元素，并配置name属性：
<transition name="hello">
    <h1 v-show="isShow">你好啊！</h1>
</transition>
4.若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。
   <transition-group appear name="leq">
    <h1 v-show="ishidden"  key="2"> 123</h1>
      <h1 v-show="!ishidden" key="1" > 123</h1>
   </transition-group>
5.animate样式库

5.1安装样式库
  npm install animate.css
5.2配置,在官网寻找所需样式
   <transition-group 
   appear
   name="animate__animated animate__bounce" 
   enter-active-class="animate__rubberBand"
   leave-active-class="animate__backOutUp"
   >
    <h1 v-show="ishidden" key="1" > 123</h1>
   <h1 v-show="!ishidden"  key="2"> 123</h1>
   </transition-group>
5.3animate动画样式官网