Vue学习第三天

过滤器filter

 用在插值表达式用和v-bind属性绑定指令中。

<p>{{ msg | msgFormate }}</p>

<p :id="msg | msgFormate"></p>

‘|’  --管道符，用来分割字符和过滤器

1. 过滤器必须先声明后使用。
2. vue对象中声明的过滤器是私有的，因为别的vue对象无法访问，如果想要使用，必须声明为共有的过滤器。

 Vue.filter('方法的名称'，( msg )=>{} )

· 第一个参数是函数名称，第二个参数是过滤器函数

    3. vue对象中的过滤器必须写在vue的filter属性中，本质是一个函数，必须有一个返回值。

    4. 过滤器可以同时存在多个，返回结果在给下一个传递。

    5. 过滤器如果需要传参数，形参接收到的参数都是从第二个开始，因为第一个位置固定是管道符前面的字符串。

侦听器

作用是侦听数据的变化，便于对数据的变化进行操作。

1.使用侦听器，就必须在vue对象实例中的watch节点下中添加监听函数或者监听对象。

 <div id="app">
    <input v-model:model="msg">
  </div>
  
  <script src="./lib/vue-2.6.12.js"></script>
  <script>

    const vm = new Vue({
      el: "#app",
      data: {
          msg: "wdf12121aaa"
      },
      filters: {
       
      },
      watch: {
        /* 侦听器函数 */
        // msg(newVal, oldVal) {
        //   console.log(newVal + ": " + oldVal)
        // }
        /* 侦听器对象 */
        msg: {
          handler(newVal, oldVal) {
            console.log(newVal + ": " + oldVal)
          }
        }
      }
    })
   
  </script>

2.

方法格式的侦听器

缺点：无法在刚进入页面的时候自动执行；如果侦听一个对象，对象的属性值改变无法被侦听到。

好处：简洁。

对象格式的侦听器

好处：可以使用immediate在进入页面的时候自动触发一次；可以使用deep侦听对象属性的变化。

  <div id="app">
    <input v-model:value="data.username">
  </div>
  
  <script src="./lib/vue-2.6.12.js"></script>
  <script>

    const vm = new Vue({
      el: "#app",
      data: {
          data: {
            username: "1"
          }
      },
      filters: {
       
      },
      watch: {
        /* 侦听器函数 */
        // msg(newVal, oldVal) {
        //   console.log(newVal + ": " + oldVal)
        // }
        /* 侦听器对象中的属性 */
        // "data.username"(newVal, oldVal) {
        //   console.log(newVal + ": " + oldVal)
        // }
        /* 侦听对象，如果属性值改变能触发 */
        // data: {
        //   handler(newVal, oldVal) {
        //     console.log(newVal + ": " + oldVal)
        //   },
        //   // 立即执行
        //   // immediate:true,
        //   // 是否侦听属性值变化
        //   deep:true
        // }
        }
    })
   
  </script>

 注意：v-bind后面是js表达式

计算属性 

 是经过一系列计算，得到的属性值。作用是提高代码复用性。计算属性必须放在computed节点下。定义的时候被当作方法，使用的时候作为普通的属性。

 

<div id="app">
      r:<input type="text" v-model:value="r">
      g:<input type="text" v-model:value="g">
      b:<input type="text" v-model:value="b">
      <div :style="{backgroundColor: rgb}"></div>
      <p>{{rgb}}</p>
  </div>
  
  <script src="./lib/vue-2.6.12.js"></script>
  <script>

    const vm = new Vue({
      el: "#app",
      data: {
          r: 0,
          g: 0,
          b: 0
      },
      filters: {
       
      },
      watch: {

      },
      computed: {
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }
    })
   
  </script>

axios

 是一个专注于请求网络数据的库

 

  <script src="./lib/axios.js"></script>
  <script>
      /* GET请求 */
      /* 返回的res是一个Promise对象，我们要获取里面的对象需要then解析 */
      const res = axios({
        method: "GET",
        url: 'http://www.liulongbin.top:3006/api/getbooks',
        params: {

        }
      })
      /* data中的数据不是接口返回的真正数据，它被包装了一层外壳,当前返回的数据有六个
      *  config：{}  
      *  data: {} data里面的数据才是我们需要拿到的真正数据
      *  headers: {}
      *  request: {}
      *  status
      *  statusText
      */
      res.then((data)=>{
        console.log(data)
      })


      /* POST请求 */
      const result = axios({
        method: "POST",
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: 'zs',
          age: 20
        }
      })
      result.then((data)=>{
        console.log(data)
      })
  </script>

我们引导axios库，就能得到一个axios对象。直接使用axios获取到的数据是一个promise数据。我们想要获取到真正的数据还需要then解析非常麻烦，这个时候可以使用await和async。

  <button id="post">click me!</button>

  <script src="./lib/axios.js"></script>
  <script>
      document.querySelector("#post").addEventListener("click", async ()=> {
        const res = await axios({
          methods: "POST",
          url: "",
          data: {
            
          }
        })
      })
  </script>

也可以使用axios.get,axios.post直接去请求数据。注意，post的第二个参数不需要加data属性值。

 

 document.querySelector("#post").addEventListener("click", async ()=> {
        axios.get('url',{
          param:{}}
        )

        axios.post('url', {
          
        })
      })

还有一点，我们想要获取内部数据非常的麻烦，要通过data.data.data。因此我们可以通过结构解析来直接获取我们想要的数据。

 

 document.querySelector("#post").addEventListener("click", async ()=> {
        // data被重命名为res
        const { data: res } = await axios({
          method: 'POST', 
          url: 'http://www.liulongbin.top:3006/api/post',
          data: {
            name: 'zs',
            age: 20
          }
        })
        console.log(res)
      })