Vue-day06

Vue.js

特点

组件化系统

虚拟dom

声明式编程

指令

v-for

v-bind

v-on

v-model

v-if

v-show

v-html

v-text

v-cloak

选项

data

methods

computed

directives

组件

组件的生命周期

创建期

beforeCreate

created

挂载期

更新期

卸载期

组件通信

父组件向子组件传值

父组件需要在子组件身上通过自定义属性传值，子组件内部通过props接收值

子组件向父组件传值

父组件需要在子组件身上绑定自定义事件,子组件内部通过$emit触发事件并传值

兄弟化组件传值

先实例化一个公共的通信对象eventBus,其中一个组件通过$on监听事件，另外一个兄弟组件通过$emit去触发事件

跨组件传播

外层组件通过provide选项传值，内层组件通过inject接收值

ref

ref放置在标签上

获取的是所在标签的dom节点

ref放置在组件上

获取的是所在组件的实例

V-model

在普通表单元素上用

实现对表单内容的双向绑定

在自定义组件身上用

实现对子组件内容的双向绑定

插槽

作用

自定义组件内容

分类

默认插槽 <slot/>

具名插槽<slot name="" />

内置组件

component 动态组件

keep-alive 缓存组件

需要包裹在需要缓存的组件外部, 被缓存的组件会保留在计算机内存中, 组件在下一次切换时只需要从内存中读取并显示出来即可。

include 指定需要缓存的组件列表

exclude 指定不需要缓存的组件列表

案例

声明

在export default后书写

props: ['modelValue'],//声明通过哪个属性接收传来的值
emits: ['update:modelValue'],//声明事件, 将来可以通过触发该事件来更新父组件中v-model对应属性的值.

传值

  provide:{
      money: 88888,
      arr:[1,2,3]
    },//通过provide选项 传值

接收值

inject:['money','arr']//通过inject选项，接收值