vue使用之过滤器、生命周期、钩子函数、axios、计算监听属性和响应式数据的说明

最新推荐文章于 2023-05-05 12:35:04 发布

我是一阵风xu

最新推荐文章于 2023-05-05 12:35:04 发布

阅读量354

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43537721/article/details/107237784

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue使用之过滤器、生命周期、钩子函数、axios、计算监听属性和响应式数据的说明

vue使用之过滤器、生命周期、钩子函数、axios、计算监听属性和响应式数据的说明

vue使用之过滤器、生命周期、钩子函数、axios、计算监听属性和响应式数据的说明

1 过滤器filter

1.1 过滤器的使用

作用：文本数据格式化。
vue没有提供过滤器，需要使用过滤器，首先需要自己定义一个过滤器，过滤器用于格式化文本的输出，比如对时间进行格式化数字的格式化。

/* 
     // 1. 先定义一个过滤器
     // 2. 使用一个过滤器
        // 过滤器可以在插值表达式中使用
        // | 在linux操作系统中叫做管道符
        // {{ msg | myFilter }}
     */
// 定义过滤器
    // 参数1： 过滤器的名字
    // 参数2： 过滤的逻辑
    // Vue.filter('过滤器的名字', function() {})
    // input就是需要过滤的内容
    Vue.filter('myFilter', function (input) {
      console.log(input)
      return input.toUpperCase()
    })

例子如下（过滤时间）：

<body>
  <div id="app">
    <h1>{{date | dateFilter('YYYY-MM-DD')}}</h1>
    <h1>{{date | dateFilter('HH:mm:ss')}}</h1>
    <h1>{{date | dateFilter}}</h1>
  </div>

  <script src="vue.js"></script>
  <script src="./node_modules/moment/moment.js"></script>
  <script>
    Vue.filter('dateFilter', (input, format) => {
      format = format || 'YYYY-MM-DD HH:mm:ss'
      // 方式1： 可以获取年月日时分秒  格式化 
      // moment()  表示当前时间
      // moment(date): 表示一个指定的时间
      // format:表示格式化
      return moment(input).format(format)
    })
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue',
        date: new Date()
      }
    })
  </script>
</body>

1.2 全局过滤器与局部过滤器

1.通过全局方式创建的过滤器，在任何一个vue实例中都可以使用。

  // 创建全局过滤器, 全局过滤器在所有的vue实例中都能使用
     Vue.filter('myFilter', function (input) {
       return '111'
     })

2.局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用。

// 局部过滤器： 只有在当前vue实例中才能使用的过滤器
    var vm = new Vue({
      el: '#app',
      // 提供数据
      data: {
        msg: 'hello vue'
      },
      methods: {

      },
      // 提供过滤器
      filters: {
        // 一个局部过滤器
        myFilter: function (input) {
          return input.toUpperCase()
        }
      }
    })

2 生命周期与钩子函数

2.1 生命周期

简单说：一个实例从开始到最后消亡所经历的各种状态，就是一个组件的生命周期。
组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！
生命周期和钩子函数的关系图如下：
在这里插入图片描述

2.2 钩子函数

生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为
注意：vue再执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可
注意：钩子函数的名称都是固定的！！

<body>

  <div id="app">
    <p>{{msg}}</p>
  </div>

  <script src="vue.js"></script>
  <script>

    // beforeXXX
    // XXXed
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
      },
      beforeCreate() {
        // 在初始化数据之前调用, vm中没有data中的数据
        console.warn('beforeCreate钩子函数')
        console.warn(this.msg)
      },
      created() {
        // 在数据初始化后执行的钩子函数
        console.warn('created钩子函数')
        console.warn(this.msg)
      },
      beforeMount() {
        // 在页面渲染之前， 此时DOM结构还没有渲染成对应的数据
        console.warn('beforeMount钩子函数')
        var div = document.getElementById('app')
        console.warn(div.innerHTML)
      },
      mounted() {
        console.warn('mounted钩子函数')
        var div = document.getElementById('app')
        console.warn(div.innerHTML)
      },
      beforeUpdate() {
        // 在页面渲染之前， 此时DOM结构还没有渲染成对应的数据
        console.warn('beforeUpdate钩子函数')
        var div = document.getElementById('app')
        console.warn(div.innerHTML)
      },
      updated() {
        console.warn('updated钩子函数')
        var div = document.getElementById('app')
        console.warn(div.innerHTML)
      },
      beforeDestroy() {
        // 在页面渲染之前， 此时DOM结构还没有渲染成对应的数据
        console.warn('beforeDestroy钩子函数')
      },
      destroyed() {
        // 在页面渲染之前， 此时DOM结构还没有渲染成对应的数据
        console.warn('destoryed钩子函数')
      },
    })
  </script>
</body>

3 axios的使用

vue自身没有提供发送ajax请求的工具。
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装：npm i -S axios

<body>
  <script src="./node_modules/axios/dist/axios.js"></script>
  <script>
    // 发送get请求
    // .then:成功的时候需要执行的逻辑
    axios.get('http://localhost:9999/getBrandList')
      .then(function (res) {
        console.log(res.data)
      })

    // get请求和post请求
    // axios.get('http://localhost:9999/getBrandInfo?id=2')
    //   .then(res => {
    //     console.log(res.data)
    //   }).catch(err => {
    //     console.log('接口失败了', err)
    //   })

    // axios.post('http://localhost:9999/addBrand', {
    //   name: '奇瑞',
    //   desc: 'qq',
    //   time: new Date()
    // }).then(res => {
    //   console.log(res.data)
    // })
  </script>
</body>

4 有关数据监听和计算的属性

4.1 监视数据变化 - watch

概述：watch是一个对象，键是需要观察的表达式，值是对应回调函数。
作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作

<body>
  <div id="app">
    <input type="text" v-model='msg'><span>{{tips}}</span>
    <p>{{msg}}----{{name}}</p>
  </div>

  <script src="vue.js"></script>
  <script>
    // 每次msg改变的时候， 都喊一下 666
    // 想要监听某个数据的变化， 需要使用 watch 监听，监视
    var vm = new Vue({
      el: '#app',
      // 提供vue的数据
      data: {
        msg: '',
        name: 'zs',
        tips: ''
      },
      // 提供方法的
      methods: {

      },
      // 过滤器
      filters: {

      },
      // 监听vue实例的属性的变化
      // 如果msg长度是3-6位，提示校验通过
      // 如果msg长度不是，校验不通过
      watch: {
        // 只要msg发生了改变，就会执行function
        // newVal: 修改后的值   oldVal: 修改前的值
        msg: function (newVal, oldVal) {
          if (newVal.length >= 3 && newVal.length <= 6) {
            this.tips = '校验通过'
          } else {
            this.tips = '校验不通过'
          }
        }
      }
    })
  </script>
</body>

监听一个复杂对象：
1.监视对象的时候，需要加上deep: true；为了发现对象内部值的变化，可以在选项参数中指定 deep: true。
2.immediate 属性,立马进行监听

watch: {
        // 如果想要监听复杂类型，需要使用到watch完整形态
        // key: 需要监听的属性
        // 值： 是一个对象
        msg: function (value) {
          console.log('监听到内容了', value)
        },
        car: {
          handler: function (value) {
            console.log('监听到了car的变化', value)
          },
          // 如果需要监听一个对象，必须指定deep为true。 除了监听本对象，还会监听对象中的属性
          deep: true,
          // 页面加载，会立即监听一次
          immediate: true
        },
        list: {
          handler: function (value) {
            console.log('监听到了没', value)
          },
          deep: true
        }
      }

4.2 计算属性

计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。

<body>
  <div id="app">
    <input type='number' v-model="n1"> +
    <input type="number" v-model="n2"> =
    <span>{{ sum }}</span>

    <p>{{reverse}}</p>
  </div>

  <script src="vue.js"></script>
  <script>

    // 计算属性也是一个属性，和data中提供的属性类似
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue',
        n1: 0,
        n2: 0
      },
      // 用于给vue提供数据的， 提供的数据是计算属性
      // 计算属性 ： 这个属性的值是根据其他数据计算而来的
      // 计算属性： key: 提供的计算的属性名
      // 计算属性： 值 是一个函数，这个函数里面就是计算的逻辑, 返回值就是计算属性的值
      // 计算属性：当依赖的数据发生了改变的时候，计算属性自动重新计算一次，值跟着就发生了改变
      computed: {
        sum: function () {
          return +this.n1 + +this.n2
        },
        reverse: function () {
          return this.msg.split('').reverse().join('')
        }
      }
    })
    // 如果没有一个新的属性，只需要监听已经存在的某个属性的变化，变化了需要做某件事情，使用watch

    // 如果需要提供一个新的属性，并且这个属性依赖于其他的一些属性计算而来的，应该使用computed
  </script>
</body>

计算属性的完整形态：

 /* 
      计算属性依赖于缓存设计的 
      当计算属性依赖的属性发生了改变的时候，计算属性就会重新计算，并且会把结果缓存起来
    */
computed: {
        fullName: {
          get() {
            console.log('我是计算属性的get方法')
            return this.firstName + ' ' + this.lastName
          },
          set(value) {
            this.firstName = value.split(' ')[0]
            this.lastName = value.split(' ')[1]
          }
        }
      }

4 响应式数据的说明

4.1 动态添加的数据是无效的以及$set的使用

data中的数据一定要先声明，再使用，动态给对象添加的属性不是响应式的。

<div id="app">
    <p>{{person.name}}---{{person.age}}---{{person.gender}}</p>
</div>

<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            person: {
                name: 'zs',
                age: 18
            }
        }
    })
</script>

// 动态给data中添加的数据是无效的
// 在vue实例创建的时候，会把data中的数据绑定到vm上，所以data中的数据是响应的
// 但是动态绑定的数据不是响应是的。
vm.person.gender = '男'

如果想要动态绑定数据，并且是响应式的,需要使用vm.$set方法:

this.$set(this.person, 'gender', '男')

4.2 异步DOM更新以及$nextTick的说明

在vue中数据发生了改变，DOM中的数据也会跟着发生改变，但是这个过程是异步的。
vue的数据发生改变之后，DOM不会立即更新，会等到下一次渲染工作执行的时候才会更新DOM。
目的：为了提高渲染的性能.

clickFn () {
    // 数据变化了， view中的内容也要跟着变
    this.msg = '你好啊，vue1'
    this.msg = '你好啊，vue2'
    this.msg = '你好啊，vue3'
    this.msg = '你好啊，vue4'
    this.msg = '你好啊，vue5'

    // 为什么：DOM操作是非常消耗性能的，简单DOM的操作能够提升我们的性能，如果每次操作数据，都立即更新DOM，无疑性能会非常的低，所以vue中会等待数据都修改完成
    let result = document.querySelector('p').innerHTML
    console.log(result)
}

$nextTick方法会在DOM更新之后执行

 // 在实际开发中，有可能需要在数据改变之后，获取到更新之后的DOM数据
// 这个时候可以使用 $nextTick函数
// 当vue更新完DOM后，会自动调用$nextTick函数，确保在这个函数中可以获取到DOM结构是最新的
this.$nextTick(function() {
    let result = document.querySelector('p').innerHTML
    console.log(result)
})