关闭
当前搜索:

Vue.js解析(十一)【说说element组件库broadcast与dispatch】

周所周知,Vue在2.0版本中去除了broadcast方法以及broadcast方法以及dispatch方法,最近在学习饿了么的Element时重新实现了这两种方法,并以minix的方式引入。 看一下源代码 function broadcast(componentName, eventName, params) { /*遍历当前节点下的所有子组件*/ this.$children....
阅读(57) 评论(0)

Vue.js解析(十)【Vue组件间通信】

什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。 Vue组件间通信 父组件向子组件通信 方法一:props 使用props,父组件可以使用...
阅读(45) 评论(0)

Vue.js源码解析(九)【从template到DOM(Vue.js源码角度看内部运行机制)】

从new一个Vue对象开始 let vm = new Vue({ el: '#app', /*some options*/ }); 很多同学好奇,在new一个Vue对象的时候,内部究竟发生了什么? 究竟Vue.js是如何将data中的数据渲染到真实的宿主环境环境中的? 又是如何通过“响应式”修改数据的? template是如何被编译成真实环境中可用的HTML的? V...
阅读(71) 评论(0)

Vue.js源码解析(八)【Vue.js异步更新DOM策略及nextTick】

操作DOM 在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: template> div> div ref="test">{{test}}div> button @click="handleClick">tetbutton> div> template> export default { data () {...
阅读(62) 评论(0)

Vue.js源码解析(七)【聊聊Vue.js的template编译】

$mount首先看一下mount的代码/*把原本不带编译的$mount方法保存下来,在最后会调用。*/ const mount = Vue.prototype.$mount /*挂载组件,带模板编译*/ Vue.prototype.$mount = function ( el?: string | Element, hydrating?: boolean ): Component { e...
阅读(53) 评论(0)

Vue.js解析(六)【Virtual DOM与diff(Vue.js实现)】

VNode 在刀耕火种的年代,我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。 那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树,在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢?于是虚拟DOM出现了,它是真实DOM的一层抽象,用属性描述真实DOM的各个特性。当它发生变化的时候,就会去修改视图。 但是这样的Ja...
阅读(70) 评论(0)

Vue.js解析(五)【VNode节点(Vue.js实现)】

抽象DOM树 在刀耕火种的年代,我们需要在各个事件方法中直接操作DOM来达到修改视图的目的。但是当应用一大就会变得难以维护。 那我们是不是可以把真实DOM树抽象成一棵以JavaScript对象构成的抽象树,在修改抽象树数据后将抽象树转化成真实DOM重绘到页面上呢?于是虚拟DOM出现了,它是真实DOM的一层抽象,用属性描述真实DOM的各个特性。当它发生变化的时候,就会去修改视图。 但是这样的J...
阅读(95) 评论(0)

Vue.js解析(四)【Vue.js事件机制】

Vue事件API 众所周知,Vue.js为我们提供了四个事件API,分别是 $on,$once,$off,$emit。 初始化事件 初始化事件在vm上创建一个_events对象,用来存放事件。_events的内容如下: { eventName: [func1, func2, func3] } 存放事件名以及对应执行方法。 /*初始化事件*/ export functi...
阅读(122) 评论(0)

Vue.js解析(三)【从Vue.js源码角度再看数据绑定】

数据绑定原理前面已经讲过Vue数据绑定的原理了,现在从源码来看一下数据绑定在Vue中是如何实现的。首先看一下Vue.js官网介绍响应式原理的这张图。这张图比较清晰地展示了整个流程,首先通过一次渲染操作触发Data的getter(这里保证只有视图中需要被用到的data才会触发getter)进行依赖收集,这时候其实Watcher与data可以看成一种被绑定的状态(实际上是data的闭包中有一个Deps订...
阅读(102) 评论(0)

Vue.js解析(二)【依赖收集】

为什么要依赖收集 先看下面这段代码 new Vue({ template: ` span>text1:span> {{text1}} span>text2:span> {{text2}} div>`, data: { text1: 'text1', text2:...
阅读(55) 评论(0)

Vue.js解析(一)【Vue.js响应式原理】

关于Vue.js Vue.js是一款MVVM框架,上手快速简单易用,通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty,尤大大在Vue.js文档中就已经提到过,这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个sette...
阅读(59) 评论(0)

Asp.net MVC+Vue.js

@{ Layout = null; }             学生列表          <style type="text/...
阅读(1355) 评论(0)

Html流量充值页面效果

change.html <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0...
阅读(575) 评论(0)

Vue生命周期初探

vue 以后发之势加上其独有的特性(压缩后很小),轻量级的MVVM框架,目前github star已有5.94万,而react 7万。由此可见是两个非常热门前端框架。这里就vue的生命周期做个初步体验。发现看视频,动手之后,过段时间还是会忘,所以写一篇短文以备不时之需。 先附上官网的图片:vue生命周期生命周期的钩子函数如果使用得当,会大大增加开发效率: 生命周期实践:为了更好的查看before...
阅读(119) 评论(0)

vue_resource 使用说明

前几天用vue-resource调用接口,用post方式给后端,发现后端php接受不到数据,这好奇怪,最后发现提交给后端的时候 需要加一个参数就是:emulateJSON : true 这句话的意思是 将request body以application/x-www-form-urlencoded content type发送上个小demo看下_this.$http.post('/apiwx2/xqs...
阅读(292) 评论(0)

MVC4使用VueJS入门

Home视图文件夹Index.cshtml@{ ViewBag.Title = "主页"; } ASP.NET<...
阅读(2307) 评论(0)
    个人资料
    • 访问:1065133次
    • 积分:15788
    • 等级:
    • 排名:第717名
    • 原创:313篇
    • 转载:762篇
    • 译文:107篇
    • 评论:274条
    博客专栏
    文章分类
    打赏
    如果你觉得我的文章对您有用,请随意打赏。 微信 支付宝