过滤器——过滤器的基本用法

过滤器——使用Vue.filter定义全局过滤器

私有过滤器和全局过滤器

过滤器——使用全局过滤器格式化时间

过滤器——过滤器的其它用法

连续调用多个过滤器

过滤器传参

过滤器的兼容性

侦听器——了解侦听器基本的语法格式

侦听器——判断用户名是否被占用

侦听器——immediate选项

侦听器——deep选项

侦听器——用法总结

计算属性——了解计算属性的应用场景

什么是计算属性

计算属性——了解计算属性的语法和特点

有个细节:

<div class="box" :style="{ backgroundColor: rgb }">
 {{ rgb }}
</div>

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 红色
        r: 0,
        // 绿色
        g: 0,
        // 蓝色
        b: 0,
      },
      methods: {
        // 点击按钮，在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
      // 所有的计算属性，都要定义到computed节点之下
      // 计算属性在定义的时候，要定义成“方法格式”
      computed: {
         rgb() {
            return `rgb(${this.r}, ${this.g}, ${this.b})`
         }
      }
    });
    console.log(vm)
  </script>

就是html代码中，动态绑定style属性的写法:

<div class="box" :style="{ backgroundColor: rgb }"> {{ rgb }} </div>

""可以理解，动态绑定赋值外面本来就是有一个双引号。

但是不能理解的是，为什么""里面是一个{}

网上查了些资料，是这样解释的: 以对象的方式来动态给元素添加样式，这样解释的话,使用{}就没有疑问了

再看几个这样的例子:

这是不用变量的时候:

<div class="box" :style="{ backgroundColor: 'rgb(255, 255, 255)' }"> rgb(255, 255, 255) </div>

这是不用变量的时候:

<div class="box" :style="{ fontsize: '20px', border: '2px solid #fff' }"> 哈哈 </div>

这是用变量(rgb)的时候:

<div class="box" :style="{ backgroundColor: rgb }"> {{ rgb }} </div>

类似这种用法，发一个链接，大家可以去支持以下原作者: blog.csdn.net/yezi153/art…

总结

axios-使用axios发起基本的GET请求

axios-结合async和await调用axios

document.querySelector('btnPost').addEventListener('click', async function () {
    // 如果调用某个方法的返回值是Promise实例，则前面可以添加await
    // await只能用在被async“修饰”的方法中
    await axios({
        method: 'POST',
        url: 'http://www.baidu.com',
        data: {
            name: 'zs',
            age: 20
        }
    }).then(function (resp) {
        console.log(resp.data)
    })
})

axios-使用解构赋值

document.querySelector('btnPost').addEventListener('click', async function () {
    // 解构赋值
    const {data} = await axios({
        method: 'POST',
        url: 'http://www.baidu.com',
        data: {
            name: 'zs',
            age: 20
        }
    })
    console.log(data)
})

document.querySelector('btnPost').addEventListener('click', async function () {
    // 解构赋值的时候，使用 : 进行重命名
    // 1. 使用axios之后，使用async/await进行简化
    // 2. 使用解构赋值，从axios封装的大对象中，把data属性解构出来
    // 3. 把解构出来的data属性，使用冒号进行重命名，一般都重命名为 { data: res }
    const { data: res } = await axios({
        method: 'POST',
        url: 'http://www.baidu.com',
        data: {
            name: 'zs',
            age: 20
        }
    })
    console.log(res.data)
})

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

document.querySelector('#btnGET').addEventListener('click', async function () {
    const { data: res } = await axios.get('url地址', {
        // GET参数
        params: { id: 1 }
    })
    console.log(res)
})

document.querySelector('#btnPost').addEventListener('click', async function () {
    const { data: res } = await axios.post('url地址', {
        // 直接写POST请求体数据，可以不用使用data: {}
        name: 'zs',
        gender: '女'
    })
    console.log(res)
})