Java程序员入门Vue基础（一）

文章目录

1.为什么要学习VUE
2. Vue的架构
3. HelloWorld
4. VUE-devtools

1.为什么要学习VUE

最近公司的领导让我抽空学习一下VUE，下一个项目要用到它。这么多年开发中也知道有VUE这个东西发展很迅猛，基本上国内的互联网企业用VUE的越来越多，而且面试招聘中也要求熟练和使用VUE的需求。

2. Vue的架构

在学习VUE之前了解过其是一个MVVM模型架构，JAVA程序员一定对MVC软件架构模式很清晰。MVC分为 Model（模型）、Controller（控制器）、View（视图），Spring MVC正式这种架构风格的体现。而 Vue是基于MVVM架构风格

这种架构体系中，View的变化会同步更新到ViewModel中，于此同时ViewModel的变化也会同步更新到View中，其架构图如下所示：

3. HelloWorld

项目可以使用script引入加载CDN文件，截止到当前Vue 2.x 最新版本为2.6.11。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>

下面我们实现一个如下效果的简单案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>helloworld</title>
</head>
<body><div id="app"><input type="text" v-model="something"><!-- 注意这里面引用vue必须在vue app容器中 --><p>hello {{something}}</p></div></body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>let app=new Vue({el:'#app',data: {something:'join'}})
</script>
</html>

上面的代码非常简单。

引入Vue.js文件
在body中我们定义一个id为app的div，Vue的所有渲染都是围绕这个app而展开的。
在Js代码中我们定义了一个Vue对象，并且指定所有的操作都是对app这个div展开的。
data为Vue管理的变量赋值。

4. VUE-devtools

平时开发中在Chrome中可以使用这个插件方便我们Vue的调试工作。如果你掌握了科学上网的方法这个时候可以在chrome的网上商店下载这个插件如下所示：
添加到Chrome后我们可以在控制台选择vue的按钮使用这个插件如下所示：
这里我们在刚刚的helloworld.html中打开这个vue的dev-tools如下所示：
接下来我们使用这个工具调试一下下列一个案例源码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><ul><li v-for="person in persons" >{{person.name}}</li></ul></div><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>let vm = new Vue({el: '#app',//这个app就是DIV的属性值里的appdata: {persons: [{name: '前端工程师'},{name: 'java后端工程师'},{name: '运维工程师'},{name: '大数据工程师'},{name: 'ui工程师'}],// username:'join'}});
</script>
</body></html>

我们打开这个插入如下所示：

Java程序员入门Vue基础（一）相关推荐

java程序员入门先学什么开发者工具
学习java编程语言,那么开发工具是肯定少不了的,程序员入门基础中开发工具是一定要学会的,可以帮助开发者们提高开发效率.更优雅的写代码.由于开发者涉及的技术领域众多,以后端开发者的视角盘点平时可能用得 ...
java程序员入门_Java程序员入门：简介
java程序员入门背景 Go (通常称为" Golang")是一种相当新的编程语言,于2007年首次提出,并于2012年发布了1.0版.它的三位发明者目前都是Google员工,具 ...
Java程序员入门：简介
背景 Go (通常称为" Golang")是一种相当新的编程语言,于2007年首次提出,并于2012年推出了1.0版.它的三位发明者目前都是Google员工,具有令人称奇的声誉. ...
Java程序员面试，基础真的很重要
基础这东西,各个公司都很看重,尤其是大公司,他们看中人的潜力,他们舍得花精力去培养,所以基础是重中之重.之前很多人问我,项目经历少怎么办,那就去打牢基础,当你的基础好的发指的时候,你的其他东西都不重要 ...
Java程序员入门技术大全V1(十三) -- 开发工具之设计工具
设计工具 UML 统一建模语言(Unified Modeling Language,UML)是一种为面向对象系统的产品进行说明.可视化和编制文档的一种标准语言,是非专利的第三代建模和规约语言.UML使 ...
收藏｜Java程序员必看的几本基础书籍和常用工具
java程序员必看基础书籍和工具 1计算机基础 1.<深入理解计算机系统> 著名的CSAPP,从c语言到汇编语言到硬件再到操作系统,写得非常好.是一本能帮助深入理解计算机系统的书.基本上把 ...
java程序员_哪些书是不可错过的？Java程序员书单分享
作为后浪程序员,我们要精通一门编程语言,最好的途径就是看书,而这个时候读什么书就变成了最关键的了,靠谱的书籍无疑可以让我们少走弯路事半功倍,今天就来给大家推荐一些Java工程师必备书籍. 入门篇&l ...
Java程序员职业规划如何做？发展方向有哪些？
Java程序员职业规划如何做?程序员一直被贴青春饭的标签,很多人写了3年代码生活工作趋于稳定,每天忙忙碌碌抱怨没有时间提升学习,职业发展遇瓶颈,入行前就应该规划好自己的职业发展发展方向. 一.按照Ja ...
Java程序员月薪2W除了北上广深杭，如何达到？需要什么掌握能力
有人回答说月薪两万,这只能是大企业或者互联网企业的工程师才能拿到.也许是的,小公司或者非互联网企业拿两万的不太可能是码农了,应该是已经转管理后才有可能.还有区域问题,这个不在我的考虑范围内,因为除了北 ...