Vue.js
GarfieldEr007
这个作者很懒,什么都没留下…
展开
-
Vue.js 安装
安装兼容性Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。更新日志最新稳定版本:2.5.17每个版本的更新日志见 GitHub。Vue Devtools在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审...转载 2018-11-24 10:47:48 · 739 阅读 · 0 评论 -
Vue.js 过滤器
过滤器Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示: <!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` ...转载 2018-11-23 12:42:16 · 647 阅读 · 0 评论 -
Vue.js 插件
插件插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种: 添加全局方法或者属性,如: vue-custom-element 添加全局资源:指令/过滤器/过渡等,如 vue-touch 通过全局 mixin 方法添加一些组件选项,如: vue-router 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。 ...转载 2018-11-23 12:41:22 · 522 阅读 · 0 评论 -
Vue.js 组件基础
基本示例这里有一个 Vue 组件的示例: // 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++"&g...转载 2018-11-19 11:27:10 · 617 阅读 · 1 评论 -
Vue.js 表单输入绑定
基础用法你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、che...转载 2018-11-19 11:27:04 · 651 阅读 · 1 评论 -
Vue.js 事件处理
监听事件可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。示例: <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{...转载 2018-11-19 11:26:56 · 643 阅读 · 1 评论 -
Vue.js 列表渲染
用 v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。 <ul id="example-1"> <li v-for="item in items"> {{ item.mess...转载 2018-11-19 11:26:50 · 581 阅读 · 1 评论 -
Vue.js 条件渲染
v-if在字符串模板中,比如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 -->{{#if ok}} <h1>Yes</h1>{{/if}} 在 Vue 中,我们使用 v-if 指令实现同样的功能: <h1 v-if="ok">Yes</h1>...转载 2018-11-19 11:26:41 · 564 阅读 · 0 评论 -
Vue.js Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。绑定 HTML Class对象语法我们可以传给 v-b...转载 2018-11-19 11:26:35 · 555 阅读 · 0 评论 -
Vue.js 计算属性和侦听器
计算属性和侦听器计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: <div id="example"> {{ message.split('').reverse().join('') }}</div> 在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意...转载 2018-11-19 11:26:23 · 802 阅读 · 0 评论 -
Vue.js 模板语法
模板语法Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。如果你熟悉虚拟...转载 2018-11-18 11:07:29 · 655 阅读 · 0 评论 -
Vue.js 生产环境部署
生产环境部署开启生产环境模式开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。不使用构建工具如果用 Vue 完整独立版本,即直接用 <script> 元素引入 Vue 而不提前进行构建,请记得在生产环境下使用压缩后的版本 (v...转载 2018-11-23 12:43:08 · 944 阅读 · 0 评论 -
Vue.js 单文件组件
单文件组件介绍在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得...转载 2018-11-23 12:43:59 · 815 阅读 · 0 评论 -
Vue.js 对比其他框架
对比其他框架这个页面无疑是最难编写的,但我们认为它也是非常重要的。或许你曾遇到了一些问题并且已经用其他的框架解决了。你来这里的目的是看看 Vue 是否有更好的解决方案。这也是我们在此想要回答的。客观来说,作为核心团队成员,显然我们会更偏爱 Vue,认为对于某些问题来讲用 Vue 解决会更好。如果没有这点信念,我们也就不会整天为此忙活了。但是在此,我们想尽可能地公平和准确地来描述一切。其他的...转载 2018-11-24 10:47:41 · 805 阅读 · 0 评论 -
从 Vuex 0.6.x 迁移到 1.0
从 Vuex 0.6.x 迁移到 1.0Vuex 2.0 已经发布了,但是这份指南只涵盖迁移到 1.0?这是打错了吗?此外,似乎 Vuex 1.0 和 2.0 也同时发布。这是怎么回事?我该用哪一个并且哪一个兼容 Vue 2.0呢?Vuex 1.0 和 2.0 如下:都完全支持 Vue 1.0 和 2.0 将在可预见的未来保留支持然而它们的目标用户稍微有所不同。Vuex 2...转载 2018-11-24 10:47:34 · 590 阅读 · 0 评论 -
Vue.js 从 Vue Router 0.7.x 迁移
从 Vue Router 0.7.x 迁移只有 Vue Router 2 是与 Vue 2 相互兼容的,所以如果你更新了 Vue ,你也需要更新 Vue Router 。这也是我们在主文档中将迁移路径的详情添加进来的原因。有关使用 Vue Router 2 的完整教程,请参阅 Vue Router 文档。Router 初始化router.start 替换不再会有一个特殊的 A...转载 2018-11-24 10:47:29 · 697 阅读 · 0 评论 -
Vue.js 从 Vue 1.x 迁移
从 Vue 1.x 迁移FAQ哇,非常长的一页!是否意味着 Vue 2.0 已经完全不同了呢,是否需要从头学起呢,Vue 1.0 的项目是不是没法迁移了?非常开心地告诉你,并不是!几乎 90% 的 API 和核心概念都没有变。因为本节包含了很多详尽的阐述以及许多迁移的例子,所以显得有点长。不用担心,你不必从头到尾把本节读一遍!我该从哪里开始项目迁移呢? 首先,在当前项...转载 2018-11-24 10:47:22 · 792 阅读 · 0 评论 -
Vue.js 深入响应式原理
深入响应式原理现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以回避一些常见的问题。在这个章节,我们将进入一些 Vue 响应式系统的底层的细节。如何追踪变化当你把一个普通的 JavaScript 对象传给 Vue ...转载 2018-11-23 12:49:47 · 629 阅读 · 0 评论 -
Vue.js 服务端渲染
服务端渲染SSR 完全指南在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入,适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读。请移步 ssr.vuejs.org。Nuxt.js从头搭建一个服务端渲染的应用是相当复杂的。幸运的是,我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 ...转载 2018-11-23 12:49:02 · 757 阅读 · 0 评论 -
Vue.js 状态管理
状态管理类 Flux 状态管理的官方实现由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools,无需配置即可进行时光旅行调试。React 的开发者请参考以下信息如果你是来自 React 的开发者,你可能会对 Vuex 和 Redux ...转载 2018-11-23 12:47:33 · 598 阅读 · 0 评论 -
Vue.js 路由
官方路由对于大多数单页面应用,都推荐使用官方支持的 vue-router 库。更多细节可以看 vue-router 文档。从零开始简单的路由如果只需要非常简单的路由而不需要引入整个路由库,可以动态渲染一个页面级的组件像这样: const NotFound = { template: '<p>Page not found</p>' }const Ho...转载 2018-11-23 12:46:33 · 587 阅读 · 0 评论 -
Vue.js TypeScript 支持
TypeScript 支持在 Vue 2.5.0 中,我们大大改进了类型声明以更好地使用默认的基于对象的 API。同时此版本也引入了一些其它变化,需要开发者作出相应的升级。阅读博客文章了解更多详情。发布为 NPM 包的官方声明文件静态类型系统能帮助你有效防止许多潜在的运行时错误,而且随着你的应用日渐丰满会更加显著。这就是为什么 Vue 不仅仅为 Vue core 提供了针对 TypeS...转载 2018-11-23 12:45:50 · 1360 阅读 · 0 评论 -
Vue.js 单元测试
单元测试配置和工具任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用 Karma 进行自动化测试。它有很多社区版的插件,包括对 Webpack 和 Browserify 的支持。更多详细的安装步骤,请参考各项目的安装文档,通过这些 Karma 配置的例子可以快速帮助你上手 (Webpack 配置,Browserify 配置)。简单的断言你不必为了可测性在...转载 2018-11-23 12:44:56 · 560 阅读 · 0 评论 -
Vue 实例
Vue 实例创建一个 Vue 实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项}) 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。当创建一个 Vue 实例时...转载 2018-11-18 11:06:19 · 854 阅读 · 0 评论 -
Vue.js 介绍
介绍Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。如果你想在深入学习 Vue 之前对它有更...转载 2018-11-18 11:05:25 · 691 阅读 · 0 评论 -
vue.js 安装
安装兼容性Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。更新日志最新稳定版本:2.5.17每个版本的更新日志见 GitHub。Vue Devtools在使用 Vue 时,我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审...转载 2018-11-18 11:04:18 · 649 阅读 · 0 评论 -
Vue.js 动态组件 & 异步组件
在动态组件上使用 keep-alive我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面:...转载 2018-11-20 21:49:15 · 748 阅读 · 0 评论 -
Vue.js 插槽
插槽内容Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口。它允许你像这样合成组件: <navigation-link url="/profile"> Your Profile</navigation-link> 然后你在 &...转载 2018-11-20 21:48:33 · 688 阅读 · 0 评论 -
Vue.js 自定义事件
事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件: this.$emit('myEvent') 则监听这个名字的 kebab-case 版本是不会有任何效果的: <my-component v-on:my-event="doSo...转载 2018-11-20 21:47:58 · 819 阅读 · 1 评论 -
Vue.js Prop
Prop 的大小写 (camelCase vs kebab-case)HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 Ja...转载 2018-11-20 21:47:22 · 566 阅读 · 0 评论 -
Vue.js 组件注册
组件名在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... */ }) 该组件名就是 Vue.component 的第一个参数。你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的...转载 2018-11-20 21:46:26 · 562 阅读 · 0 评论 -
新手向:Vue 2.0 的建议学习顺序
注:2.0 已经有中文文档 。如果对自己英文有信心,也可以直接阅读英文文档。此指南仅供参考,请根据自身实际情况灵活调整。欢迎转载,请注明出处。起步1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 <script>,把教程里的例子模仿一遍,理解用法。不推荐上...转载 2018-11-05 21:45:21 · 593 阅读 · 0 评论 -
Vue.js新手入门指南
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的结业项目。在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以PHP+模版引擎为主的开发,从一个从未接触过除HTML+CSS+JavaScript+JQuery以...转载 2018-11-05 21:45:36 · 2354 阅读 · 0 评论 -
1.学习使用vue.js(适合初学者)
如果你不愿意多花时间去自学vue.js 官网的API,那么你可以在跟着下面的例子学习最实用,最容易上手的案例。首先要你必须要去VUE官网上下载vue.js,然后才能继续下面的步骤。 如果你不想下载的话,在有网络环境的情况下,也可以选择绝对路径的vue.js。如果你想学习如何搭建webpack脚手架,那么请直接滑动到安装vue-cli<script src="https://cd...转载 2018-11-05 21:45:55 · 822 阅读 · 0 评论 -
Vue -渐进式JavaScript框架
介绍vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别?Library库,本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者代表:jQuery jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作Framework框...转载 2018-11-05 21:46:12 · 794 阅读 · 0 评论 -
Vue.js——十分钟入门Vuex
一. 什么是Vuex?VuexVuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.Vuex核心上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. 可能你现在看这张图有点不明白, 等...转载 2018-11-05 21:46:45 · 895 阅读 · 0 评论 -
Vue.js 组件 处理边界情况
这里记录的都是和处理边界情况有关的功能,即一些需要对 Vue 的规则做一些小调整的特殊情况。不过注意这些功能都是有劣势或危险的场景的。我们会在每个案例中注明,所以当你使用每个功能的时候请稍加留意。访问元素 & 组件在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过也确实在一些情况下做这些事情是合适的。访问根实例在每个 new Vue 实例的子...转载 2018-11-20 21:51:33 · 675 阅读 · 0 评论 -
Vue.js 进入/离开 & 列表过渡
概述Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js在这里,我们只会讲到进入、离开和列表的过渡...转载 2018-11-20 21:52:30 · 962 阅读 · 0 评论 -
Vue.js教程视频
Vue.js教程视频链接https://www.bilibili.com/video/av32611687/?p=1https://www.bilibili.com/video/av32611687/?p=2https://www.bilibili.com/video/av32611687/?p=3https://www.bilibili.com/video/av32611687/?p=...原创 2018-11-18 10:14:27 · 731 阅读 · 0 评论 -
在vue中let var 和const 区别
let和const 使用方法: (1).有没有感觉到在 javascript 使用var会发生变量提升,即脚本开始运行时, 变量已经存在了,但是没有值,所以会输出undefined。 而let不会发生变量提升,这表示在声明它之前,变量是不存在的,这时如果用到它, 就会抛出一个错误。 (2). var 是函数级作用域,let是块级作用域...转载 2018-11-17 19:39:54 · 13193 阅读 · 0 评论