vue2 过滤器，侦听器，计算属性，axios，vue-cli,vue组件

过滤器

过滤器注意点

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

<div id="app">
        <p>{{ message | capi }}p>
    div>
    <script src="./lib/vue-2.6.12.js">script>
    <script>
         Vue.filter('capi', (str) => {
                return str.charAt(0).toUpperCase() + str.slice(1);
                // return 'aaa'
            })
        const vm = new Vue({
            el: '#app',
            data:{
                message : 'hello vue.js'
            }

        })

watch 侦听器

侦听器格式

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

<div id="app">
        <input type="text" v-model="info.username">
    div>

    <script src="./lib/vue-2.6.12.js">script>
    <script src="./lib/jquery-v3.6.0.js">script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                info:{
                    username: 'admin'
                }
            },
            watch: {
                'info.username':{
                    handler(newVal){
                        // console.log(newVal);
                        if(newVal === '') return 

                        $.get('https://www.escook.cn/api/finduser/' + newVal,function(res){
                            console.log(res.message);
                        })
                    },
                    immediate: true,
                    deep: true
                }
            }
        })
    script>

计算属性 computed

特点：

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

缺点：

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

<div id="app">
    <div>
      <span>R：span>
      <input type="text" v-model.number="r">
    div>
    <div>
      <span>G：span>
      <input type="text" v-model.number="g">
    div>
    <div>
      <span>B：span>
      <input type="text" v-model.number="b">
    div>
    <hr>

    
    <div class="box" :style="{ backgroundColor: rgb }">
      {{ rgb }}
    div>
    <button @click="show">按钮button>
  div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app', 
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0
      },
      methods: {
        // 点击按钮，在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
      computed:{
        rgb(){
          return `rgb(${this.r},${this.g},${this.b})`
        }
      }
    });
  script>

axios

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

1. 发起GET请求

document.querySelector('#get').addEventListener('click', async function () {
            const { data : res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
                params: {
                    id: 1
                }
            })
            console.log(res.data);
        });

2. 发起POST请求

 document.querySelector('#post').addEventListener('click', async function(){
            const { data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',{
                name:"zhansan",
                age: 50
            })
            console.log(res.body);
        })

如果调用某个方法的返回值为 promise 实例，则前面可以添加 await ！ await 只能用在被 async 修饰的方法中

vue-cli 的使用

在cmd终端下先下载vue-cli
npm i vue-cli -g

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

vue create 项目的名称

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

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

3. main.js 把App.vue组件渲染到 index.html中

vue 组件

vue组件 是对UI结构的复用； .vue 都为组件

vue 组件的组成部分

1. template 组建的模板结构 （DOM）
2. script JS行为
3. style 定义样式

注意：

1. 组件 ** template**下只等存在一个根节点，
2. 在render 函数中，渲染的组件为根组件，默认为App.vue
3. 组件在封装好时，彼此之间是相互独立的，不存在父子，兄弟关系
4. 组件在使用时，会产生父子，兄弟关系

使用组件

1. 使用 import 语法导入需要的组件
2. 使用components 节点注册组件
3. 以标签的形式使用刚注入的组件

<template>
  <div class="app-container">
    <h1>App 根组件h1>
    <hr />

    <div class="box">
      
      <left>left>
      <right>right>
    div>
  div>
template>

<script>
import left from "@/components/Left.vue"
import right from "@/components/Right.vue"
export default {
  components:{
    left,
    right
  }
}
script>