Hi,一起学Vue.js吗

1年前 (2023) 程序员胖胖胖虎阿
141 0 0

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' 这句话的意思是:所进行的操作的作用域是idapp的节点,也就是idappdiv。 

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

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

Hi,一起学Vue.js吗

在控制台输入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 做高亮搜索功能?

三周学会小程序第一讲

Hi,一起学Vue.js吗

本文分享自微信公众号 - Java后端(web_resource)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

版权声明:程序员胖胖胖虎阿 发表于 2023年9月3日 上午2:00。
转载请注明:Hi,一起学Vue.js吗 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...