Vue基础Day03

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

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

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

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

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

一个数据, 依赖另外一些数据计算而来的结果时，使用计算属性-computed
语法:
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 元素相冲突