siot作用域插槽属性验证生命周期过滤器过渡效果&&动画

最新推荐文章于 2022-07-19 14:34:29 发布

Darcy_sui

最新推荐文章于 2022-07-19 14:34:29 发布

阅读量175

点赞数

文章标签： siot作用域插槽属性验证生命周期过滤器过渡效果&&动画

本文链接：https://blog.csdn.net/Darcy_sui/article/details/94721838

版权

slot 作用域插槽

旧： slot-scope

使用流程

在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上
在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据
通过 slotProp.xxx 就可以进行使用了

   <body>
      <div id="app">
        <Hello>
          <template slot = "default" slot-scope = "slotProp">
            <p> {{ slotProp.msg }} </p>
          </template>
        </Hello>
      </div>
      <template id="hello">
        <div>
          <slot name = "default" :msg = "msg"></slot>
        </div>
      </template>
    </body>
    <script src="../../lib/vue.js"></script>
    <script>
      Vue.component('Hello',{
        template: '#hello',
        data () {
          return {
            msg: 'hello'
          }
        }
      })
      new Vue({
        el: '#app'
      })
    </script>

新： v-slot

  <div id="app">
    <Hello>
      <template v-slot:default = "slotProp">
        {{ slotProp.msg }}
      </template>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot name = "default" :msg = "msg"></slot>
    </div>
  </template>

  new Vue({
    components: {
      'Hello': {
        template: '#hello',
        data () {
          return {
            msg: 'hello'
          }
        }
      }
    }
  }).$mount('#app')

属性验证

案例：价格的增加，拿到的数据必须做验证 309 + 10 319 30910

props: [ ‘msg’ ] 没有进行验证，知识单纯的接收了一个父组件传递来的数据
props: { attr: attrType } 进行普通属性验证
props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

注意：除了以上形式的属性验证以外，将来工作中还可能遇到的是第三方封装的类库 vue-validate vee-validate …

过渡效果 && 动画

使用形式
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css 【要求】
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

      beforeEnter: function (el) {
        // ...
      },
      // 当与 CSS 结合使用时
      // 回调函数 done 是可选的
      enter: function (el, done) {
        // ...
        done()
      },
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
       // --------
      // 离开时
      // --------

      beforeLeave: function (el) {
        // ...
      },
      // 当与 CSS 结合使用时
      // 回调函数 done 是可选的
      leave: function (el, done) {
        // ...
        done()
      },
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }

过渡模式 mode
1. in-out 先进入在离开
2. out-in 先离开在进入

业务：点击按钮，然一个p标签显示或隐藏（要有透明度的过渡）

使用Vue提供的 transition 组件时，vue会提供6（4）个类名，8个钩子函数给大家使用

钩子函数：特定的时间（满足某一个条件），就会自动触发的一个方法

一个过渡或是一个动画我们分为两个大阶段

进入

离开

例：

<style>
    .yyb-enter-active, .yyb-leave-active {
      transition: opacity 2s;
    }
    .yyb-enter, .yyb-leave-to /* .v-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click = "change"> 切换 </button>
    <transition name = "yyb">
      <p v-show = "flag"> 1903 </p>
    </transition>
  </div>
</body>
<script src="../../lib/vue.js"></script>


<script>
	new Vue({
    el: '#app',
    data: {
      flag: true
    },
    methods: {
      change () {
        this.flag = !this.flag
      }
    }
  })
</script>

业务：点击按钮，然一个p标签显示或隐藏（要有透明度的过渡）

引用第三方的 Animate.css文件

<head>
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    <button @click = "change"> 切换 </button>
    <transition
      enter-active-class = "animated slideInLeft"
      leave-active-class = "animated slideOutLeft"
    >
      <p v-show = "flag"> 1903 </p>
    </transition>
  </div>
</body>
<script src="../../lib/vue.js"></script>

<script>
	new Vue({
    el: '#app',
    data: {
      flag: false
    },
    methods: {
      change () {
        this.flag = !this.flag
      }
    }
  })
</script>

生命周期

什么是生命周期？
vue中的生命周期指的是组件从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了个名字叫做（生命周期钩子函数/ 组件钩子）
为什么要学习生命周期？
因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途
这个生命周期是谁的生命周期？
组件
项目中生命周期如何书写（功能）

Vue的生命周期分为三个阶段，分别为：初始化，运行中，销毁，一共8个钩子函数

注意：生命周期钩子函数不允许写成箭头函数

初始化：

beforeCreate

1. 组件创建前触发，目的是为了组件的生命周期和组件中的事件做准备

2. 数据没有获得，真实dom也没有渲染出来

3. 可以进行数据请求，提供了一次数据修改的机会

4. 执行一次

created

1. 组件创建结束

2. 数据得到了，真实dom没有渲染出来

3. 可以进行数据请求，提供了一次数据修改的机会

4. 执行了一次

beforeMount

1. 组件挂载前

2. 任务：判断el 判断 template

如果el没有，那么我们需要手动挂载，如果有，那么判断template

如果template有，那么进行render函数

如果template没有，那么通过 outerHTML 手动书写模板

3. 数据可以获得，但是真实dom还没有渲染

4. 可以进行数据请求，也提供了一次数据修改的机会

5. 执行一次

mounted

1. 组件挂载结束

2. 数据获得了，真实dom也获得了

3. 可以进行数据请求，也就可以修改数据

4. 执行了一次

5. 可以进行真实dom的操作了（可以进行第三方库的实例化了）

综上总结：

Darcy-sui推荐：

1. 数据请求一般写在created里面

2. 第三方库实例化一般会往mounted中写

-------------------------- 运行中------------------------------

触发条件：数据更新

beforeUpdate

1. 更新前

2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象

3. 这个钩子函数更多的是内部进行一些操作，我们就不在多干预了

4. 可以触发多次

updated

1. 更新结束

2. 真实dom得到了，数据也得到了（更新后的）

3. 动态数据获取（第三方库实例化）

过滤器

什么是过滤器？用来格式化数据的一个函数 $ 10 ‘$’ + price 日期的格式化

vue 1.x 版本借鉴了 angular , 提供 10 个过滤器，包括有：日期小数点位数保留货币大小写等

Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式

使用方式

全局定义过滤器\

 <p> {{ time | timeFilter('/)}} </p>

   Vue.filter('timeFilter',function ( val,type ) {
     console.log( val )
     //val 就是我们获得的数据
     // return newVal   return 的结果就是格式化之后的新数据  return的结果就是页面呈现的结果

     var date = new Date ( val )

     // 2019-6-26

     return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
   })

局部定义过滤器

    new Vue({
      el: '#app',
      data: {
        time: Date.now()
      },
      filters: { //过滤器的配置项
        'timeFilter': function ( val,type ){
          var date = new Date ( val )
          return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
        }
      }
    })