组件(data,props属性,自定义事件)--插槽分发(slot插槽,具名插槽,插槽作用域)--动态组件(使用方式,keep-alive,refs)--数据处理--生命周期--自定义命令--过滤器
目录
三.组件
五.data
六.props属性
七.props校验
八. 非props属性
九.自定义事件
四. 插槽分发
一.slot插槽
二.具名插槽
三.插槽作用域
五.动态组件
一.使用方式
二.keep-alive
三.refs
六.数据处理
一.watch属性
二.watch实例
三.$watch
四.computed属性
五.setter和getter
七.生命周期
八.自定义指令
一.自定义使用
二.钩子函数
三.图片懒加载
九.过滤器
三.组件
五.data
通过 data 属性指定自定义组件的初始数据，要求 data 必须是一个函数，如果不是函数就会报错。
六.props属性
Props属性
组件可以嵌套使用，叫做父子组件。那么父组件经常要给子组件传递数据这叫做父子组件通信。
父子组件的关系可以总结为 props 向下传递，事件向上传递。
父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。
1、在父组件中定义数据
2、在使用组件时，绑定父组件中的数据
3、在子组件中通过props属性声明父组件中传递过来的参数
4、在template属性中使用父组件中的参数
七.props校验
子组件在接收父组件传入数据时, 可以进行props校验，来确保数据的格式和是否必传。可以指定一下属性：
1) type: 指定数据类型 String Number Object ...注意不能使用字符串数组，只能是对象大写形式
2) required: 指定是否必输
3) default: 给默认值或者自定义函数返回默认值
4) validator: 自定义函数校验
八. 非props属性
引用子组件时，非定义的props属性,自动合并到子组件上,class和style也会自动合并。
九.自定义事件
父组件给子组件传值使用props属性, 那么需要子组件更新父组件时,要使用自定义事件$on和$emit：
$on监听: 不能监听驼峰标示的自定义事件, 使用全部小写(abc)或者-(a-b-c)
$emit主动触发: $emit(事件名,传入参数)
主动挂载
自定义事件不仅可以绑定在子组件，也可以直接挂载到父组件，使用$on绑定和$emit触发。
四. 插槽分发
一.slot插槽
你好
这是p元素
Hello Vue
如果没有传递数据，默认显示这段文本
二.具名插槽
具名插槽
具名插槽slot, 就是给插槽起个名字。
在子组件定时可以定定义多个
你好
这是p元素
如果没有传递数据，默认显示这段文本
--------------------
如果没有传递数据，默认显示这段文本
三.插槽作用域
作用域插槽slot-scope，
父组件通过
父组件通过进行引用。
例1:
你好----{{props.msg}}----{{props.txt}}
--------------------
如果没有传递数据，默认显示这段文本
例2:
你好----{{msg}}----{{txt}}
--------------------
如果没有传递数据，默认显示这段文本
五.动态组件
一.使用方式
使用
二.keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令。
三.refs
使用ref 给每个组件起一个固定的名字,方便后续直接引用操作，在父组件中使用$refs访问子组件
六.数据处理
一.watch属性
使用 watch 属性来监听数据的变化，同时可以指定监听那个属性。
{{name}}
二.watch实例
例1:
firstName:
lastName:
{{fullName}}
例2:
firstName:
lastName:
{{fullName}}
三.$watch
$watch第一个参数是需要监听的属性，第二个是回调函数用法和watch一样。需要取消监听只需拿到监听对象的引用，这个引用是返回一个函数对象，执行该对象就可以取消监听。
同时监听多个属性，可以不指定属性：
{{firstName}} {{lastName}}
四.computed属性
computed计算属性用于定义比较复杂的属性计
computed和methods区别：
1.计算属性使用computed定义, 方法使用methods定义
2.计算属性使用时不加括号执行符
3.计算属性是基于它们的依赖进行缓存的,计算属性只有在它的相关依赖发生改变时才会重新求值。否则返回之前计算好的值,性能更高!
五.setter和getter
以指定 setter 进行数据更新,指定getter获取数据
七.生命周期
常用的生命周期钩子函数有:
1) created: 实例创建完成后被立即调用
2) mounted: 实例挂载完成后被立即调用
3) beforeUpdate: 实例需要渲染之前调用
4) updated: 实例更新后调用
5) destroyed: Vue 实例销毁后调用
八.自定义指令
一.自定义使用
全局指令
局部指令
使用directive定义，第一个参数为指令名，使用时加上v-前缀才能生效。
inserted属性指当绑定元素插入到DOM时调用。
二.钩子函数
钩子函数的参数有三个：
1）el：当前指令绑定元素
2）binding：当前指令绑定的所有信息对象，有以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1", value 的值是 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：绑定值的字符串形式。例如 v-my-directive="1 + 1" ，expression 的值是 "1 + 1"。
arg：传给指令的参数。例如 v-my-directive:foo，arg 的值是 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
3）vnode：Vue 编译生成的虚拟节点
4）oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
三.图片懒加载
九.过滤器
Vue允许自定义过滤器，可被用作一些常见的文本格式化。
过滤器可以用在两个地方：mustache 插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：
div id="app">
{{msg | uppercase | length}}
{{msg | test("<--","--<")}}