过滤器

过滤器的注意点

1. 要定义到 filters 节点下，本质是一个函数
2. 在过滤器函数中，一定要有 return 值
3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“

<template>
	<!-- 带参数的过滤器 -->
        <input type="text" v-model.number='num1'>+<input type="text" v-model.number='num2'>=<span>{{count|getCount(num1,num2)}}</span>
</template>

<script>
	// 带参数的全局过滤器，参数只能跟在要过滤的数据value后面
        Vue.filter('getCount',function(value,num1,num2){
            return num1+num2;
        })
</script>

watch 侦听器

侦听器的格式

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

 // 创建vm实例
let vm = new Vue({
    el:"#app",
    data:{
        username:"1"
    },

    // 所有的侦听器都定义在watch节点下，也叫做监视者模式，可以实时监控指定数据的值
    watch:{
        //方式一 最简单的方法模式，比较常用
        username(newval,oldval){ // 注意这里的方法名一定要和对应的数据保持一致
            // 前面是变化后的值，后面是变化前的值，若不需要变化前的值，也可以直接省略oldval
            console.log(newval);
        },

        //方式二 若想要在网页加载后就对数据立即进行监听，则需要对侦听器进行更加细化的定制，这里就要用到对象模式
        username: {
            // 侦听处理函数,对象格式所必需的函数属性
            handler:function(newval,oldval){
                console.log(newval);
            },
            immediate:true, // 立即处理模式，页面渲染完成之后，立即触发当前watch侦听器
            deep:true // 深度监听，可以监听目标对象任意属性的变化，handler返回值是目标对象
        }
    }
})

计算属性

特点：

1. 定义的时候，要被定义为“方法”
2. 在使用计算属性的时候，当普通的属性使用即可

好处：

1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！

// 创建vm实例
let vm = new Vue({
    el:"#app",
    data:{
        num1:1,
        num2:2
    },
    computed: {
        // num1或num2的数据每变化一次，这个方法就会调用一次，因为谷歌vue组件中count的值也是实时变化的
        count:function(){
            return this.num1+this.num2;
        }
    }
});

axios

axios 是一个专注于网络请求的库！

axios 的基本使用

1. 发起 GET 请求：

   axios({
     // 请求方式
     method: 'GET',
     // 请求的地址
     url: 'http://www.liulongbin.top:3006/api/getbooks',
     // URL 中的查询参数
     params: {
       id: 1
     }
   }).then(function (result) {
     console.log(result)
   })
   

2. 发起 POST 请求：

   document.querySelector('#btnPost').addEventListener('click', async function () {
     // 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
     // await 只能用在被 async “修饰”的方法中
     const { data: res } = await axios({
       method: 'POST', 
       url: 'http://www.liulongbin.top:3006/api/post',
       data: {
         name: 'zs',
         age: 20
       }
     })
   
     //async/await 简化了promise的过程，
     //这里await修饰的也是一个promise对象，修饰后直接返回resolve(result)的result
     // 并且await只能在被async修饰的函数内使用，不能单独使用
     // 所以要拿到真正的数据的话，这里只需要调用res.data即可
     console.log(res)
   })
   

vue-cli 的使用

1. 在终端下运行如下的命令，创建指定名称的项目：

   vue cerate 项目的名称
   

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

   assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
   components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
   main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
   App.vue 是项目的根组件。