温故而知新——vue常用语法(三)页面 loading&过滤器&列表过渡

温故而知新——vue常用语法(三)页面 loading&过滤器&列表过渡
目录

loading效果

过滤器

列表过渡

transition

更多动画

loading效果

1、页面loading
```
开启
const loading = this.$loading({
          lock: true,
          fullscreen: true,
          text: 'Loading...'
});
 
 
关闭
loading.close();
```
2、按钮loading

1、在提交按钮上加入 :loading="loading"（注意前面有冒号）

2、在return下加入 loading: false, 先声明一下

3、在刚进入提交方法时 this.loading = true 开始启动加载状态

4、当提交之后完成加载状态 this.loading = false

过滤器

用途：被用于一些常见的文本格式化

用法：两个地方：双花括号插值和 v-bind 表达式

注意：

1、当全局过滤器和局部过滤器重名时，会采用局部过滤器。

2、过滤器可以串联：
```
{{ message | filterA | filterB }}
```
例子：全局过滤器

在创建 Vue 实例之前全局定义过滤器：
```
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
```
例子：具体过滤器

{{ message | capitalize }}

你可以在一个组件的选项中定义本地的过滤器：

filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

例子：日期格式化过滤器
```
1.0 // 函数对象（Vue为一个函数，作为对象来使用）
//          Vue.filter('dateString',function(value,format){
//              return moment(value).format(format||'YYYY-MM-DD HH:mm:ss')
//          })
            
2.0 //也可以用形参默认值
            Vue.filter('dateString',function(value,format='YYYY-MM-DD HH:mm:ss'){
                return moment(value).format(format)
            })
```
例子：全局过滤器的定义和使用
```
html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过滤器title>
  <script src="js/vue.js">script>
head>
 
<body>
  <div id="app">
    <input type="text" v-model="msg">
    <div>{{ msg | strUpper }}div>
  div>
  <script>
    // 定义一个全局过滤器，把字符串的第一个字符转换为大写
    Vue.filter('strUpper', function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    })
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      }
    })
  script>
body>
 
html>
```
列表过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
transition

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点
hello

new Vue({
el: '#demo',
data: {
show: true
}
})

.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}

更多动画

https://cn.vuejs.org/v2/guide/transitions.html
相关阅读:
软件确认测试的内容和流程有哪些?确认测试报告需要多少钱?
【Android Camera开发】Android Automotive介绍
 国土局土地档案管理软件系统（Java+SSH+MySQL）
超越时间与人力的软件开发智慧：《人月神话》
【数据结构】C++实现红黑树
 无涯教程-JavaScript - FORMULATEXT函数
 实训笔记8.31
QT 菜单栏、工具栏和状态栏
 多模态信息抽取（一）——融合知识图谱和多模态的文本分类研究（论文研读）
第五章：GC日志分析
原文地址：https://blog.csdn.net/wodeyijia911/article/details/110870990

loading效果

过滤器

列表过渡

transition

更多动画

`transition`