Vue.js的实例

这篇文章整理了Vue.js中的一些常用实例,主要有下面这些: Vue.js导航菜单栏实例 Vue.js编辑文本实例 Vue.js订单列表实例 Vue.js的搜索页面实例 Vue.js切换不同的布局的实例 Vue.js导航菜单栏实例 [html]<!DOCTYPE html> <html> < ...阅读更多

Posted on

Vue.js的路由

Vue.js中,Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成,使用Vue.js构建单页应用程序变得轻而易举。从 vue-router 文档中可以看出:Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 路由可以实现多视图的单页Web应用(single pag ...阅读更多

Posted on

Vue.js的AJAX

Vue.js中,Vue 要实现异步加载需要使用到 vue-resource 库, 如下: [html]<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script&g ...阅读更多

Posted on

Vue.js的自定义指令

Vue.js中,除了核心的指令,v-model和v-show,还允许自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。这篇文章主要从下面几个方面来讲Vue.js的自定义指令: Vue.js自定义指令的例子 v- ...阅读更多

Posted on

Vue.js的混入mixins

Vue.js的混入(mixins)表示的是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入可以混入任何组件的选项,包括对象。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。这篇文章主要通过下面几个方面来了解Vue.js的混入: Vue.js的基本混入 Vue.js的混入:选项合并 Vue.js ...阅读更多

Posted on

Vue.js的过渡 & 动画 transition

Vue.js的提供了在元素从 DOM 中插入或移除时,多种不同方式的应用过渡动画效果。主要有下面这几个方面,也是本文探讨的几个方面: Vue.js的过渡的类名 Vue.js的过渡:CSS过度 Vue.js的过渡:CSS动画 Vue.js的过渡:自定义过度类名 Vue.js的过渡:同时使用过渡和动画 Vue.js的过度: ...阅读更多

Posted on

Vue.js 的组件基础 component

Vue.js的组件 component 是Vue.js最要的功能,主要用来扩展 HTML 元素,封装可重用的代码。由于组件这一块比较大,所以这篇文章最主要讲的是Vue.js 的组件基础,主要通过以下内容来认识Vue.js 的组件基础: Vue.js 组件component的基本示例 Vue.js 组件component ...阅读更多

Posted on

Vue.js 的表单输入绑定 v-model

Vue.js的表单输入绑定,用的是 v-model指令。v-model指令可以创建双向数据绑定。 v-model指令会根据控件类型自动选取正确的方法来更新元素。我们知道html的表单输入主要有一下类型,那么,我们就来看看v-model怎么实现的: 文本 <input > 多行文本 <textarea& ...阅读更多

Posted on

Vue.js 的事件处理 v-on

Vue.js的事件处理中, v-on 是关键点。v-on是对事件进行监听,从而执行对应的Javascript代码,使用v-on有下面的好处: 看一下HTML 模板便能轻松找出在 JavaScript 代码里对应的方法,事件处理都是用v-on标记出来。 无须在 JavaScript 里手动绑定事件,你的 ViewMode ...阅读更多

Posted on

Vue.js 的列表渲染 v-for

Vue.js的列表渲染我们一般用的是v-for,那么,v-for一般是用来做什么列表渲染呢?v-for可用于: v-for用于数组 v-for用于对象 v-for用于模板template v-for用于组件 Vue.js 的列表渲染 v-for用于数组 v-for 可以绑定数据到数组来渲染一个列表: [html] &l ...阅读更多

Posted on

Vue.js 的条件渲染v-if和v-show

Vue.js的条件渲染有: v-if (v-if, v-else, v-else-if) v-show 那么,这两者究竟有什么区别呢?我们可以先来看一下两个各自的用法。 Vue.js 的条件渲染v-if v-if其实是“真正”的条件渲染,它主要有三个命令:v-if, v-else, v-else-if。下面我们就每个命 ...阅读更多

Posted on

Vue.js 样式绑定:Class 与 Style 绑定

Vue.js 样式绑定主要有: Vue.js Class属性样式绑定 Vue.js Style内联样式绑定 因为Class和Style它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过字符串的计算容易出错,因此,VUE除了处理字符串之外,还增加了对象和数组的处理。 Clas ...阅读更多

Posted on