Vue.js 源码分析(十) 基础篇 ref属性详解

【Vue.js 源码分析(十) 基础篇 ref属性详解】的更多相关文章

Vue.js 源码分析(十) 基础篇 ref属性详解

ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script s…

先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDestroy和destroyed,分别对应八个不同的时期,另外还有两个activated和deactivated生命周期是对应Keep-Alive组件的关于这八个生命周期的具体用法官网介绍的很详细了,飞机入口:点我点我 ,另外还有一张比较直观图形介绍,飞机入口:点我点我例如: <!DOCTYPE h…

Vue.js 源码分析(六) 基础篇计算属性 computed 属性详解

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护,比如: <div id="example">{{ message.split('').reverse().join('') }}</div> <script> var app = new Vue({ el:'#example', data:{message:'hello world'} }) </script> 这样模板不再是简单的声…

Vue.js 源码分析(十三) 基础篇组件 props属性详解

父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/np…

Vue.js 源码分析(四) 基础篇响应式原理 data属性

官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方法. Vue内部实现时用到了ES5的Object.defineProperty()这个API,也正是这个原因,所以Vue不支持IE8及以下浏览器(IE8及以下浏览器是不支持ECMASCRIPT 5的Object.defineProperty()). 以一个Hello World为例,如下: <!DO…

Vue.js 源码分析(三) 基础篇模板渲染 el、emplate、render属性详解

Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会替换挂载的元素.挂载元素的内容都将被忽略,除非模板的内容有分发插槽. render ;字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode. 简单说一下,就是: Vue内部会判断如果没有re…

Vue.js 源码分析(二) 基础篇全局配置

Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies ;自定义合并策略的选项silent ;是否关闭警告,默认为false,如果设置true,那么将不会有各种报错productionTip ;开发模式下是否在控制台显示生产提示,即一条You are running Vue in development mode提示,设置false,即可关闭该提示devto…

Vue.js 源码分析(八) 基础篇依赖注入 provide/inject组合详解

先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和inject需要配合使用,它们的含义如下: provide ;一个对象或返回一个对象的函数,该对象包含可注入起子孙的属性,可以使用ES6的Symbols作为key(只有原生支持Symbol才可以)inject ;一个字符串数组或一个对象 ;字符串…

Vue.js 源码分析(七) 基础篇侦听器 watch属性详解

先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象,如果时对象可以包含如下几个属性: handler ;对应的函数 ;可以带两个参数,分别是新的值和旧的值,上下文为当前Vue实例 immediate ;侦听开始之后是否立即调用 ;默认为false …

Vue.js 源码分析(十一) 基础篇过滤器 filters属性详解

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>…