vue day03

把值转成另一种形式, 使用过滤器。
目的: 转换格式, 过滤器就是一个函数, 传入值返回处理后的值。
注意：过滤器只能用在, ==插值表达式和v-bind表达式==
语法: 

* Vue.filter("过滤器名", (值) => {return "返回处理后的值"})

* filters: {过滤器名字: (值) => {return "返回处理后的值"}

vue过滤器-传参和多过滤器
语法:

* 过滤器传参:   vue变量 | 过滤器(实参) 
* 多个过滤器:   vue变量 | 过滤器1 | 过滤器2

当对于对象或者数组等复杂类型的监听时需要进行多层遍历进而判断是否变化，此时就需要使用watch的深度监听。

watch: {
    value: {
           handle() {
            // 在value变量改变后进行其他操作。
            },
           deep: true // 深度侦听
       }
}

一、vue计算属性-computed

计算属性使用场景：当变量的值，需要通过别人计算而得来时

语法：computed: { "计算属性名" () { return "值" } }

注意点：计算属性和data属性都是变量，不能重名；函数内使用的变量改变，重新计算结果返回

computed: {
    "计算属性名" () {
        return "值"
    }
}
完整写法：
computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}
想要侦听一个属性变化, 可使用侦听属性watch

语法:
watch: {
    "被侦听的属性名" (newVal, oldVal){
        
    }
}
深度侦听和立即执行：
watch: {
    "要侦听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

vue组件
组件是可复用的 Vue 实例, 封装标签, 样式和JS代码

组件化 ：封装的思想，把页面上 `可重用的部分` 封装为 `组件`，从而方便项目的 开发 和 维护

一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)**

口诀: 哪部分标签复用, 就把哪部分封装到组件内

==(重要): 组件内template只能有一个根标签==

==(重要): 组件内data必须是一个函数, 独立作用域==

步骤:

1. 创建组件 components/Pannel.vue

封装标签+样式+js - 组件都是独立的, 为了复用

2. 注册组件: 创建后需要注册后再使用

vue组件通信

因为每个组件的变量和值都是独立的

组件通信先暂时关注父传子, 子传父

父: 使用其他组件的vue文件

子: 被引入的组件(嵌入)

封装 vue 组件的过程

?    首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。

* 分析需求：确定业务需求，把页面中可以复用的结构，样式以及功能，单独抽离成一个组件，实现复用

* 具体步骤：Vue.component 或者在new Vue配置项components中, 定义组件名, 可以在props中接受给组件传的参数和值，子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法。

Vue组件进行传值：

父向子 -> props定义变量 -> 父在使用组件用属性给props变量传值

子向父 -> $emit触发父的事件 -> 父在使用组件用@自定义事件名=父的方法 (子把值带出来)

给组件命名有两种方式(在Vue.Component/components时)，一种是使用链式命名"my-component"，一种是使用大驼峰命名"MyComponent"，

?    因为要遵循W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)，避免和当前以及未来的 HTML 元素相冲突