Vue.js 介绍

Vue.js (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同，Vue被设计为可以自底向上逐层应用。

什么是Vue.js？

Vue.js 是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。

Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

Vue.js 特点

渐进式框架 - 可以根据项目需求逐步采用
响应式数据绑定 - 数据变化自动更新视图
组件化开发 - 将UI拆分为独立可复用的组件
虚拟DOM - 高效的DOM更新机制

声明式渲染 - 使用模板语法声明式地将数据渲染到DOM
轻量高效 - 核心库大小仅约30KB
易于学习 - 简洁的API和良好的文档
强大的生态系统 - Vue Router, Vuex, Vue CLI等

第一个Vue.js示例

下面是一个简单的Vue.js示例，展示数据绑定和事件处理：

HTML + Vue.js 代码示例


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue应用</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <p>计数器: {{ counter }}</p>
        <button @click="increment">点击增加</button>
        <button @click="decrement">点击减少</button>
        <br><br>
        <input v-model="message" placeholder="编辑消息...">
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js!',
                counter: 0
            },
            methods: {
                increment() {
                    this.counter++;
                },
                decrement() {
                    this.counter--;
                }
            }
        });
    </script>
</body>
</html>

Vue.js 与其他框架对比

特性	Vue.js	React	Angular
学习曲线	平缓	中等	陡峭
大小	~30KB	~100KB	~500KB
灵活性	渐进式框架，非常灵活	非常灵活，但需要选择额外库	完整解决方案，灵活性较低
模板语法	基于HTML的模板	JSX (JavaScript XML)	基于HTML的模板
数据绑定	双向数据绑定	单向数据流	双向数据绑定

Vue.js 核心概念

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：


<div id="app">
  {{ message }}
</div>

响应式系统

当数据发生变化时，视图会自动更新：


new Vue({
  data: {
    message: 'Hello Vue!'
  }
})
// 修改message会自动更新视图
app.message = 'Hello World!'

组件系统

Vue的组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用：


Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

如何开始使用 Vue.js

学习路径建议

入门 - Vue.js 核心概念 (本教程)
基础 - 模板语法、计算属性、侦听器
组件 - 组件系统、Props、自定义事件
高级 - Vue Router、Vuex 状态管理
工具 - Vue CLI、Vue DevTools
实战 - 构建完整的单页应用

访问 Vue.js 官方文档

安装 Vue.js

有多种方式可以开始使用 Vue.js：


<!-- 开发环境版本，包含有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>


# 最新稳定版
npm install vue

# 使用 Vue CLI 创建项目
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统：


# 安装 Vue CLI
npm install -g @vue/cli
# 或
yarn global add @vue/cli

# 创建新项目
vue create hello-world

# 启动开发服务器
cd hello-world
npm run serve

总结

Vue.js 是一个功能强大但易于学习的前端框架，适合从小型项目到大型企业级应用的各种场景。其渐进式的特点允许开发者根据项目需求逐步采用其功能，而不需要一开始就学习所有概念。

Vue 的友好 API、详细文档和活跃的社区使其成为当前最受欢迎的 JavaScript 框架之一。

已是第一章下一章: 安装与环境搭建

Vue教程