首页 Vue.js

Vue.js

  • Vue.js源码分析(三十二)总结

    Vue.js源码分析(三十二)总结

    第一次写博客,坚持了一个多月时间,Vue源码分析基本分析完了,回过头也看也漏了一些地方,比如双向绑定里的观察者模式,也可以说是订阅者模式,也就是Vue里的Dep、Watcher等这些函数的作用,网上搜一下讲解也挺多的,这些知识点也是很重要的,对于阅读源码的同学这一块务必要花点时间学一下还有一个挺重要是Vue的一个use和mixin方法,这两个方法用于Vue插件的注册,比如Vuex、Vuex-router等等都是通过Vue.use()来注册的,注册完后会执行对应插件的install方法进行安装,例如对于Vuex来说:...

    Vue.js 2019-11-16 67 0
  • Vue.js源码分析(三十一)高级应用keep-alive组件详解

    Vue.js源码分析(三十一)高级应用keep-alive组件详解

    当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <titl...

    Vue.js 2019-11-16 120 0
  • Vue.js源码分析(三十)高级应用函数式组件详解

    Vue.js源码分析(三十)高级应用函数式组件详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函数式组件。因为函数式组件只是函数,所以渲染开销也低很多,当需要做这些时,函数式组件非常有用:  程序化地在多个组件中选择一个来代为渲染。  在将children、props、data传递给子组件之前操作它们。函数式组件的定义和普通组件类似,也是一个对象,不过而且为了区分普通的组件,定义函数式组件需要指定一个属性,名为f...

    Vue.js 2019-11-16 188 0
  • Vue.js源码分析(二十九)高级应用transition-group组件详解

    Vue.js源码分析(二十九)高级应用transition-group组件详解

    对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件。transition-group组件的props和transition组件类似,不同点是transition-group组件的props是没有mode属性的,另外多了以下两个props tag    标签名 moveClass 新增/移除元素时的过渡 ;如果未指定则默认会拼凑出name+"-move"这个格式的,一般很少用到,比较复杂的动画可以该接口实现不同于transition组件,tran...

    Vue.js 2019-11-16 53 0
  • Vue.js源码分析(二十八)高级应用transition组件详解

    Vue.js源码分析(二十八)高级应用transition组件详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性:name   用于自动生成CSS过渡类名 例如:name:'fade'将自动拓展为.fade-enter,.fade-enter-active等 appear  是否在初始渲染时使用过渡 默认为false css    是否使用 CSS 过渡类。 默认为 true。如...

    Vue.js 2019-11-16 57 0
  • Vue.js源码分析(二十七)高级应用异步组件详解

    Vue.js源码分析(二十七)高级应用异步组件详解

    当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的。一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下。异步组件简单的说就是只有等到在页面里显示该组件的时候才会从服务器加载,不显式的话就不会加载,这样即可提高客户端的访问速度也可以降低对服务器的请求次数,可谓优化的一个利器。异步组件常用有3种异步组件的实现:工厂函数、Promise加载和高级异步组件。注:一般的项目都是在vue-router的路由里面创建vue-router实例时通过routes属性指定路由的...

    Vue.js 2019-11-16 62 0
  • Vue.js源码分析(二十六)高级应用作用域插槽详解

    Vue.js源码分析(二十六)高级应用作用域插槽详解

    普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的。有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单元格数据的显示格式,我们可以通过作用域插槽自定义数据的显示格式,对于二次开发来说具有很强的扩展性。作用域插槽使用<template>来定义模板,可以带两个参数,分别是:slot-scope ;模板里的变量,旧版使用scope属性slot   ;该作用域插槽的name,指定多个作用域插槽时用到,默认为...

    Vue.js 2019-11-16 58 0
  • Vue.js源码分析(二十五)高级应用插槽详解

    Vue.js源码分析(二十五)高级应用插槽详解

    我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">   ...

    Vue.js 2019-11-16 90 0
  • Vue.js源码分析(二十四)高级应用自定义指令详解

    Vue.js源码分析(二十四)高级应用自定义指令详解

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染、插入到父节点、更新、解绑时可以执行一些特定的操作(钩子函数()自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指令,局部自定义指令只能在当前V...

    Vue.js 2019-11-16 101 0
  • Vue.js源码分析(二十三)指令篇v-show指令详解

    Vue.js源码分析(二十三)指令篇v-show指令详解

    v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>...

    Vue.js 2019-11-16 46 0
  • Vue.js源码分析(二十二)指令篇v-model指令详解

    Vue.js源码分析(二十二)指令篇v-model指令详解

    Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的。v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。例如:<!DOCTYPE html> <html lang="en"> <head>     <meta c...

    Vue.js 2019-11-16 77 0
  • Vue.js源码分析(二十一)指令篇v-pre指令详解

    Vue.js源码分析(二十一)指令篇v-pre指令详解

    该指令会跳过所在元素和它的子元素的编译过程,也就是把这个节点及其子节点当作一个静态节点来处理,例如:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>...

    Vue.js 2019-11-16 49 0
  • Vue.js源码分析(二十)指令篇v-once指令详解

    Vue.js源码分析(二十)指令篇v-once指令详解

    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,例如:<p>Message: {{ msg }}</p>以后每当msg属性发生了改变,插值处的内容都会自动更新。可以给DOM节点添加一个v-once指令,这样模板只会在第一次更新时显示数据,此后再次更新该DOM里面引用的数据时,内容不会自动更新了,例如:<!DOCTYPE html> <html lang="en"> <head>...

    Vue.js 2019-11-16 132 0
  • Vue.js源码分析(十九)指令篇v-html和v-text指令详解

    Vue.js源码分析(十九)指令篇v-html和v-text指令详解

    双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令,例如:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</t...

    Vue.js 2019-11-16 92 0
  • Vue.js源码分析(十八)指令篇v-for指令详解

    Vue.js源码分析(十八)指令篇v-for指令详解

    我们可以用 v-for 指令基于一个数组or对象来渲染一个列表,有五种使用方法,如下:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>  ...

    Vue.js 2019-11-16 100 0