随笔分类 - Vue.js
版本1.0.21
摘要：{ "editor.fontSize": 18, "files.associations":{ "*.vue": "html" }, "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe" }
阅读全文
摘要：转载：https://www.jianshu.com/p/c7df292915e7 为了便于 Vue 项目的管理， Vue 团队官方开发了 vue-cli 工具。 本文将带您使用 vue-cli 快速创建一个 Vue 项目。 本地安装 vue-cli 使用 npm 全局安装 vue-cli ： 创建
阅读全文
摘要：vue入门|ElementUI使用指南 1.开发前务必熟悉的文档： 2.构建项目框架 备注：vue init 再3.x以后建议用vue create，请参考https://cli.vuejs.org/zh/guide/creating-a-project.html#%E6%8B%89%E5%8F%9
阅读全文
摘要：原文地址：http://www.cnblogs.com/taylorchen/p/6083099.html 介绍： 这是一个用vuejs2.0和element搭建的后台管理界面。 相关技术： vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。 elemen
阅读全文
摘要：有些时候，不得不想添加、修改数组和对象的值，但是直接添加、修改后getter、setter又失去了。 由于 JavaScript 的限制， Vue 不能检测以下变动的数组： 为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果， 同时也将
阅读全文
摘要：删除警告 为了减少文件大小，Vue 精简独立版本已经删除了所有警告，但是当你使用 Webpack 或 Browserify 等工具时，你需要一些额外的配置实现这点。 Webpack 使用 Webpack 的 DefinePlugin 来指定生产环境，以便在压缩时可以让 UglifyJS 自动删除代码
阅读全文
摘要：介绍 在很多Vue项目中，我们使用 Vue.component 来定义全局组件，紧接着用new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。 这种方案在只是使用 JavaScript 增强某个视图的中小型项目中表现得很好。然而在更复杂的项目中，或者当你的前端完全
阅读全文
摘要：开发插件 插件通常会为Vue添加全局功能。插件的范围没有限制——一般有下面几种： 添加全局方法或者属性，如: vue-element 添加全局资源：指令/过滤器/过渡等，如 vue-touch 通过全局 mixin方法添加一些组件选项，如: vuex 添加 Vue 实例方法，通过把它们添加到 Vue
阅读全文
摘要：基础 混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。 例子： 选项合并 当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合。比如，同名钩子函数将混合为一个数组，因此都将被调用。另外，混合对象的
阅读全文
摘要：简介 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个 input 元素，像这样：
阅读全文
摘要：过渡状态 Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如： 数字和运算 颜色的显示 SVG 节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三
阅读全文
摘要：大部分的基础内容我们已经讲到了，现在讲点底层内容。Vue 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。这会让状态管理变得非常简单且直观，不过理解它的原理以避免一些常见的陷阱也是很重要的。在本节中，我们将开始深挖 Vue 响应系统的底层细节。 如何追踪变化 把一个普通 Jav
阅读全文
摘要：什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 使用组件 注册 之前说过，
阅读全文
摘要：基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。 v-model 并不关心表单控件初始化所生成的值。因为它会选择
阅读全文
摘要：监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。 示例： 结果： 增加 1 这个按钮被点击了 0 次。 这个按钮被点击了 0 次。 方法事件处理器 许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-
阅读全文
摘要：v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 基本用法 结果： Foo Bar 在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v
阅读全文
摘要：v-if 在字符串模板中，如 Handlebars ，我们得像这样写一个条件块： 在 Vue.js ，我们使用 v-if 指令实现同样的功能： 也可以用 v-else 添加一个 “else” 块： template v-if 因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多
阅读全文
摘要：Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强
阅读全文
摘要：计算属性 在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如： 在这种情况下，模板不再简单和清晰。在实现反向显示 message 之前，你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。 这就是为什么任何复
阅读全文
摘要：Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改
阅读全文
