1.遍历数组 <div id="app"> <p v-for="item in items">my name is {{item}}</p> </div> <script> var app = new Vue({ el:'#app', data:{ items:[ 'Tom', 'Jack', 'Mickey' ] } }) </script> 2.遍历带索引的数组 <div id=&qu

写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. vuejs是一个优秀的前端mvvm框架,它的易用性和渐进式的理念可以使每一个前端开发人员感到舒服,感到easy.它内部的实现机制值得让我们深究,比如obServer的实现原理,为什么vue能够实现组件化等等,我们需要理解它内部的运行机制,代码结构,这样才能更深入的理解vue的优秀之处,能更好的贴合业务实际写出更恰当的代码. 说明: 在展开本章之前,博主需要对自己看的源码文件进行一个简短的说明: 博主最终选择首先阅

写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而构建vnode,构建指令,实现virtual dom,然后在这基础之上实现双向绑定等.[vuejs深入二]vue源码解析之一,基础源码结构和htmlParse解析器 今天博主就来详细的实现一个拥有核心功能的htmlParse函数,看看它内部的实现逻辑,了解它是怎么样去解析一个vue模板的. 小目标

在学习Vue源码之前,首先要做的一件事情,就是去GitHub上将Vue源码clone下来,目前我这里分析的Vue版本是V2.5.21,下面开始分析: 一.源码的目录结构: Vue的源码都在src目录下,分为6个不同功能的文件 src ├── compiler # 编译相关:包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能. ├── core # 核心代码:包括内置组件.全局 API 封装,Vue 实例化.观察者.虚拟 DOM.工具函数等等 ├── platforms # 不同

本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的data,通过Object.defineProperty()将其所有属性设置为访问器属性 对每个属性添加Observer,并在observer中添加订阅者对象序列Dep 添加订阅者对象Watcher,每次初始化的时候添加到对应data属性中的Dep之中 所有,我们从代码的角度将整体分为三个部分:监听数据变

Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能,在Vue内部实现中也经常用到nextTick.但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作用. 那么,我们就先来看看nextTick是什么. nextTick功能 看看官方文档的描述: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 再看看官方示例: // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.

上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是怎么实现,其实v-model.sync都是语法糖.还有$attr.$listener实现父子组件通信. 使用方式 v-model 2.2.0+ 新增 v-mode1其实就是一个语法糖,默认会利用名为value的props和名为input的事件,但是像单选框.复选框等类型的输入龙剑可能会讲value特性用于不同

Vue 源码解析 Vue 的工作机制 在 new vue() 之后,Vue 会调用进行初始化,会初始化生命周期.事件.props.methods.data.computed和watch等.其中最重要的是通过Object.defineProperty设置setter和getter,用来实现响应式和依赖收集. 初始化之后,调用 $mount 挂载组件. 启动编译器compile(),对template进行扫描,parse.optimize.generate,在这个阶段会生成渲染函数或更新函数,ren

原文链接:http://www.imooc.com/article/14466 Vue.js 最显著的功能就是响应式系统,它是一个典型的 MVVM 框架,模型(Model)只是普通的 JavaScript 对象,修改它则视图(View)会自动更新.这种设计让状态管理变得非常简单而直观,不过理解它的原理也很重要,可以避免一些常见问题.下面让我们深挖 Vue.js 响应式系统的细节,来看一看 Vue.js 是如何把模型和视图建立起关联关系的. 如何追踪变化 我们先来看一个简单的例子.代码示例如下:

1.模板 一个最简答的模板: <div id="app"> {{ message }} </div> v-for模板: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> 2.模板类似于html代码,又不是.因为模板中含有v-if,v-for,@click等不属于html的

力有不逮的对象 众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式系统是基于Object.defineProperty这个方法的,该方法可以监听对象中某个元素的获取或修改,经过了该方法处理的数据,我们称其为响应式数据.但是,该方法有一个很大的缺点,新增属性或者删除属性不会触发监听,举个栗子: var vm = new Vue({ data () { return

当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因为 Vue 只有在浏览器解析.规范化模板之后才能获取其内容.尤其要注意,像 <ul>.<ol>.<table>.<select> 这样的元素里允许包含的元素有限制,而另一些像 <option> 这样的元素只能出现在某些特定元素的内部. 在自定义组件中使用这些受限制的元素时会导致一些问题,例如: <tabl

Vue Router完整的导航解析流程

前言 在性能优化上,最常见的手段就是缓存.对需要经常访问的资源进行缓存,减少请求或者是初始化的过程,从而降低时间或内存的消耗.Vue 为我们提供了缓存组件 keep-alive,它可用于路由级别或组件级别的缓存. 但其中的缓存原理你是否了解,组件缓存渲染又是如何工作.那么本文就来解析 keep-alive 的原理. LRU策略 在使用 keep-alive 时,可以添加 prop 属性 include.exclude.max 允许组件有条件的缓存.既然有限制条件,旧的组件需要删除缓存,新的组件就

目录 前言 1 代码结构 1.1 octotree插件 1.2 vue工程项目目录 1.3 主要代码目录src compiler core platforms server sfc shared 2 下载代码并运行构建 2.1 源代码下载 2.2 打开项目安装依赖 2.3 package.json 的 scripts 配置中添加 --sourcemap 3 编写demo进行调试 前言 记住框架的api是能让我们熟练的使用框架,但优秀的施工人员和优秀的设计师,两者还是有本质的区别.框架的api是如

https://zhuanlan.zhihu.com/p/24435564 开发vue(或类似的MVVM框架)的过程中,需要面对的主要问题有哪些? 剖析vue实现原理,自己动手实现mvvm 官网介绍

一.数据驱动: 数据驱动是vue.js最大的特点.在vue.js中,数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom.数据驱动还有一部分是数据更新驱动视图变化.下面我们来分析vue.js中模板和数据如何渲染成最终的DOM的. 二.Vue初始化发生了什么: 当我们new Vue的时候,发生了什么? 在上一节中,我们分析了vue初始化的代码在'src/core/instance/index.js'中,可以看到,Vue实例里面调用了this._init方法 fu

├── README.md 项目介绍├── index.html 入口页面├── build 构建脚本目录│ ├── webpack.base.conf.js webpack基础配置,开发环境,生产环境都依赖 │ ├── webpack.dev.conf.js webpack开发环境配置│ ├── webpack.prod.conf.js webpack生产环境配置│ ├── build.js 生产环境构建脚本 │ ├── dev-server.js 开发服务器热重载脚本,主要用来实现开发阶段的

vue package.json 中可以看到这个包的来源位置 在repository对象中的url中可以看到     所以当你要封装自己包的时候就可以改变这个地址去加载这个包(把你封装的包发到某个git 环境上)

最近,在开发的时候遇到一个问题,让我对vue中nextTick()的用法加深了了解- 下面是在组件中引用的一个拖拽的组件: <vue-draggable-resizable class="drag-img" :w="coordinate[0].width" :h="coordinate[0].height" :x="coordinate[0].abs" :y="coordinate[0].ord" @

页面中新建信息的时候值之间有多个空格的时候 可以使用pre标签,你写了多少个空格,页面就会渲染出来 html解析 什么是pre标签