vue基础-2.0

vue-2.0

1.过滤器
目标：转换格式，顾虑器就是一个函数，传入值返回处理后的值
a. 过滤器只能用在，插值表达式和v-bind动态属性中 ，| 也叫管道符 可以放多个
b. 语法：
Vue.filter(“过滤器名”,(值)=>(return “返回处理后的值”)) 全局设置过滤器
filters:{“过滤器名”,(值)=>(return “返回处理后的值”)} 局部设置过滤器

vue变量 | 过滤器名字
经常用到的场景就是在格式化时间的时候，可以把时间设置成简单易懂的格式 渲染到页面上

2.计算属性 computed
1.
目标：一个变量的值，依赖另外一些数据计算而来的结果
特点：函数内使用的变量改变 ，重新计算结果返回
注意：计算属性名和data里名字不能重复
优点：带缓存 依赖项不变，直接从缓存取 依赖项改变，函数自动执行并重新缓存
2.计算属性完整写法：

什么时候使用计算属性的完整写法呢？
给计算属性变量赋值时
set函数和get函数什么时候执行呢？
set接收要赋予的值，get里要返回给这个计算属性具体值

3.侦听器 watch
目标：可以侦听data/computed属性值的改变

目标2：侦听复杂类型，或者立即执行侦听函数

所以，如何侦听一个对象/数组呢？
把侦听器写成对象形式，给handler方法和deep:true
如果要侦听函数马上执行呢？ immediate:true

4.vue组件基础
什么时候我们要用组件呢？ 当我们遇到重复标签想复用的时候，我们就可以封装成组件。
那么封装成组件有什么好处？
封装成组件，组件之间各自独立，便于复用。
所以组件本质是什么？
组件是可复用的vue实例，封装标签，样式和代码
我们开发的时候也要保持一个组件化的思想：
组件化：封装的思想，把页面上可重复使用的部分封装成组件，便于复用和维护
一个页面可以拆分成一个个组件，一个组件就是一个整体，每一个组件都可以有自己独立的结构样式和行为

注册组件

style标签中的scoped原理是什么？
vue组件内样式，只针对当前组件内标签生效，原理是，会自动给标签添加data-v-hash值属性，所有选择都带属性选择

组件通信：
1、父组件->子组件传值
父组件（app.vue）内，要展示封装的组组件（MyProduct.vue）
首先要 引入组件，使用组件，传值进去

2.那么什么时候需要父传子技术呢？
从一个vue组件里吧值传给另一个vue组件（父->子）被引入的组件 为子组件
口诀：父传子 自定义属性
子组件内，props定义变量，在子组件使用变量
父组件内，使用子组件，属性方式给props变量传值
3.父组件 向 子组件 循环使用-传值
一般 是 在父组件中循环

注：每次循环，变量和组件 都是独立的

3.单向数据流

所以，props中定义的变量不能修改，vue默认 props中的变量本身是只读属性
4.组件通信：子向父


什么时候使用子传父技术？
当子组件想要改变父组件中的数据时
子传父怎么实现呢？ 口诀：自定义事件
父组件内给组件@自定义事件=“父method函数”
子组件内，恰当实际this.$emit(‘自定义事件’)

5.组件通信 EventBus 用跨组件通信时使用（兄弟组件）

什么时候使用EventBus技术 ?
当2个没有引用关系的组件之间要通信时
本质：
空白vue对象，只负责$on和$emit

父组件 和 子组件具体的代码实例图

持续更新中。。。。