起风了

“路海长 青夜旷 越过群山追斜阳”

Vue.js 事件处理器

Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on < div id = " app " > < button v-on:click = " counter += 1 " > 增加 1 </ button > < p > 这个按钮被点击了 {{ counter }} 次。 </ p > </ div > < script > new Vue({ el: '#app', data: { ...

Vue.js 表单

Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用。 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: < div id = " app " > < p > input...

Vue.js 组件

Vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树: 注册一个全局组件语法格式如下: Vue.component(tagName, options) tagName 为组件...

Vue.js 组件 – 自定义事件

Vue.js 组件 - 自定义事件 父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件! 我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 另外,父组件可以在使用...

Vue.js 自定义指令

Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例 < div id = " app " > < p > 页面载入时,input 元素自动获取焦点: </ p > < input v-focus...

Vue.js 路由

Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router文档。 安装 1、直接下载 / CDN https://unpkg.com/v...

Vue.js 过渡 & 动画

Vue.js 过渡 & 动画 本章节我们主要讨论 Vue.js 的过渡效果与动画效果。 过渡 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。 语法格式 <transition name = "nameoftransition"> <div></di...

Vue.js 混入

Vue.js 混入 混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。 来看一个简单的实例: 实例 var vm = new Vue ( { el : ' #databinding ' , data : { } , methods : { } , } ) ; /...

Vue.js Ajax(axios)

Vue.js Ajax(axios) Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Github开源地址: https://github.com/axios/axios 安装方法 使用 cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 或 <...

Vue.js Ajax(vue-resource)

Vue.js Ajax(vue-resource) Vue 要实现异步加载需要使用到 vue-resource 库。 Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> Get 请求 以下是一个简单的 Get 请求实例,请求地址是一个简单的 t...