专栏首页eclipse编程人类高质量vue学习笔记(二)

人类高质量vue学习笔记(二)

1. 生命周期

所谓「生命周期」,指的就是生命从出生到死亡的一个过程。Vue 的生命周期指的是 Vue 实例从创建到销毁的一个过程。这个过程常常会伴着一些函数的自调用,我们把这些函数称为「钩子函数」

生命周期图示:官方图


vue 生命周期中常用的钩子函数:

方法名

讲解

beforeCreate

el没有绑定作用域,没有 data、methods等属性,说白了就是穷光蛋一个,啥也干不了

created

已经初始化了data属性和methods中相关方法,但是页面还没有渲染出来

beforeMount

el 绑定了作用域,但是页面上还没有真实数据

mounted

数据已经渲染到页面中

beforeUpdate

data数据更新时调用,此时页面上还是旧数据

updated

data数据更新时调用,此时页面上已经是更新过后的数据

beforeDestroy

销毁之前调用,此时data、methods等还没有被销毁

destroyed

销毁调用!全部干掉!

vue 的生命周期大家了解即可,只需记住一点:页面渲染之前获取数据的方法 在created()里面调用。例如后台管理员登录成功进入用户管理界面,需要显示用户的信息,我们就可以这样写:

 created() {
    this.init();
  },
 methods: {
    // 初始化方法
    init() {
      // 发起异步请求获取用户信息
    },

2. 计算属性

我们知道可以通过「插值表达式」显示 data 属性中的值,例如{{username}}

但是有时候我们需要将 data 中的多个属性结合起来进行显示,比如显示某个班所有同学的数学总成绩,这个时候我们就可以使用计算属性。

计算属性可以将数据进行「缓存」,所以会大大提高访问效率。

计算属性写在 vue 实例中的 「computed」中:

<script>
 const app = new Vue({
    el: '#app',
    data: {
        msg:"我爱你中国"
    },
    methods: {

    },
    computed:{

    }
 });
</script>

2.1 案例一:显示完整姓名

<div id ="app"> 
    特斯拉CEO: {{fullName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        firstName: "埃隆" ,
        lastName: "马斯克 "
    },
    methods: {

    },
    computed:{
        fullName(){
            return this.firstName+"."+this.lastName;
        }
    }
 });
</script>

运行结果:

2.2 案例二:显示总成绩

<div id ="app"> 
  <span v-for="(student, index) in students" :key="student.id">
        {{index}} {{student.name}} {{student.score}} <br>
   </span>
   总成绩:{{totalScore}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        students:[
            {id:1,name:"小明",score:100},
            {id:2,name:"小红",score:200},
            {id:3,name:"小周",score:300}
        ]
    },
    methods: {

    },
    computed:{
        totalScore(){
            return this.students.reduce((sum,student)=>{ return sum + student.score },0);
        }
    }
 });
</script>

运行结果:

3. 监听器

  • 关键词:「watch」
  • 用来监听数据的变化
  • 监听的属性必须是 data 已经存在的

案例

<div id ="app"> 
    <input type="text" v-model="name" > 
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
       name: "张无忌"
    },
    methods: {

    },
    computed:{

    },
    watch:{
        name(newValue){
            console.log("改变后的名字:"+newValue);
        }
    }
 });
</script>            

运行结果:

4. 过滤器

  • 关键词:「filters」
  • 用于常见的文本的格式化
  • 不改变 data 属性的值,而是改变渲染之后的结果
  • 可以用在两个地方:{{}} 和 v-bind 表达式
  • 过滤器一定要有「返回值」

案例:格式化时间

<div id="app"> 
  <span>格式化之前:{{ time}}</span><br>
  <span>格式化之后:{{ time | timeFormat}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
      el: '#app',
      data: {
          time: "2021年8月22日"
      },
      methods: {
      },
      filters: {
          timeFormat(time){
              if(time.indexOf("年") != -1){
                  time = time.replace(/年/,"-");
              }
              if(time.indexOf("月") != -1){
                  time = time.replace(/月/,"-");
              }
              if(time.indexOf("日") != -1){
                  time = time.replace(/日/,"");
              }
              return time;
          }
      }
  });
</script>

运行结果:

5. axios

  • axios 是一个异步请求技术,用来在页面中发起异步请求
  • 能够自动转换 JSON 数据
  • 通过 CDN 引入:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

5.1 Get 请求

5.11 不带参数

axios.get('http://localhost/api/user').then(function(res){ 
  #注意:所有的数据都存在 res 的 data 属性里面
  console.log(res.data)
})

5.12 以 ?的形式传参

axios.get('http://localhost/api/user?id=10').then(function(res){ 
   #注意:所有的数据都存在 res 的 data 属性里面
  console.log(res.data)
})

5.13 restul 形式传参

axios.get('http://localhost/api/user/1234').then(function(res){ 
  #注意:所有的数据都存在 res 的 data 属性里面
  console.log(res.data)
})

5.14 params 形式传参

axios.get('http://localhost/api/user',{
      params: {
        id: 123
      }).then(function(res){ 
  #注意:所有的数据都存在 res 的 data 属性里面
  console.log(res.data)
})

5.2 Post 请求

axios.post('http://localhost/api/user', {
      id: 123,
      typeId: 1234
}).then(function(res){
 #注意:所有的数据都存在 res 的 data 属性里面
  console.log(res.data)
})

5.3 全局配置

5.3.1 配置公共的请求头

axios.defaults.baseURL = 'https://localhost/api';

配置完公共的请求头之后,axios 的请求路径就可以简写了:

axios.get('/user').then(function(res){ 
  #注意:所有的数据都存在 res 的 data 属性里面
  console.log(res.data)
})

5.3.2 配置 超时时间

axios.defaults.timeout = 1000;

5.4 拦截器

  • 请求拦截器:在用户发起请求前进行一些操作,例如在所有的请求头都添加上 token
  • 响应拦截器:接收响应后进行一些操作
# 1. 请求拦截器:全局设置 token
axios.interceptors.request.use(function (config) {
  let token = sessionStorage.getItem('token')
  if (token) {
    config.headers['token'] = token
  }
  return config
})
#2. 响应拦截器 
axios.interceptors.response.use(function(res) {
  var data = res.data;
  return data;
}, function(err){

})

5.5 async 和 await

有时候我们一个业务需要「一次调用多个接口」,并且后一个接口需要依赖前一个接口调用的结果,如果前一个接口挂了,后面就会全军覆没,例如:

axios.get('http://localhost/api/user').then(function(res){ 
   if(res.data.success){
       axios.get('http://localhost/api/data').then(function(res){ 
        if(res.data.success){
            ......
          }   
        })
    }   
})

上面的例子就是在「套娃」

,代码体验不是很好,所以我们引入了 async 和 await。

async 作为一个关键字放到函数前面,表示该函数是一个异步函数,也就意味着该函数的执行不会阻塞后面代码的执行。例如:

async getUser(){

}

await 是等待的意思,等待后面的代码执行完并返回一个结果。await 后面可以跟任何表达式,也是「非阻塞」的。

async 和 await 结合使用:

async getUser(){
  let result = await axios.get('http://localhost/api/user');
  if(result.data.success){
    let typeId = result.data.typeId;
    let type = await axios.get('http://localhost/api/getType?typeId='+typeId);
    ......
  } 
}

这样看起来是不是比较美观一点!

6. 数组常用操作

6.1 返回数组长度

   var arr= [1,12,8,30];
   var len = arr.length;
   console.log(len);//结果为4

6.2 将数组合并成字符串

  var arr= [1,12,8,30];
  var str = arr.join(",");
  console.log(str)

打印结果:

6.3 添加元素:push 和 unshift

  • push 是在数组尾部添加元素
  • unshift 是在数组头部添加元素
 var arr = [1,12,8,30];
 arr.push(99);
 arr.unshift(100);
 console.log(arr);

打印结果:

6.4 替换元素:splice

  • 第一个参数,要替换的元素的下标。注:数组下标从0开始
  • 第二个参数:替换的元素的个数,从第一个下标开始
  • 第三个参数:要替换成什么
 var arr = [1,12,8,30];
 arr.splice(2,1,"66");
 console.log(arr);

打印结果:

6.5 删除元素:pop 和 splice

  • pop 是删除数组最后一个元素
  • splice 是根据元素下标删除元素,第一个参数:要删除的元素的初始坐标,第二个参数:要删除的元素个数
var arr = [1,12,8,30];
arr.pop();// 删除 30
arr.splice(0,1);// 删除 1
console.log(arr);

打印结果:

6.6 数组倒序

var arr = [1,12,8,30];
arr.reverse();
console.log(arr);

打印结果:

6.7 过滤条件返回新的数组:filter

 var arr = [1,12,8,30];
 const newArr = arr.filter(item => item >2);
 console.log(arr);
 console.log(newArr);

打印结果:

6.8 合并多个数组:concat

var a = [1,12,8,30];
var b = [666,777];
var c = a.concat(b);
console.log(c);

打印结果:

6.9 返回指定数组:slice

  • slice 不会改变原来数组的值
  • 第一个参数:要返回的数组的初始坐标
  • 第二个参数:返回数组元素的个数
var arr = [1,12,8,30];
var newArr = arr.slice(0,2);
console.log(arr);
console.log(newArr);

打印结果:

-END-

本文分享自微信公众号 - eclipse编程(eclipsecamp),作者:一颗雷布斯

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-08-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 人类高质量vue学习笔记(一)

    官方解释:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。

    一颗雷布斯
  • 人类高质量vue学习笔记(四)

    说起路由大家可能会立即联想到家里的路由器,我们都知道那玩意是用来分发网络的。

    一颗雷布斯
  • 人类高质量vue学习笔记(三)

    一颗雷布斯
  • 《编写高质量代码》学习笔记(1)

    前言 看大神推荐的书单中入门有这么一本书,所以决定把这本书的精华(自认为很有用的点),或许是我自己现在能用到的点都提炼出来,供大家参考学习。 以下内容均出自《...

    我没有三颗心脏
  • 《编写高质量代码》学习笔记(2)

    写着写着发现简书提醒我文章接近字数极限,建议我换一篇写了。 ---- 建议52:推荐使用String直接量赋值 一般对象都是通过new关键字生成的,但是Str...

    我没有三颗心脏
  • 《编写高质量代码》学习笔记(3)

    建议125:优先选择线程池 在Java1.5之前,实现多线程比较麻烦,需要自己启动线程,并关注同步资源,防止出现线程死锁等问题,在1.5版本之后引入了并行计算框...

    我没有三颗心脏
  • vue 学习笔记第二弹

    概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在...

    syy
  • 人类高质量 Java 学习路线【一条龙版】

    大家好,我是鱼皮。现在网上的编程资料实在太多了,而且人人肯定都说自己的最好,那就导致大家又不知道怎么选了。大部分的博主推荐资源,也就是把播放量高的视频说一遍,水...

    程序员鱼皮
  • React实战——从零搭建一款轻量级个人OA系统

    随着前端技术的飞速发展, 我们需要不断学习前端技术, 如React, Vue, Nodejs等, 为了让大家更快速的掌握前端技能, 进阶高级工程师, 笔者每个月...

    徐小夕
  • 跳槽?前端面试知识点目录大全~

    金三银四,又到了一年一度的跳槽季,相信大家都在准备自己的面试笔记,我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自己复习。详细内容会在之后一一对...

    苏南
  • 一统江湖的大前端(7)React.js-从开发者到工程师

    许多入职前端的开发者,都是从熟练使用框架进行业务逻辑开发而开始的。说到框架,Vue,React,Angular三大框架都已经圈定了自己的用户群,从粉丝的数量...

    大史不说话
  • 【Vue原理】响应式原理 - 白话版

    白话版,就是让大家不用花费太多脑力,不用消耗太多时间,就能轻松地看完并大致了解内容。

    神仙朱
  • 写技术博客那点事

    写文章是一个短期收益少,长期收益很大的一件事情,人们总是高估短期收益,低估长期收益。往往是很多人坚持不下来,特别是写文章的初期,刚写完文章没有人阅读会有一种挫败...

    Fundebug
  • 个人分享--web前端学习资源分享

    6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天...

    守候i
  • 2019 前端秋季社招面试经历总结(二年多经验)

    推荐阅读:前端硬核面试专题[6],内容包含:HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTT...

    夜尽天明
  • 一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构

    本文内容讲解的内容:一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构。

    夜尽天明
  • 写给初中级前端的高级进阶指南(JS、TS、Vue、React、性能、学习规划)

    我曾经一度很迷茫,在学了Vue、React的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题...

    ssh_晨曦时梦见兮
  • 史上最全的前端资源大汇总

    Tanyboye
  • 刷个虎扑,还能刷到自己?-「编程杂感」第 6 期

    简单来说,货物编程就是我们不明就理地使用各种框架/优秀实践(比如设计模式)/软件架构,最后把项目搞得像个四不像。

    Guide哥

扫码关注云+社区

领取腾讯云代金券