slot、动画、过滤器、生命周期_slot阶段-优快云博客

本文链接：https://blog.youkuaiyun.com/tangxdashen/article/details/90647428

slot 可以让我们在组件中书写内容

    <div id="app">
        <Hello>
          <header>  头部  </header>
          <section> 内容 </section>
          <footer> 底部 </footer>
        </Hello>
      </div>
      <template id="hello">
        <div>
          hello
          <slot></slot>
        </div>
      </template>

    Vue.component( 'Hello', {
        template: '#hello'
      })
      new Vue({
        el: '#app'
      })

具名插槽 ```javascript

头部
内容
底部

hello

``` 过渡与动画

vue中实现过渡或是动画一共提供了这样四种形式：在 CSS 过渡和动画中自动应用 class — 自己写css3动画

可以配合使用第三方 CSS 动画库，如 Animate.css – 别人写好了类名，我们用

在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画

可以配合使用第三方 JavaScript 动画库，如 Velocity.js – 用别人写好的动画库

vue只要一使用transition组件就会自动添加6个类名和 8 个钩子函数
transition组件如果有name选项，就可以将类名 v- 换成 ‘name’- 类名
使用第三方的css过渡库 animate.css

<transition 
  name="fade" mode="out-in"
  enter-active-class = "animated slideInLeft"
  leave-active-class = "animated slideOutLeft"
>
  <p v-show = 'flag'> 切换的内容 </p>
</transition>

动态组件动态组件是vue内部提供了一个叫做component的组件，这个组件身上可以通过绑定is属性来进行组件的切换 keep-alive组件可以进行组件的内容缓存，将组件的内容存入浏览器缓存中，这样可以大大的节省街切换的事件 keep-alive 和 component动态组件两者常常一起搭配使用

过滤器

过滤器： vue 1.x内部提供提供了 10 个过滤器，这10个过滤器是针对数字纸币符号日期大小写小数位数等的格式化 vue 2.x后取消了内置过滤器

什么叫过滤器？格式化数据的一个工具举例： 12.22225 —> 12.2 Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28

过滤器一样也有两种声明形式全局声明 Vue.filter(过滤器名称，回调函数) 回调函数中有一个参数value value值就表示的是格式化数据的值局部声明 new Vue({ filters: { ‘过滤器名称’： function( value ){ return } } })

过滤器的回调函数必须有返回值

如何使用使用过滤器？
我们用一个叫做管道符的来使用过滤器

举例：
数据 | 过滤器名称
生命周期

生命是生命周期呢？
当前组件在创建到销毁经历的一系列过程，称之为生命周期
生命周期的分为几个阶段？每个阶段有哪些钩子函数
生命周期分为3个阶段，这三个阶段分别是：初始化、运行中、销毁
初始化阶段：有4个钩子函数，触发条件是自动的
beforeCreate
1. 组件即将创建，进行组件事件和生命周期的初始化
2. 项目中一般不使用（兵哥）
3. 有的开发者也会在这里进行数据请求
created
1. 组件创建完成
2. 项目中：
1）异步请求接口数据
2）数据修改
beforeMount
1. 组件即将挂载
2. 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
3. 项目中：
1）异步请求接口数据
2）数据修改
mounted
1. 组件挂载结束
2. 使用真实DOM替换VDOM
3. 项目中
1）异步请求接口数据
2）数据修改
3）真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
```
   总结： 初始化过程中在项目中使用
       数据请求：created
       DOM操作： mounted
       数据修改： beforeMount  created  mounted 
```
运行中阶段：有2个钩子函数：触发条件是：当data选项中的数据发生改变时
beforeUpdate：
内部操作： vdom生成和diff的对比
我们可以不使用
updated
Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化
销毁阶段：有2个钩子函数
beforeDestory: 组件即将销毁，准备调用 $destroy() 方法
destroyed：组件销毁结束
```
           这两个钩子函数没有什么去别，功能很相似

           项目中： 
             这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例

   组件销毁的两种方式： 
     1. 使用$destroy()方法（内部销毁）
         缺点： 会将组件的模板也保留下来
     2. 使用开关销毁（外部销毁）
         v-if
         这种类型的销毁不会留有模板
```
有一个钩子函数可以不写，这个钩子函数就是我们 render 函数
名词解释：
钩子函数：钩子函数就是options配置项中的一个方法，在特定的触发条件（时机）下会自动触发
除了根实例组件以外，其他的组件中的数据项 data 必须是一个函数，而且这个函数必须返回一个对象
为什么是函数呢？
原因：我们希望组件的数据是独立的，有一定作用域的
为什么返回值是对象？
原因：是为了符合数据驱动原理设计，让observer将data选项中的数据设置 getter 和 setter
其他选项写在生命周期的上