Vue基础入门

一、了解Vue的核心设计思想

1.1 初识Vue

1.1.1 前端技术的发展

• HTML：HTML主要用来编写网页的结构，例如表示超链接。
• CSS：CSS样式包括颜色、大小、字体等，布局合理的页面效果。
• JavaScript：JavaScript的功能主要包括实现页面逻辑、行为、动作等，用来动态操作元素的属性，主要是为页面提供交互效果，实现更好的用户体验。
• jQuery：通过对JavaScript代码的封装，使得DOM、事件处理、动画效果、Ajax交互等功能的实现变得更加简洁、方便，有效地提高了项目开发效率。
• Vue：Vue通过虚拟DOM技术来减少对DOM的直接操作；通过尽可能简单的API来实现响应的数据绑定，支持单向和双向数据绑定。

1.1.2 Vue的基本概念

• Vue（读音/Vjuː/，类似于View）是一套用于构建用户界面的渐进式框架。
• 与其他大型框架相比，Vue被设计为可以自底向上逐层应用。
• Vue可以开发一个全新项目，也可以将Vue引入到一个现有的项目中。

1.1.3 Vue的基本工作原理图

Model-View-ViewModel

1.1.4 Vue的优势

• 轻量级：Vue简单、直接，所以Vue使用起来更加友好；
• 数据绑定：数据驱动视图，视图也可以驱动数据；
• 指令：指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为；
• 插件：插件用于对Vue框架功能进行扩展。

1.1.5 Vue、Angular和React的区别

• React和Vue的中心思想是一切都是组件，组件之间可以实现嵌套；
• React依赖虚拟DOM，而Vue使用的是DOM模板；
• Vue在模板中提供了指令，过滤器等，可以非常方便和快捷的操作DOM；
• React采用了特殊的JSX语法，Vue中也推崇编写以*.vue后缀命名的文件格式。

二、开发环境

2.1 Visual Studio Code编辑器

2.1.1 下载地址

Visual Studio Code下载地址：https://code.visualstudio.com/Download

2.1.2 Visual Studio Code编辑器特点

• 轻巧极速，占用系统资源较少
• 具备语法高亮显示、智能代码补全、自定
• 快捷键和代码匹配等功能
• 跨平台
• 主题界面的设计比较人性化
• 提供了丰富的插件

2.2 Vue的下载和引入

Vue官网地址：https://cn.vuejs.org/。

Vue官网版本展示：

Vue核心文件vue.js引入：

/*!
 1. Vue.js v2.6.10
 2. (c) 2014-2019 Evan You
 3. Released under the MIT License.
 */
<script src="vue.js"></script>

2.3 git-bash命令行工具

git-bash命令行工具官网地址：