Vue2 过滤器、侦听器、计算属性、axios & vue-cli

目标：
在实际开发中合理运用过滤器、侦听器、计算属性解决问题
使用axios发起Ajax请求
使用vue-cli工具生成工程化的Vue项目

[toc]

过滤器(Filters)

2020年9月 vue3发布。增加了很多新功能，但是也删掉了一些功能。 比如删掉了vue2中的过滤器filter功能。
与此同时，官方建议： 用方法调用或计算属性替换过滤器。
filter过滤器能加工数据，computed计算属性和methods方法也都可以加工数据，这样的话，就功能重复了…(于是filter被开除了XDD)

vue3已经把过滤器删掉了，只能在vue2中使用，会基础语法就行了。

• 过滤器要点
  1. 必须被定义到 filters节点 之下，本质是一个函数
  2. 强调：过滤器中一定要有一个返回值
  3. 过滤器函数中的 形参val(随意命名)，永远都是管道符前面的那个值。(多个形参，则第一个外都是undefined)
  4. 过滤器函数 由 管道符 | 调用
  5. 过滤器只能在 差值表达式 或 属性绑定指令v-bind 中调用
  6. 最终得到的结果是过滤器的返回值

过滤器常用于文本的格式化,应该被添加在JavaScript表达式的尾部，由“管道符”进行调用。示例:

<!-- 在花括号中通过管道符调用capitalize过滤器，对message的值进行格式化 -->
<p>{{message | capitalize}}</p>
<!-- 在v-bind中通过管道符调用formatId过滤器，对rawId的值进行格式化 -->
<div v-bind:id="rawId | formatId"></div>

私有过滤器 和 全局过滤器

在 filters节点 下定义的过滤器，称为“私有过滤器”，因为它只能在当前vm实例所控制的el区域内使用。如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器:

// 全局过滤器–独立于每个vm实例之外 
// Vue.filter()方法接收两个参数:
// 第1个参数，是全局过滤器的"名字”
// 第2个参数，是全局过滤器的"处理函数"
Vue.filter( 'capitalize', (str) =>{
    return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})
// 如果想要定义多个全局过滤器就再写一个
Vue.filter('capi2',(str)=>{
    return str + '--全局2';
})

注意：如果私有过滤器和全局过滤器名字一致，此时按就近原则

其他用法 – 连续调用、传参

1. 连续调用多个过滤器 – 串联地调用
   如：{{message | filterA | filterB}}

2. 过滤器传参

   <p>{{message | filterA(arg1,arg2)}}<p>

   Vue.filter('filterA',(msg,arg1,arg2)=>{...})

3. 过滤器的兼容性
   仅在vue 2.x 和 1.x中受支持
   3.x建议使用 计算属性 或 方法 代替
   具体的迁移指南参考官方文档给出的说明

Watch侦听器

Watch侦听器 监视数据的变化，做出特定操作，变量名与监听的值对应。语法格式：

const vm = new Vue({
    el:'#app',
    data:{ username: ''},
    watch:{
        // 监视username变化
        // newVal - 变化后的新值，oldVal - 旧值
        username(newVal,oldVal){
            console.log(newVal,oldVal)
        }
    }
})

应用场景如：侦听用户输入的用户名，每次变化就去查找是否被占用

侦听器的格式

1. 方法格式的侦听器
   • 缺点1: 无法在刚进入页面的时候，自动触发！！
   • 缺点2: 如果侦听的是一个对象，对象中的属性发生了变化，不会触发侦听器！！
2. 对象格式的侦听器
   • 好处1: 可以通过immediate选项，让侦听器自动触发！！
   • 好处2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化！！

• 推荐：为了写起来方便，建议定义成方法格式，如果确实需要，再改成对象格式。

immediate选项

const vm = new Vue({
    el:'#app',
    data:{ username: 'admin'},
    watch:{
        username:{
            handler(newVal,oldVal){// 侦听器的处理函数
                console.log(newVal,oldVal)
            },
            immediate: true // true表示一进入页面就触发，false是默认值，不写这个参数也是false
        }
    }
})

深度侦听 – deep选项

const vm = new Vue({
    el:'#app',
    data:{ info:{
        username: 'admin'
    } },
    watch:{
        info:{
            handler(newVal,oldVal){// 侦听器的处理函数
                console.log(newVal,oldVal)
            },
            deep: true // 对象里任意属性变化了，都会触发侦听器
        }
    }
})

如果要侦听的是对象的子属性的变化，则必须包裹一层单引号

watch:{
    'info.username'(newVal){
        console.log(newVal,oldVal)
    }
}

computed计算属性

1. 什么是计算属性
   计算属性指的是通过一系列运算之后，最终得到一个属性值。
   这个动态计算出来的属性值可以被模板结构或 methods 方法使用。
2. 应用场景：实现代码复用

• 计算属性的使用
  1. 计算属性要定义到computed节点下，定义成方法格式
  2. 虽然声明的方法格式，但是要当做普通的属性来用

     打印出vue实例，可以发现定义的计算属性是被挂到属性上面的，和data节点上的属性一样

示例代码如下︰

var vm = new Vue({
    el: '#app',
    data: {
        r:0,g:0,b:0
    },
    computed: {
        // 计算属性要定义到computed节点下，定义成方法格式
        rgb(){return `rgb(${this.r},${this.g},${this.b})`}
    },
    methods: {
        show() {
            console.log(this.rgb)
        }
    } 
})

axios的基本用法

axios是一个专注于网络请求的库！它只负责发请求和拿数据
中文官网地址：http://www.axios-js.com/

• 基本语法：

  axios({
      method: '请求的类型',
      url: '请求的 URL 地址',
      // 如果要携带请求体：
      // url中的查询参数，get请求体传参，可选
      params:{},
      // 请求体参数，post请求体传参，可选
      data:{}
  }).then((result)=>{
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
  })

  调用axios得到的返回值是一个 Promise 对象
  axios在请求到数据之后，在真正的数据之外，套了一层壳,result得到的就是套完壳之后的结果。

  {
      config: {},
      data: { 真实的数据 },
      headers: {},
      request: {},
      status: xxx,
      statusText: ''
  }

• 结合async和await调用axios
  这个.then用起来有点麻烦，我们可以使用await来进行简化
  如果调用某个方法的返回值是 Promise 实例，则前面可以添加await！（这样得到的就直接是result）
  await 只能用在被 async 修饰 的方法中

  ele.addEventLister('click', async function(){
      const result =  await axios({
          method: '请求的类型',
          url: '请求的 URL 地址',
      })
      console.log(result.data);
  })

• 使用解构赋值来获取data

  ele.addEventLister('click', async function(){
      const { data } =  await axios({
          method: '请求的类型',
          url: '请求的 URL 地址',
      })
      console.log(data);
  })

基于axios.get和axios.post发起请求

1. axois.get

   const {data} = await axios.get('url地址',{
       //GET参数
       params: {}
   })
   console.log(data)

2. axios.post

   //注意await要在async修饰的函数中使用
   const { data } = await axios.post('http://127.0.0.1:8080/form',{
       unit: "00",
       contact: "朱宇楼",
       phone: '15639038667',
       numVisitors: 25,
       guide: 'yes',
       date: '2025-05-15',
       time: '14:30'
   })
   console.log(data);

vue-cli的安装和使用

中文官网：https://cli.vuejs.org/zh/

1. 什么是单页面应用程序？
   单页面应用程序（英文名: Single Page Application）简称SPA，顾名思义，指的是一个Web 网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成。

2. 什么是vue-cli
   vue-cli是Vue.js开发的标准工具。它简化了程序员基于webpack创建工程化的Vue项目的过程。

3. 安装
   vue-cli是npm上的一个全局包，使用npm i命令，即可方便的把它安装到自己电脑上：npm i -g @vue/cli

   • vue -V查看安装的版本号

4. 使用
   基于vue-cli快速生成工程化的Vue项目：vue create 项目名称(建议名称用不带空格的英文)
   在想要创建项目的文件夹执行此命令，即会生成项目文件夹，命名即为 项目名称

   • 选择预设(用方向键)
     初学者建议选择最后一项 – 手动选择要安装哪些功能
     按空格选中要安装的预设
     一开始建议选择：
     Choose Vue version(新版没有这个)、Babel、CSS Pre-processors,其他的不要选
     下面接着选择vue版本为2.x，css预处理器为less

5. vue项目中src目录的构成：

   1. assets 文件夹：存放项目中用到的静态资源文件，例如：css样式表、图片资源
   2. components 文件夹：程序员封装的、可复用的组件，都要放到components目录下。
      里面有一个默认组件HelloWorld.vue，给它删除
   3. main.js 是项目的入口文件。整个项目的运行，要先执行main.js
   4. app.Vue 是项目的根组件。我们创建项目之后，看到的页面就是app.Vue，如果想重新换一个页面出来，只需要把它给清空掉。里面的template是一个模版结构。

6. vue项目的运行流程
   在工程化的项目中，vue要做的事情很单纯: 通过main.js把 App.vue渲染到index.html的指定区域中。
   其中：

   • App.vue用来编写待渲染的模板结构
   • index.html中需要预留一个el区域
   • main.js 把 App.vue渲染到了index.html所预留的区域中

     // 导入 vue 这个包，得到Vue构造函数
     import Vue from 'vue'
     // 导入App.vue根组件，将来要把App.vue中的模板结构，渲染到HTML页面中
     import App from './App.vue'
     
     Vue.config.productionTip = false
     
     // 创建Vue的实例对象
     new Vue({
         // 把 render 函数指定的组件渲染到HTML页面中，这里指定了App
         // 我们最终的结果是，把这个指定的组件，放到id为app的所在的这个位置，把它给替换掉了
         render: h => h(App),
     }).$mount('#app')
     // vue实例的$mount()方法，作用和el属性完全一样

扩展知识

字符串函数charAt()

接收索引值，从字符串中获取对应字符，如：
'hello'.charAt(4) //'o'

将字符串第一个字符变为大写

let str = 'hello'
const first = str.charAt(0).toUpperCase()
const other = str.slice(1)//从指定索引往后截取字符串，返回得到的结果
console.log(str)
console.log(first+other)

ajax原生写法

function xxx(){
    const xhr = new XMLHttpRequest()
    xhr.addEventListener('load',function(){
        const result = JSON.parse(xhr.responseText)
        console.log(result)
    })
}