Hi，一起学Vue.js吗

约定不等于承诺〃 2021-07-31 22:59 333阅读 0赞

![640?wx\_fmt=png][640_wx_fmt_png]

阅读文本大概需要 7 分钟。

**前言**

久一最近新起的项目采用Spring Boot和Vue.js技术栈。这Vue.js都快3.0了，久一竟然还不会Vue.js。不行，我这倔脾气，元旦假期不出去玩耍了，把Vue.js搞完，今天先起步、初步了解一下Vue.js。

话说回来，什么人群要学习Vue.js这门技术呢？

首先：如果你想从事前端开发，可以说Vue.js是你工作后很有可能用到的一门技术，它有非常好的生态，你在学习过程中遇到的问题在各大IT网站几乎都可以找到解决的办法，只要善用搜索引擎，不会寸步难行，何况还有久一，一起交流学习啊。

并且Vue.js是由我们国人维护的，中文文档详细齐全，所以不会的就查，不懂的就敲。如果你已经掌握了React.js，Angular.js等前端框架技术，学习Vue.js是很简单的，看看文档，敲敲Demo很快就会掌握这门技术。

我是一名后端开发工程师该不该学习Vue.js呢？

久一认为，如果你像我是一名爱折腾的后端开发工程师，不妨一起学习Vue.js，我看不少公司招聘也要求后端人员了解任一种MVVM框架，Vue.js简单易学。如果不想深入学习，每天看两眼有个印象，对自己的职业发展和行业思考并不是坏事。有些小公司希望开发者前后端都能胜任，况且，Vue.js又不是很难的技术，跟着我一起搞起吧！

学习Vue.Js之前，我应该具备什么样的知识储备呢？

久一认为，你只需了解js，html，css的基础语法就可以学习了，当然学习Vue.js过程中还可能需要到Webpack打包工具、Es6等知识，这些都不难学，网上成体系的视频教程都会讲到，当然文末我也会推荐一些，大家如果感兴趣跟着学就行了。

**正文**

什么是 Vue.js 呢？官方定义它为渐进式 JavaScript 框架，不太容易理解？小编尝试用自己的语言给你解释下。 Vue.js 其实就是一个轻量级的用于操作视图的框架，视图这里指的就是页面。下面我们展开说下：

先简单说一下 DOM 这个概念，你之所以能看到多彩的页面，都是归功于 DOM ，浏览器引擎通过自己的规则，构建出 DOM 树，然后渲染页面，所以简单点理解页面每一个元素就是 DOM 的一个节点，下图是 Chrome 浏览器的渲染过程，给你一个直观的理解：

![640?wx\_fmt=png][640_wx_fmt_png 1]

哎呀，其实很多东西，第一遍学习的时候看不懂也没有关系，等你知识体系建立起来了，有些难点自然就攻破了。

JQuery想必大家都知道吧，虽然久一认为JQuery很快就会退出历史舞台，JQuery可以说是前后端开发者都会使用的一门技术。

$("\#test").text("Hello world!"); 这语法的意思是，把 DOM 上面 id 标记为 test 节点赋值 Hello World 内容。当然这个时候你得有一个 html 页面，里面定义了这个内容。首先 DOM 节点内容会变，同时会重新执行上面图里面的流程，重新的组织、渲染页面。

其实 Vue 和 JQuery 的 原理一样都是通过修改 DOM 改变页面，只是JQuery 需要我们自己去识别，定位然后修改 DOM，而 Vue 让我们只需要关心js的逻辑，他去关心怎么渲染就好了，同时呢 Vue 引入了 Virtual DOM 的概念，通过算法可以做到局部渲染DOM，这样大大的提高了浏览器的渲染性能，所以你明白了我们为什么要用 Vue 了吗？

**起步**

学习一门技术最好的方式莫过读他的文档：https://cn.vuejs.org/，说实话对着文档硬怼挺难受的，刚开始还行看到后面就会看不懂。所以我建议视频+文档的学习方式就非常不错，当然像慕课网、网易云课堂等都有很好的学习资源，如果你找不到合适的可以勾搭久一。

登陆官网，下载Vue.js。

官网：https://cn.vuejs.org/

![640?wx\_fmt=png][640_wx_fmt_png 2]

下载 Vue.js，点击开发版本下载就可以了，一般他会弹出下载框，如果点开后一一整页的源代码，可以新建一个vue.js的文件，把源代码复制进去即可,我们使用的时候使用script标签引入即可。

![640?wx\_fmt=png][640_wx_fmt_png 3]

新建index.html:

<!DOCTYPE html>  
<html lang="en">  
<head>  
 <meta charset="UTF-8">  
 <title>Vue02</title>  
 <script src="./vue.js"></script>  
</head>  
<body>  
 <div id="app">  
   <p>\{ \{ message \}\}</p >  
   <input v-model="message">  
 </div>  
  
<script>  
 var app = new Vue(\{  
   el: '\#app',  
   data: \{  
    message: 'Hello Vue!'  
   \}  
 \})  
</script>  
</body>  
</html>

运行效果图：

![640?wx\_fmt=gif][640_wx_fmt_gif]

录屏软件：GifCam

我们发现，当我们修改输入框中的文字时，P标签中的文字会做响应的修改。这样两行代码，就可以让页面的数据和Js 里面的数据实现双向链接， Vue 官方给他的称呼叫做“双向绑定”。

我尝试着解释一下上面的代码，带你入门：

1. 我们定义了一个 div，它的id是 app ,同时head中通过script标签引入刚刚从官网下载的Vue.js脚本。

2. div下方的script标签里面定义一个app，它等于一个Vue的实例，我们需要编写的操作可以写在实例里面。

3. el：'\#app' 这句话的意思是：所进行的操作的作用域是id为app的节点，也就是id为app的div。

4. Vue实例中的data中有一个 message: 'Hello Vue!'。而在div中我们可以使用\{ \{message\}\}来接到这个值。

5. input标签中写了一个命令：v-model="message"，输入框就是通过这标签来实现双向绑定的。由于input写了v-model="message"这个指令，当我们修改输入框内的值时，Vue实例中 data: \{ message: '' \}也会跟着一起改变。我们打开控制台，看下图：

![640?wx\_fmt=gif][640_wx_fmt_gif 1]

在控制台输入app.$data.message就是来取Vue实例中data: \{ message: ''\}中的值，而当我们更改输入框的值的时候，Vue实例中的message也会跟着改变。当我们在控制台更改实例中message的值，输入框也会跟着改变，这就是**数据绑定**。

学习资源分享

好了，这仅仅是一个Vue.js的初体验，皮毛而已。如果你想学习这门技术，可以去找黑马的学习资源，或者去慕课网、掘金等等。如果你懒得找可以参考下方链接，这都是不错的学习视频：

1. pan.baidu.com/s/1bEU1w7WKBGEq6RNmgDeTEQ 密码:203a  
2. www.bilibili.com/video/av36650577  
3. coding.imooc.com/class/203.html  
4. juejin.im/post/5a5bc8c36fb9a01ca26774eb

**如果本文章对你有些许启发，点赞转发都是支持。**

**推****荐****阅****读**

![640?][640]

[640_wx_fmt_png]: /images/20210731/73259dbc965444299f3c902a079b8b39.png?wx_fmt=png
[640_wx_fmt_png 1]: /images/20210731/cb3ad082904a40ee96adabce3aa230ba.png?wx_fmt=png
[640_wx_fmt_png 2]: /images/20210731/70c5f67d1aaa473a9727e01b4bbc6c2e.png?wx_fmt=png
[640_wx_fmt_png 3]: /images/20210731/2756d1b1f0e44b4ea2337a9b45bb9446.png?wx_fmt=png
[640_wx_fmt_gif]: /images/20210731/75758a54060746779b3f38c2ea69dfda.png?wx_fmt=gif
[640_wx_fmt_gif 1]: /images/20210731/3ea26f93139b45e0b5ab9f0a7067dda4.png?wx_fmt=gif
[640]: /images/20210731/f863f5f5bfe448d3a5744d7a94454516.png?