【微服务】136:非常好用的前端框架Vue

今天是刘小爱自学Java的第136天。

感谢你的观看,谢谢你。

学习内容安排如下:

  • 学大概两、三天的前端知识,Vue框架。
  • 了解下前端开发模式的发展。
  • Vue的介绍与使用。
  • Vue的快速入门,写一个入门案例。

一、Vue的引入

先聊一下前端开发模式的发展。

1静态页面

最初的网页以HTML为主,是纯静态的网页。

页面信息来自服务端的单向流通,开发人员也只关心页面的样式和内容即可。

2异步刷新,操作DOM

2005年开始,ajax逐渐被前端开发人员所重视,因为可以完成页面数据的动态渲染。

此时的开发人员不仅仅要编写HTML样式,还要懂ajax与后端交互,再通过JS操作Dom元素来实现页面动态效果。

比如我们以前学过的jQuery就是典型代表,同时我们对jQuery做一个简单的回顾:

①视图:view

视图,页面渲染结果,准确地说这儿不能算是一个视图,这里还没有完成渲染。

但为了后续MVVM模式的说明,我这里用这个例子来说明,可以把它理解成视图。

②模型:model

模型,包括数据和一些基本操作,这里就可以理解成从后台响应的数据。

③DOM操作

那如何将model渲染到对应的view中呢?

专业术语就是dom操作,在这里就是使用的jQuery中的html()方法。

要知道dom操作是很繁琐的,要记一堆方法,这里html()方法算是简单的了。

3MVVM,关注模型和视图

它的厉害之处在于:把开发人员从繁琐的DOM操作中解放出来了。

VM:即View-Model,这也是MVVM名称的由来。而Vue就是一款MVVM模式的框架。

Vue.js,前端框架三大巨头之一,作者是一个中国人,真心是争气呀,太厉害了。

想都不用想,肯定学它,不仅仅是支持国产什么的,本质上它确实很牛。

比我们以前学的jQuery更加地方便好用。

使用Vue之后,开发人员不用再关心Model和View之间是如何互相影响的:

  • 只要我们Model发生了改变,View上自然就会表现出来。
  • 当用户修改了View,Model中的数据也会跟着改变。

二、Vue快速入门

1Node和NPM

NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。

为了后面学习方便,我们先安装node及NPM工具,这个NPM就可以初步理解成Java中的maven工程,是一个管理工具。

下载Node后安装,就会自带NPM了。

NPM默认的仓库地址是在国外网站,速度较慢,建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。

推荐一款切换镜像的工具:nrm

命令有很多,但看名字都很简单,做个汇总:

  • 查看NPM版本命令:npm -v
  • nrm安装命令:npm install nrm -g
  • 查看npm的仓库列表命令:nrm ls
  • 使用淘宝镜像源命令:nrm use taobao
  • 测试速度命令:nrm test npm
  • 测试淘宝:nrm test taobao

2创建一个新的工程

此时使用Static Web学习下Vue即可,

idea开发工具中可以下载vue插件,步骤为File-Setting-plugins,再搜索vue安装即可。

关于vue的使用,可以直接使用公共的CDN服务,我们这里使用npm安装

在idea的左下角,有个Terminal按钮:

这个窗口就等同于前面的dos窗口,现在直接在idea开发工具中了,使用起来很是方便。

①项目初始化

命令:npm init -y。

init即为初始化的意思,-y表示yes确定的意思,初始化完成之后,会在项目目录下出现一个package.json文件。

有对项目的基本描述信息,例如名称、版本等,这个就有点类似Java中的pom文件。

②安装Vue

命令:npm install vue --save

安装后会在项目中出现node_modules目录,并且在其中会有一个vue目录。

此时再查看package.json,会发现变化:

这个package.json文件就和Java中的pom文件很类似,vue就有点类似于Java的jar包。

就连引入依赖的关键字都是一样的,这些配置完成,就可以使用vue进行开发了。

三、Vue入门案例

创建html文件,写一个入门案例:

首先导入项目目录中的vue,这不用多说。

①对应视图view

这里的视图就可以理解成这个div标签,其中它需要一个数据name,需要从后台查询。

格式:{{name}},注意有两个大括号。

②对应模型model

当然这里只是快速学习,自己用一个写好的数据代替即可,并没有从数据库去查询,实际开发过程中是要去数据库查询的。

  • el:element的简写,通过id选择器确定模块,通过它将视图和模型绑定。
  • data:就是数据的意思,很好理解。

以前需要使用dom操作将数据渲染到对应的标签,现在数据和view自动就可以完成。

前面我们也说过了VM:即View-Model,它是指模型与视图间的双向操作。

上面这个例子只是用model来渲染view,那view如何修改model呢?

③对话框

v-model=“num”,即将对话框和model中的数据num绑定,在对话框中输入对应的数值,model中的数据num也会完成修改。

这个可就非常厉害了,也很方便。

④点击事件

@click,这是vue中的点击事件编写格式,同样的也可以和model中的num绑定。

好,代码编写完毕,做一个测试:

页面上的数据会随着对话框中输入的数值动态变化而变化,点击事件也能完成加一的效果。

最后

谢谢你的观看。

如果可以的话,麻烦帮忙点个赞,谢谢你。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘小爱

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值