Vue第二天—侦听器、计算属性、Vue-ci、Vue组件

目录

1.  侦听器

1.1 什么是 watch 侦听器

1.2 使用 watch 检测用户名是否可用

1.3 immediate 选项

1.4 deep 选项

1.5 监听对象单个属性的变化

2. 计算属性

2.1 什么是计算属性

2.2 计算属性的特点

3. axios

3.1 发起 GET 请求：

3.2  发起 POST 请求：

4. Vue-ci

4.1 什么是单页面应用程序

4.2 什么是 vue-cli

4.3 vue 项目的运行流程

5. Vue组件

5.1 什么是组件化开发

5.2 vue 中的组件化开发

5.3 vue 组件的三个组成部分

5.3.1 template

5.3.2 script

5.3.3 style

5.3.4 让 style 中支持 less 语法

5.4 组件之间的父子关系

5.4.1 使用组件的三个步骤

5.4.2 通过 components 注册的是私有子组件

5.4.3 注册全局组件

5.5 组件的 props

5.5.1 props 是只读的

5.5.2 props 的 default 默认值

5.5.3 props 的 type 值类型

5.5.4 props 的 required 必填项

5.6 组件之间的样式冲突问题

5.6.1  如何解决组件样式冲突的问题

5.6.2 style 节点的 scoped 属性

5.6.3 /deep/ 样式穿透

---

1.  侦听器

1.1 什么是 watch 侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

 <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: ''
            },
            // 所有的侦听器，都应该被定义到 watch 节点下
            watch: {
                // 侦听器本质上是一个函数，要监视那个数据的变化，就把数据名作为方法名即可
                // 新值在前，旧值在后
                username(newVal, oldVal) {
                    console.log('监听到了 username 值的变化!', newVal, oldVal);
                }
            }
        })
    </script>

1.2 使用 watch 检测用户名是否可用

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

<script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'admin'
            },
            // 所有的侦听器，都应该被定义到 watch 节点下
            watch: {
                // 侦听器本质上是一个函数，要监视那个数据的变化，就把数据名作为方法名即可
                // 新值在前，旧值在后
                username(newVal) {
                    if (newVal === '') return
                    // console.log('监听到了 username 值的变化!', newVal, oldVal);
                    //  1. 调用 jQuery 中的 Ajax 发起请求，判断 newVal 是否被占用！！！
                    $.get('https://www.escook.cn/api/finduser/' + newVal, function (result) {
                        console.log(result);
                    })
                }
            }
        })
    </script>

1.3 immediate 选项

 默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使 用 immediate 选项。

<script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'admin'
            },
            // 所有的侦听器，都应该被定义到 watch 节点下
            watch: {
                username: {
                    // 侦听器的处理函数
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                    },
                    // immediate 选项默认值是 false
                    // immediate 的作用是：控制侦听器是否自动触发一次
                    immediate: true
                }
            }
        })

    </script>

1.4 deep 选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选 项

 <script>
        const vm = new Vue({
            el: '#app',
            data: {
                // 用户信息对象
                info: {
                    username: 'admin'
                }
            },
            // 所有的侦听器，都应该被定义到 watch 节点下
            watch: {
                info: {
                    handler(newVal) {
                        console.log(newVal);
                    },
                    // 开启深度监听，只要对象中任何一个属性变化了，都会触发 “对象的侦听器”
                    deep: true
                }
            }
        })

    </script>

1.5 监听对象单个属性的变化