今天是刘小爱自学Java的第136天。html
感谢你的观看，谢谢你。前端
学习内容安排以下：vue
-
学大概两、三天的前端知识，Vue框架。 -
了解下前端开发模式的发展。 -
Vue的介绍与使用。 -
Vue的快速入门，写一个入门案例。
1、Vue的引入
先聊一下前端开发模式的发展。node
1静态页面web
最初的网页以HTML为主，是纯静态的网页。ajax
页面信息来自服务端的单向流通，开发人员也只关心页面的样式和内容便可。数据库
2异步刷新，操做DOMnpm
2005年开始，ajax逐渐被前端开发人员所重视，由于能够完成页面数据的动态渲染。json
此时的开发人员不只仅要编写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中的数据也会跟着改变。
2、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进行开发了。
3、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绑定。
好，代码编写完毕，作一个测试：
页面上的数据会随着对话框中输入的数值动态变化而变化，点击事件也能完成加一的效果。
最后
谢谢你的观看。
若是能够的话，麻烦帮忙点个赞，谢谢你。
本文分享自微信公众号 - 刘小爱（liuxiaoai946）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。