Vue学习Day05

1.什么是动态组件

动态组件指的是动态切换组件的显示和隐藏

2.如何实现动态组件的渲染

vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染

compoent标签是vue内置的,作用 组件的占位符

 is属性的值,表示要渲染的组件的名字

3.keep-alive的使用

因为component默认切换后会销毁原来的再次切换回来会重新创建所以我们需要用到keep-alive来声明它切换后不会被销毁

keep-alive可以把原来内部的组件进行缓存,而不是销毁组件

4.keep-alive对应的生命周期函数

当组件被缓存时,会自动触发组件的deactivated的生命周期函数

当组件被激活时,会自动触发组件的activated生命周期函数

5.keep-alive的include属性

include属性用来指定:只有名称匹配的组件会被缓存。多个组件之间使用英文的逗号分隔

或者可以通过 exclude属性指定那些组件不被缓存

注意:include和exclude不能同时使用

插槽 (Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定部分定义为插槽 

默认情况下,在使用组件的时候,提供的内容会被填充到名字为default的插槽中        如果要把内容填充到指定名称的插槽中,需要使用v-slot:这个指令        v-slot:后面要跟上插槽的名字        v-slot:指令不能直接用在元素上,必须用在template标签上        template这个标签,它是一个虚拟的标签,只起到包裹作用,不会被渲染为实质性的html元素 
<!-- 声明一个插槽       vue官方规定:每一个slot插槽,都要有一个name名称      如果没有定义slot的name属性,那它有一个默认名叫default-->

v-slot简写为# 

具名插槽

作用域插槽

在封装组件时,为预留的<solt>提供属性对应的值,这种用法叫做“作用域插槽”

自定义指令

vue官方提供了v-text、v-for、v-model、v-fi等常用的指令。除此之外vue还允许开发者自定义指令

自定义指令的分类

    私有自定义指令

    全局自定义指令

可以在directives节点下声明私有自定义指令

使用binding获取指令绑定的值 

update函数只调用1次:当指令第一次绑定到元素时调用,当DOM更新时bind函数不会被触发。update函数会在每次DOM更新时被调用

函数简写

如果bind和update函数中的逻辑完全相同,则对象格式的自定义指令可以简写成函数格式

全局自定义指令

全局共享自定义指令需要通过Vue.directive()进行声明

eslint:规定代码风格的一个工具

常用规则

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 此文章仅记录学习Vue中一些平常自己没有去学习到知识,很多东西都是基于自我的认知去写的。文中可能会有理解错误的地方...
    Mstian阅读 4,125评论 0 10
  • 一、简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同...
    想聽丿伱說衹愛我阅读 3,355评论 0 1
  • [TOC] Vue 学习笔记 Vue 源码解析 - 主线流程 Vue 源码解析 - 模板编译 Vue 源码解析 -...
    Whyn阅读 3,754评论 0 1
  • 笔记 脚手架文件结构 关于不同版本的Vue vue.js与vue.runtime.xxx.js的区别:vue.js...
    ARGM10阅读 3,914评论 0 0
  • 一、创建Vue实例 1.创建实例property和方法[https://cn.vuejs.org/v2/api/#...
    甜柚小仙女阅读 3,800评论 0 0