官网上关于组件继承分为两大类，全局组件和局部组件。无论哪种方式，最核心的是创建组件，然后根据场景不同注册组件。 有一点要牢记，“Vue.js 组件其实都是被扩展的 Vue 实例”！ 1. 全局组件 // 方式一 var MyComponent = Vue.extend({name: my-component,template: <div>A custom component!</div> }); Vue.component(my-component, MyComponent);// 方式二 Vue.component(my-component, {name: my-component,template: <div>A ...
简介 vue是非常流行的框架，他结合了angular和react的优点，从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时，我们经常用到一个方法是this.$nextTick，相信你也用过。我常用的场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到本章介绍的函数。 为什么要用nex...
看完vue2的官方文档后，找个入门项目巩固下知识点，简单的todolsit是个不错的选择。项目用到了vue.js vue.cli webpack ES6 node环境，完成项目后会对这些技术栈有了些了解。 准备开发环境 $ npm install -g vue-cli $ vue init ，比如 vue init webpack todolist $ cd todolist $ npm install $ npm run dev安装谷歌插件vue.js devtools下载vue.js的webpack模板下载todomvc的模板 (提供html和css)（也可以直接$ git clone https://...
1.vue中数据的双向绑定采用的时候，数据劫持的模式。其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter。这也正是Vue不兼容IE8以下的原因。 2.Object.defineProerty(); var obj = {};Object.defineProperty(obj,"hello",{enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举);configurable: true, //表示这个属性能否用 delete 删除get(){ //获取属性值，说白了就是返回值return ...
上一篇的代码中，忽略了对数组的处理，只关心了需要关心的部分，假装数组不存在。 这一篇开始考虑数组的问题。 从最简单的入手 先考虑一个问题，如何监听数组中的对象变化？忽略掉数组本身及其中的一般值，只考虑对象数组中的对象。 遍历数组，而后对数组中的每个对象调用 observe 方法 // 上一篇中出现的未曾重写的代码，这一篇中不再重复 var Observer = function Observer(value) {this.value = value;this.dep = new Dep();// ...
本文能帮你做什么？好奇vue双向绑定的同学，可以部分缓解好奇心，还可以帮你了解如何实现$watch。 前情回顾我之前写了一篇没什么干货的文章，并且刨了一个大坑。 今天，打算来填一天，并再刨一个。 不过话说说回来了，看本文之前，如果不知道Object.defineProperty，还必须看看解析神奇的Object.defineProperty 不得不感慨vue的作者，人长得帅，码写的也好，本文是根据作者源码，摘取出来的 本文将实现什么正如上一篇许下的承诺一样...
前端的数据双向绑定指的是view（视图）和model（数据）两者之间的关系；view层是页面上展示给用户看的信息，model层一般是指通过http请求从后台返回的数据。view到model的绑定都是通过事件回调函数操作的，model到view的绑定有多种方法。 angular，react，vue等mv*模式的框架都实现了数据双向绑定；angular是通过脏检查即新老数据的比较来确定哪些数据发生了变化，从而将它更新到view中；vue则是通过设置数据的get和set函数来实现的...
组件间通信（父子，兄弟） 相关链接\组件通信：点击查看 学习链接：Vue.js——60分钟快速入门点击查看 分分钟玩转Vue.js组件点击查看 父组件传子组件 父传子方法（一） 属性传递 props //子组件 <template> <ul><li v-for="item in dataList">{{item}}</li></ul> </template><script>export default { props : { dataList : [] }} </script> //父组件 <template><component-child v-bind:data-list="dataList"> </component-child...
一、实现双向绑定的做法 前端MVVM最令人激动的就是双向绑定机制了，实现双向数据绑定的做法大致有如下三种： 1.发布者-订阅者模式（backbone.js） 思路：使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化，我们将代理事件到发布者-订阅者模式，这会反过来将变化广播并传播到所有绑定的对象和元素...
市面上大多数关于Vue.js自定义指令的文章都在讲语法，很少讲实际的应用场景和用例，以致于即便明白了怎么写，也不知道怎么用。本文不讲语法，就讲自定义指令的用法。自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。比如谷歌图片的加载做得非常优雅，在图片未完成加载前，用随机的背景色占位，图片加...
实现此例您可以学到： vue-cli的基本应用父组件如何向子组件传递值单文件组件如何引入scssv-on和v-for的基础应用源码下载 一、搭建vue开发环境 1）更换镜像到cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 2）安装vue-cli cnpm install -g vue-cli 3）初始化vue项目 命令模式进入项目所在的目录，如d:\test\，输入vue init 项目名称即可。如果你想引入vue2.0框架，必须把nodejs、webpack和npm升级到最新版...
前言 最近在工作中遇到一个问题，在网页中后台传来的json数据中包含html标签，将该json数据绑定到Vue.js中对象中，对该对象进行for循环，发现数据中的html标签不能被解析，而是当作字符显示出来。 问题如下所示：解决方法：Vue.js中提供了v-html这个指令来解决这个问题，或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象，就可以正常解析了。 代码改动如下：总结 以上就是这篇文章的全部内容了，希望本文的内容对大家都 学习或...
Vue.js是什么 Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 如果你是有经验的前端开发者，...
原因： 在使用vuejs、angularjs开发时，经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7，8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。解...
本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 本文是在官方文档的基础上，更加细致的说明，代码更多更全。 简单来说，更适合新手阅读 ①简单来说： 就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。 ②动态切换： 在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；改变挂载的组件，只...