Learning Path

Vue 2 tutorials

Browse tutorials and chapters for Vue 2.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

TAXONOMYFrontendFetched/Vue 2

Vue.js 教程

Vue.js 教程 Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。 Vue 只关注视图层，采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试，Vue3 请参阅 Vue3 教程。 Vue 2.0 在 2023 年 12 月 31 日停止更新。阅读本教程前，您需..

TUTORIALFrontendFetched/Vue 2

Vue.js 样式绑定

Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 class 属性绑定我们可以为 v-bind:class 设置一个对象，从而动态的切换 class: 实例 1 实例中将 i..

TUTORIALFrontendFetched/Vue 2

Vue.js 组件 - 自定义事件

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

TUTORIALFrontendFetched/Vue 2

Vue.js 组件

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

TUTORIALFrontendFetched/Vue 2

Vue.js 计算属性

Vue.js 计算属性计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：实例 1 [mycode3 type='html'] {{ message.split('').reverse().join('') }} [/mycode3] 尝试一下 » 实例 1 中模板变的很复杂起来，也不容易看懂理..

TUTORIALFrontendFetched/Vue 2

Vue.js 自定义指令

Vue.js 自定义指令除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：实例 [mycode3 type='html'] 页面载入时，input 元素自动获取焦点： // 注册一个全局自定义指令 v-focus Vue.directive('focu..

TUTORIALFrontendFetched/Vue 2

Vue.js 目录结构

Vue.js 目录结构上一章节中我们使用了 npm 安装项目，我们在 IDE（Eclipse、Atom等）中打开该目录，结构如下所示：目录解析目录/文件说明 build 项目构建(webpack)相关代码 config 配置目录，包括端口号等。我们初学可以使用默认的。 node_modules npm 加载的项目依赖模块 src 这里是我们要开发的目录，基本上..

TUTORIALFrontendFetched/Vue 2

Vue.js 事件处理器

Vue.js 事件处理器事件监听可以使用 v-on 指令： v-on [mycode3 type='html'] 增加 1 这个按钮被点击了 {{ counter }} 次。 new Vue({ el: '#app', data: { counter: 0 } }) [/mycode3] 尝试一下 » 通常情况下，我们需要使用一个方法来调用 J..

TUTORIALFrontendFetched/Vue 2

Vue.js 实例

Vue.js 实例本章节为大家介绍几个 Vue.js 实例，通过实例练习来巩固学到的知识点。导航菜单实例导航菜单创建一个简单的导航菜单： [mycode3 type='html'] Home Projects Services Contact 您选择了 {{active}} 菜单 // 创建一个新的 Vue 实例 var demo = ne..

TUTORIALFrontendFetched/Vue 2

Vue.js 表单

Vue.js 表单这节我们为大家介绍 Vue.js 表单上的应用。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。输入框实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定： [mycode3 type='html'] input 元素：消息是: {{ message..

TUTORIALFrontendFetched/Vue 2

Vue.js 条件语句

Vue.js 条件语句条件判断 v-if 条件判断使用 v-if 指令： v-if 指令在元素和 template 中使用 v-if 指令： [mycode3 type='html'] 现在你看到我了菜鸟教程学的不仅是技术，更是梦想！哈哈哈，打字辛苦啊！！！ new Vue({ el: '#app', ..

TUTORIALFrontendFetched/Vue 2

Vue.js 安装

Vue.js 安装 1、独立版本我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。下载 Vue.js 2、使用 CDN 方法以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。 cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.j..

TUTORIALFrontendFetched/Vue 2

Vue.js 循环语句

Vue.js 循环语句循环使用 v-for 指令。 v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表： v-for 指令 [mycode3 type='html'] {{ site.name }} new Vue({ el: ..

TUTORIALFrontendFetched/Vue 2

Vue.js 混入

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

TUTORIALFrontendFetched/Vue 2

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/vue-route..

TUTORIALFrontendFetched/Vue 2

Vue.js 起步

Vue.js 起步每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下： var vm = new Vue({ // 选项 }) 接下来让我们通过实例来看下 Vue 构造器中需要哪些内容：实例 [mycode3 type='html'] site : {{site}} url : {{url}} {{details()}} var vm = new Vue({ el..

TUTORIALFrontendFetched/Vue 2

Vue.js 模板语法

Vue.js 模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。插值文本数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：文本插值 ..

TUTORIALFrontendFetched/Vue 2

Vue.js 过渡 & 动画

Vue.js 过渡 & 动画本章节我们主要讨论 Vue.js 的过渡效果与动画效果。过渡 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。语法格式我们可以通过以下实例来理解 Vue 的过渡是如何实现的：实例 [mycode3 type='html'] 点我动..

TUTORIALFrontendFetched/Vue 2

Vue.js 教程

TUTORIALFrontendFetched/Vue 2

Vue.js 监听属性

Vue.js 监听属性本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。以下实例通过使用 watch 实现计数器：实例 [mycode3 type='html'] 计数器: {{ counter }} 点我 var vm = new Vue({ el: '#app', data: { counter: 1 } ..

TUTORIALFrontendFetched/Vue 2

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: 或使用 npm: $ npm install axios 使用 bower: $ bow..

TUTORIALFrontendFetched/Vue 2

Vue.js Ajax(vue-resource)

Vue.js Ajax(vue-resource) Vue 要实现异步加载需要使用到 vue-resource 库。 Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 Get 请求以下是一个简单的 Get 请求实例，请求地址是一个简单的 txt 文本：实例 [mycode3 type='js'] window.onload = function(){ var vm = new..

TUTORIALFrontendFetched/Vue 2

Vue.js 响应接口

Vue.js 响应接口 Vue 可以添加数据动态响应接口。例如以下实例，我们通过使用 $watch 属性来实现数据的监听，$watch 必须添加在 Vue 实例之外才能实现正确的响应。实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20 。实例 [mycode3 type='html'] 计数器: {{ counter }} 点我 var vm = ..