Hi，一起学Vue.js吗

Posted 2021-03-30 Java后端

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Hi，一起学Vue.js吗相关的知识，希望对你有一定的参考价值。

阅读文本大概需要 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 浏览器的渲染过程，给你一个直观的理解：

Hi，一起学Vue.js吗

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

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/

Hi，一起学Vue.js吗

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

Hi，一起学Vue.js吗

新建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>

运行效果图：

Hi，一起学Vue.js吗

录屏软件：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: '' }也会跟着一起改变。我们打开控制台，看下图：

在控制台输入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

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