阅读文本大概需要 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 浏览器的渲染过程，给你一个直观的理解：
哎呀，其实很多东西，第一遍学习的时候看不懂也没有关系，等你知识体系建立起来了，有些难点自然就攻破了。
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/
下载 Vue.js，点击开发版本下载就可以了，一般他会弹出下载框，如果点开后一一整页的源代码，可以新建一个vue.js的文件，把源代码复制进去即可,我们使用的时候使用script标签引入即可。
新建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>
运行效果图：
录屏软件：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
如果本文章对你有些许启发，点赞转发都是支持。
推荐阅读
推荐几个IDEA插件
使用 Lucene 做高亮搜索功能？
三周学会小程序第一讲
本文分享自微信公众号 - Java后端（web_resource）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
相关文章
