JS.vue小笔记-计算属性/侦听属性/vue生命周期函数

最新推荐文章于 2021-05-30 13:07:14 发布

sara-

最新推荐文章于 2021-05-30 13:07:14 发布

阅读量177

点赞数 1

分类专栏：前端 vue

本文链接：https://blog.csdn.net/weixin_44990056/article/details/99948026

版权

前端同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

vue

20 篇文章 1 订阅

订阅专栏

计算属性

、computed
、书写形式为函数
、有返回值
、使用的话是和data中值使用一样 {{revereMsg}}
、计算属性具有依赖性，如果原始值不发生变化，则不会执行，发生变化，会重新计算，执行次数和调用次数无关
、特定条件下，计算属性优于方法，方法是每调用一次就会执行一次
、应用场景，登录注册可以验证表单信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性</title>
</head>
<body>
  <div id="app">
    {{ msg }} ----- {{ reverseMsg }} ---- {{ reverseMsg }} ---- {{ reverseMsg }}---- {{ reverseMsg }}
    <div>
      <input type="tel" v-model="tel" > {{ telTip }}
    </div>
  </div>
</body>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'hello message',
      tel: ''
    },
    computed: { // 计算属性
      reverseMsg () { // 函数----有返回值   ---- 就和data中值一样用
        console.log('computed')
        return this.msg.split('').reverse().join('')
      },
      telTip () {
        if (this.tel === '') {
          return '不能为空'
        } else if (this.tel.length !== 11) {
          return '格式错误'
        } else {
          return 'ok'
        }
      }
    }
  })
</script>
</html>

侦听属性

、vue提供了检测数据变化的一个属性 watch
、也叫做监听属性
、在特定条件下，计算属性优于侦听属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>方法</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="firstname">
    <input type="text" v-model="lastname">
    {{ fullname }}
  </div>
</body>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      firstname: 'wu',
      lastname: 'daxun',
      fullname: 'wu daxun'
    },
    watch: { // 侦听属性
      firstname (newval, oldval) {
        this.fullname = newval + this.lastname
      },
      lastname (newval, oldval) {
        this.fullname = this.firstname + newval 
      }
    }
  })
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>方法</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="firstname">
    <input type="text" v-model="lastname">
    {{ fullname }}
  </div>
</body>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      firstname: 'wu',
      lastname: 'daxun'
    },
    computed: {
      fullname () {
        return this.firstname + this.lastname
      }
    }
  })
</script>
</html>

总结

任何复杂的业务逻辑，建议使用计算属性

vue生命周期函数

生命周期钩子函数
、vue的生命周期就是vue实例从创建到销毁的过程
创建–初始化数据–模板编译/挂载（更新）–销毁

、类型都是function

总共分为8个阶段：

beforeCreate（创建前）,

created（创建后）,created（）{}//数据请求

beforeMount(载入前),

mounted（载入后）,mounted（）{}//数据请求 +操作ｄｏｍ

beforeUpdate（更新前）,

updated（更新后）,updated（）{} //操作dom

beforeDestroy（销毁前）,

destroyed（销毁后）destroyed（）{} //不可以操作DOM

vue中的数据请求

fetch实现数据请求

、fetch可以直接使用，不需要引入任何东西
、语法
fetch（‘url’，{
//参数
method：’get‘，//如果改为post，则接收不到,get直接拼在地址栏
//post请求是通过 req.body 接收数据
}）.then(res => res.json()) //将promise对象转为json对象
.then(data = >{ })//得到请求的数据，执行后续的业务逻辑
、fetch（）返回的是promise对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>fetch数据请求</title>
</head>
<body>
  <div id="app">
  </div>
</body>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    mounted () {
      /**
      * fetch 可以直接使用，不需要引入任何东西
      * fetch()  --- 返回的是 promise 对象
      *  .then(res => res.json()) 将promise 对象转换成json对象，供我们使用
      *  .then(data => {}) 得到请求的数据，执行后续的业务逻辑
      */
      fetch('https://www.daxunxun.com/banner')
        .then(res => res.json())
        .then(data => {
          console.log(data)
        })
    }
    
  })
</script>
</html>

axios实现数据请求

、会自动把promise对象转换为json数据
、语法：

axios.get(‘url’,{

                     }).then(res = >{
                console.log(res.date)

})
、get请求直接url拼接
、post请求，{ 对象参数 }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>fetch数据请求</title>
</head>
<body>
  <div id="app">
  </div>
</body>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    mounted () {
      axios.get('https://www.daxunxun.com/banner').then(res => {
        console.log(res.data)
      })

      axios.post('https://www.daxunxun.com/users/login', {
        username:'18813887814',
        password: '1234567'
      }).then(res => {
        console.log(res.data)
      })
    }
    
  })
</script>
</html>

========================================================

sara-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS.vue小笔记-计算属性/侦听属性/vue生命周期函数

计算属性、computed、书写形式为函数、有返回值、使用的话是和data中值使用一样 {{revereMsg}}、计算属性具有依赖性，如果原始值不发生变化，则不会执行，发生变化，会重新计算，执行次数和调用次数无关、特定条件下，计算属性优于方法，方法是每调用一次就会执行一次、应用场景，登录注册可以验证表单信息侦听属性、也叫做监听属性、在特定条件下，计算属性优于侦听属性总结任...
复制链接

扫一扫