接上篇，在本篇中，我们将要实现如下，功能，编辑和查询，我们当前的todolist程序，和线上其它的demo程序不同，我们会对其进行增删改查的基本操作，之后进行进一步的完善，按照常规的系统使用经验，一般我们新增和编辑都是在模态框中处理，这里我们不会去构建复杂的模态框，只用一个简单的div层来代替，后期接下来的文章中我们会重复造轮子，构建我们自己的轻量级框架（UI库）。 首先，我们对我们的页面结构进行一下简单的调整，加...
本文介绍了Vue.js 常用模板语法，分享给大家，具体如下： 一、文本渲染 Vue支持动态渲染文本，即在修改属性的同时，实时渲染文本内容。同时为了提高渲染效率，也支持只渲染一次，即第一次渲染出文本后，文本内容不再跟随属性值的变化而变化。 实时渲染<div class="row"><h2>文本 - 实时渲染</h2><input type="text" v-model="msg" class="col-md-2" /><span class="col-md-">{{ msg }}</span></div> v-model 指令将 input 标签的值...
本篇将简单介绍常用的修饰符。 在上一篇中，介绍了 v-model 和 v-on 简单用法。除了常规用法，这些指令也支持特殊方式绑定方法，以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。 一、v-model的修饰符 v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 <input> 和 <textarea> 上，默认通过监听元素的 input 事件来更新绑定的属性值。 为了能明显的看到绑定属性值的变化，需要在Chrome浏览器中安装...
这两天学习了Vue.js 感觉函数化组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记介绍 之前创建的锚点标题组件是比较简单，没有管理或者监听任何传递给他的状态，也没有生命周期方法。它只是一个接收参数的函数。在这个例子中，我们标记组件为 functional， 这意味它是无状态（没有 data），无实例（没有 this 上下文）。一个 函数化组件 就像这样： Vue.component(my-component, {functional: true,// 为了弥补缺少...
概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js单元素/组件的过度 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡 条件渲染 （使用 v-if）条件展...
介绍 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。本文是基于上一篇文章（Vue学习笔记进阶篇——vue-cli安装及介绍 ）vue-cli脚手架工具的。 安装 在终端通过cd命令进入到上...
本文介绍了vue 多元素及多组件过渡，这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 多元素的过渡 对于原生标签可以使用 v-if/v-else.但是有一点需要注意： 当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。示例： <transition><button v...
介绍 Vue-cli是Vue的脚手架工具 主要作用：目录结构、本地调试、代码部署、热加载、单元测试 地址：https://github.com/vuejs/vue-cli 安装 全局安装vue-cli npm install -g vue-cli当然了，要想使用npm工具，就必须安装Node.js，node.js的安装方法这里就不做介绍了。安装完成后，在终端输入以下命令, 可以查看vue的版本：vue -V输入以下命令，可以查看官方提供的模板： vue list我们可以看到，vue官方提供了6个模板，我们这边主要...
除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。官方建议directive是对纯 DOM 元素进行底层操作使用，一般情况下还是建议使用组件的复用。 directive的意义 自定义指令是用来操作DOM的。 尽管数据驱动是Vue的核心之一，但是在实际情况下，并不是所有的情况都可...
本文将介绍Vue中的列表过渡，动态过渡， 以及可复用过渡是实现。 列表过渡 目前为止，关于过渡我们已经讲到： 单个节点同一时间渲染多个节点中的一个那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用 <transition-group>组件。在我们深入例子之前，先了解关于这个组件的几个特点： 不同于 <transition>， 它会以一个真实元素呈现：默认为一个<span>。你也可以通过 tag 特性更换为其他元素。内部元素 总是需要 提供唯...
介绍 为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 实现了一个内容分发 API，使用特殊的 slot 元素作为原始内容的插槽。 编译作用域 在深入内容分发 API 之前，我们先明确内容在哪个作用域里编译。假定模板为： <child-component>{{ message }} </child-component>message 应该绑定到父组件的数据，还是绑定到子组件的数...
这两天学习了Vue.js 感觉渡系统这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如： 数字和运算颜色的显示SVG 节点的位置元素的大小和其他的属性所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。 状态动画和w...
vue.js 源代码学习笔记 core scedule.js，供大家参考，具体内容如下/* @flow */import type Watcher from ./watcher import config from ../config import { callHook } from ../instance/lifecycleimport {warn,nextTick,devtools } from ../util/indexconst queue: Array<Watcher> = [] let has: { [key: number]: ?true } = {} let circular: { [key: number]: number } = {} let waiting = false let flushing = false let ind...
对于vue.js的动态数据绑定，经过反复地看源码和博客讲解，总算能够理解它的实现了，心累~ 分享一下学习成果，同时也算是做个记录。完整代码GitHub地址：https://github.com/hanrenguang/Dynamic-data-binding。也可以到仓库的 README 阅读本文，容我厚脸皮地求 star，求 follow。 整体思路 不知道有没有同学和我一样，看着vue的源码却不知从何开始，真叫人头大。硬生生地看了observer, watcher, compile这几部分的源码，只觉得一脸...
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板，不在支持片段代码 VUE1.0是: <template><h3>我是组件</h3><strong>我是加粗标签</strong> </template>VUE2.0:必须有根元素,包裹住所有的代码 <template id="aaa"><div><h3>我是组件</h3><strong>我是加粗标签</strong></div> </template>二.关于组件定义 VUE1.0定义组件的方式有: Vue.extend 这种方式，在2.0里面有，但是有一些改动 Vue.componen...