它的厉害之处在于:把开发人员从繁琐的DOM操作中解放出来了。
VM:即View-Model,这也是MVVM名称的由来。而Vue就是一款MVVM模式的框架。
Vue.js,前端框架三大巨头之一,作者是一个中国人,真心是争气呀,太厉害了。
想都不用想,肯定学它,不仅仅是支持国产什么的,本质上它确实很牛。
比我们以前学的更加地方便好用。
使用Vue之后,开发人员不用再关心Model和View之间是如何互相影响的:
二、Vue快速入门
1Node和NPM
NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括、、VueJs都有。
为了后面学习方便,我们先安装node及NPM工具,这个NPM就可以初步理解成Java中的maven工程,是一个管理工具。
下载Node后安装,就会自带NPM了。
NPM默认的仓库地址是在国外网站,速度较慢,建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。
推荐一款切换镜像的工具:nrm
命令有很多,但看名字都很简单,做个汇总:
2创建一个新的工程
此时使用 Web学习下Vue即可,
idea开发工具中可以下载vue插件,步骤为File--,再搜索vue安装即可。
关于vue的使用,可以直接使用公共的CDN服务,我们这里使用npm安装。
在idea的左下角,有个按钮:
这个窗口就等同于前面的dos窗口,现在直接在idea开发工具中了,使用起来很是方便。
①项目初始化
命令:npm init -y。
init即为初始化的意思,-y表示yes确定的意思,初始化完成之后,会在项目目录下出现一个.json文件。
有对项目的基本描述信息,例如名称、版本等,这个就有点类似Java中的pom文件。
②安装Vue
命令:npm vue --save
安装后会在项目中出现目录,并且在其中会有一个vue目录。
此时再查看.json,会发现变化:
这个.json文件就和Java中的pom文件很类似,vue就有点类似于Java的jar包。
就连引入依赖的关键字都是一样的,这些配置完成,就可以使用vue进行开发了。
三、Vue入门案例
创建html文件,写一个入门案例:
首先导入项目目录中的vue,这不用多说。
①对应视图view
这里的视图就可以理解成这个div标签,其中它需要一个数据name,需要从后台查询。
格式:{{name}},注意有两个大括号。
②对应模型model
当然这里只是快速学习,自己用一个写好的数据代替即可,并没有从数据库去查询,实际开发过程中是要去数据库查询的。
以前需要使用dom操作将数据渲染到对应的标签,现在数据和view自动就可以完成。
前面我们也说过了VM:即View-Model,它是指模型与视图间的双向操作。
上面这个例子只是用model来渲染view,那view如何修改model呢?
③对话框
v-model="num",即将对话框和model中的数据num绑定,在对话框中输入对应的数值,model中的数据num也会完成修改。
这个可就非常厉害了,也很方便。
④点击事件
@click,这是vue中的点击事件编写格式,同样的也可以和model中的num绑定。
好,代码编写完毕,做一个测试:
页面上的数据会随着对话框中输入的数值动态变化而变化,点击事件也能完成加一的效果。
最后
谢谢你的观看。
如果可以的话,麻烦帮忙点个赞,谢谢你。