一、前言

大家好，我是初心，本文主要讲解前端系列之Vue框架入门。

文章收录到我是初心的博客【Vue框架系列】专栏，此专栏是初心对Vue框架的学习笔记，希望能够加深自己的印象，以及帮助到大家😉😉。

作者水平有限，不足之处，还请大佬不吝赐教👏👏。

二、Vue简介

2.1 vue是什么

Vue是一套用于构建用户界面的渐进式Javascript框架。

渐进式	Vue可以自底向上逐层的应用
简单应用	只需引入一个轻量小巧的核心库
复杂应用	可以引入各式各样的Vue插件

它提供了一套开发规则，按照这个开发规则可提高开发效率。Vue的核心有三点：

（1）数据视图双向绑定

修改绑定的数据（页面上依赖数据），就能对应的更新视图（页面），极大的解放了操作dom的工作，提供开发效率。

（2）MVVM模式

M 数据模型（model）
V 视图（页面）（view）
VM 数据模型和视图的控制器（viewmodel）

（3）组件化开发

按照Vue的规则，它把页面按照页面功能（导航，侧边栏，下拉框）拆分业务，每一个组件时一个独立的功能，提供代码可维护性，和复用性。

2.2 谁开发的

Vue.js 作者尤雨溪：开源给了我无价的自由

尤雨溪（Evan You），前端框架 Vue.js 作者，独立开源开发者，现居美国新泽西。曾就职于 Google Creative Labs 和 Meteor Development Group。由于工作中大量接触开源的 Java 项目，最后自己也走上了开源之路，现在全职开发和维护 Vue.js。

现在的 Vue 跟运行初期相比，最大的区别就是框架涵盖的范围变大了许多。

一开始 Vue 只有一个核心库，现在则是包含了路由、状态管理、CLI 工具链、浏览器开发者插件、ESLint 插件等等的全套设施。目前只有核心库依然由尤雨溪维护，其它子项目基本都交给团队成员去做日常维护了。

对作者尤雨溪的采访——Vue 给您带来的最大的收获是什么？

可以这么说，我用键盘敲出了 Vue，而 Vue 把自由和真实的本我馈赠给了我，现在的我很清晰的明白自己在做什么，我想要的 Vue 是什么样的，我能跟随自己内心的指引去开发出 Vue 更多的新功能，我现在根本无法想象再回到大公司去工作的那种情境。

2.3 Vue的特点

1.采用组件化模式，提高代码复用率，且让代码更好维护。

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。

也称作声明式渲染。它描述目标性质，让计算机明白目标，而非流程。声明式编程不用告诉电脑问题领域，从而避免随之而来的副作用。而指令式编程专则需要用算法来明确的指出每一步该怎么做。命令式编码：有点像过程化编程；声明式编码：有点像面向对象编程。

三、搭建Vue开发环境

在我们的引入了Vue的HTML文件中，在浏览器打开控制台，我们可以看到一下两行提示信息。意思分别是：下载Vue的开发者工具以获得更好的开发经历；你正在运行Vue的开发模式，当你在开发产品时确保切换到生产模式，在Vue官网查看更多的技巧。

如果不想每次打开控制台都看到它们，如何取消呢？

3.1 安装Vue Devtools

下面演示如何取消第一行。首先就像提示中写的，我们需要去下载Vue Devtools工具，下载下来的文件名称叫 Vue.crx ，这个工具的下载链接就在这个提示下面，访问Github可以下载！

下载好Vue.crx之后，如果是Edge浏览器，点击浏览器右上角三个点，点击扩展，管理扩展，将Vue.crx文件拖入到浏览器，添加扩展即可。chrome浏览器也是类似的添加扩展。此时再次刷新浏览器页面，会发现控制台第一行的提示信息已经消失了。

3.2 关闭开发模式提示信息

下面演示如何取消第二行。提示信息出现的缘由是：我们使用的Vue是开发版本（Vue.js），而不是生产版本（Vue.min.js），Vue善意的提示我们，如果我们是在生产环境中，建议我们不要使用开发版本，因为它的体积比较大一些。

那么我们如何去关闭这个提示信息呢？在js代码中添加下面这一行代码即可。

Vue.config.productionTip = false

3.3 遇到的问题

1.Vue.js not detected（Vue未装载）

问题背景：当我们把Vue.crx文件添加到浏览器之后，控制台的第一行提示信息并没有消失。

解决方案：点击浏览器中的管理扩展，将图示中的允许访问文件URL打开，就可以了！

2.Vue.config.productionTip = false 不起作用

问题背景：添加下面这一行代码后，第二行提示信息并没有消失。

解决方案：直接修改vue.js文件的源码，应该在370行左右，由True修改为False即可。

Vue.config.productionTip = false

四、HelloWorld小实例

4.1 案例制作

1.live server插件

在进行HelloWorld小实例制作之前，我们先安装一款插件---live server。这款插件是一个具有实时加载功能的小型服务器，我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。下面在VsCode中安装live server插件。

我们就可以在VSCode中，右击代码区域，选择Open With Live Server。在浏览器我们可以查看 http://localhost:5500这个网页，网页相当于一个文件系统，根目录就是我们VsCode中的文件夹目录。

我们可以将 favcion.ico文件添加到文件目录中。 favcion.ico用于收藏夹图标和浏览器标签上的显示，如果不设置，浏览器会请求网站根目录的这个图标，如果网站根目录也没有这图标会产生 404。

在浏览器中，按住Shift和页面上的刷新，就可以强制刷新，从而看到我们的网页图标。这样有没有更美观或者更符合实际一点呢。

2.Hello World---Vue

使用VsCode开发工具，新建HTML文件，并引入vue.js。

在 body 中准备一个容器，作为Vue实例的模板，并创建Vue实例。使用Vue进行数据绑定，取data中的数据使用的是插值表达式{{}}，当文件保存后，不用刷新浏览器即可改变数据。

下面的例子就是从Vue的data区域获取数据，展示在容器中的一级标题标签上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<div id="root">
    <!-- 从root容器对应的vue实例中的data区域获取数据 -->
    <h1>Hello，{{name}}</h1>
</div>
<body>
    <script src="../js/vue.js"></script>
    <script>
        const x = new Vue({ // Vue构造函数的参数是一个配置对象
            el: "#root", // el用于指定Vue实例为哪个容器服务，值通常为CSS选择器
            data: { // data用于存储数据，供el指定的容器使用
                name: "小郭",
            }
        })
    </script>
</body>
</html>

4.2 案例分析

1.容器和Vue实例之间是一一对应的关系

每个实例只能被一个容器接管，如果有多个容器，那么只有第一个容器能够使用Vue实例中的数据；如果有多个实例，只有第一个实例起作用。

两个容器对应一个Vue实例：前一个容器有Vue实例解析，后一个没有。

一个容器对应多个Vue实例：容器可以获得到第一个实例，第二个实例不起作用。

2.真实开发中只会有一个Vue实例，Vue实例中有多个小组件

假设容器中有100个、1000个动态数据，那么Vue实例中的data中可能就要写1000个变量，代码会变得非常冗长。所以在将来的企业开发中，一个Vue实例中可能有三个小实例，分别绑定40，40，20个数据，这就是简单理解的Vue组件化思想。

3.插值表达式{{}}内可以写什么

类型	详细
data内的数据	Vue实例的data中定义的变量都可以使用
表达式（能产生一个确定的值）	运算表达式（1+1），函数调用表达式（ fun(1),str.toString() )，三目运算符
不能是语句	如 if 语句，for 语句

4.data中的数据发生变化，模板中用到的地方会自动发生变化

使用上面3.2.2点Hello World---Vue中的代码和结果进行验证，通过在浏览器的Vue-devtools更改data中的数据，观察页面中数据的变化。

5.开发时要引用开发版本的Vue，不要使用生产版本的Vue

通过一个小的错误，来演示Vue.js和Vue.min.js的有错误提示和无错误提示。使用开发版本时出现“警告”，控制台会有相对应的提示，而生产版本则不会有任何提示。

控制台报错：Vue is a constructor and should be called with the `new` keyword

换成生产版本的Vue.min.js，控制台报错变少，让我们更难发现错误：

1. Vue.js(完整版)

优点：逻辑清晰简单，好写好用。
缺点：

开发需要额外配置版本引用
代码体积较非完整版大30%，用户体验较差
视图模板写在HTML/template里，代码量大的时候显得冗余

2. Vue.min.js非完整版

缺点：对初级开发者可能不友好
优点：

代码体积较小，提升用户体验
不需要解析器，webpack等配置有vue loader，vue loader的作用是在代码打包的时候调用compiler自动解析编译

五、结语

Vue快速入门步骤为：

新建HTML文件，引入Vue.js

使用 div 标签创建模板（容器）

创建Vue实例，指定对应的容器和 data 数据

将容器和实例相互绑定实现视图数据转化

我是初心，文章首发于csdn，你的支持就是创作的最大动力。

💕💕💕 好啦，这就是今天要分享给大家的全部内容了，我们下期再见！✨ ✨ ✨

🍻🍻🍻如果本文对你学习有帮助，就不要吝惜你的一键三连了~

【Vue】快速入门