Vue基础入门

最新推荐文章于 2022-10-30 23:55:57 发布

Online布鲁

最新推荐文章于 2022-10-30 23:55:57 发布

阅读量543

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端框架前端

本文链接：https://blog.csdn.net/qq_59463562/article/details/125056449

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初识Vue

Vue.js(以下简称Vue)是前端的流行框架之一，与Angular和React相比，Vue框架在实现上更容易理解，上手更快。使用Vue开发不仅提高了开发效率，也改善了开发体验，因此，熟练掌握Vue框架已成为前端开发者的必备技能。本篇文章会介绍Vue框架的基本概念。

1.1认识Vue

1.1.1 什么是Vue

Vue是一套用于构建用户界面的渐进式框架，被设计为可以自底向上逐层应用。其他大型框架往往一开始就对项目的技术方案进行强制性要求，而Vue更加灵活，开发者既可以选择使用Vue来开发一个全新的项目，也可以将Vue引入到一个现有的项目中。Vue的数据驱动是通过MVVM（Model-View-ViewModel）模式来实现的，MVVM主要包含三个部分，分别是Model、View、ViewModel。Model指的是数据部分，主要负责业务数据；View指的是视图部分，即DOM元素，负责视图的处理。ViewModel是连接视图与数据的数据模型，负责监听Model或者View的修改。

1.1.2 Vue的优势

目前市场三大前端主流框架分别是Angular、React和Vue。Vue之所以被开发者青睐，主要是Vue秉承了Angular和React框架两者的优势，并且Vue的代码简洁、上手容易，在市场上也得到了大量应用。

1.轻量级

Angular的学习成本高，使用起来比较复杂，而Vue相对简单、直接，所以Vue使用起来更加友好。

2.数据绑定

Vue是一个MVVM框架，数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。尤其是在进行表单处理时，Vue的双向数据绑定非常方便。

3.指令

指令主要包括内置指令和自定义指令，以“v-”开头，作用于HTML元素。指令提供了一些特殊的特性，将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind动态绑定指令、v-if条件渲染指令、v-for列表渲染指令等。

4.插件

插件用于对Vue框架功能进行扩展，通过MyPlugin.install完成插件的编码，简单配置后就可以全局使用。常用的扩展插件有vue-router、Vuex等。

1.2 Vue开发环境

1.2.1 Visual Studio Code编辑器

Visual Studio Code(VS Code)是由微软公司推出的一款免费、开源的编辑器，推出之后便很快流行起来，深受开发者的青睐。作为前端开发人员来说，一个强大的编辑器可以让开发变得简单、便捷、高效。

VS Code编辑器具有如下特点。

（1）轻巧极速，占用系统资源较少。

（2）具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能。

（3）跨平台。VS Code编辑器不仅跨平台（支持Mac、Windows以及Linux）,使用起来非常简单。

（4）主题界面的设计比较人性化。

（5）提供了丰富的插件。用户可根据需要自行下载安装，只需在安装配置成功之后，重新启动编辑器，就可以使用此插件提供功能了。

1.2.2 Vue的下载和引入

从Vue官网可以获取下载地址，将Vue.js下载后，打开文件，在代码开头的注释中查看版本号。

当在HTML网页中使用Vue时，使用<script>标签引入vue.js即可，示例代码如下：

<script src="vue.js"></script>

1.2.3 git-bash命令行工具

在进行Vue开发时，我们经常会使用一些命令，如npm(包管理器)、vue-cli（脚手架），这些命令需要在命令行下使用。git-bash是git（版本管理器）中提供的一个命令行工具，外观类似于Windows系统内置的cmd命令行工具，但用户体验更友好。在实际开发中，经常会使用git-bash工具代替cmd。