VUE介绍
1、M V VM思想 双向绑定 MVVM vue angularJs
jsp 本质 是一个servlet
M:即Model，模型，包括数据和一些基本操作
v:即 view，视图，页面渲染结果
VM:即 View-Model，模型与视图间的双向操作（无需开发人员干涉)
1.在MWM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到view中。而后当用户操作视图，我们还需要通过DOM获取view中的数据，然后同步到Model中。
2.而MVVM中的vM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和view之间是如何互相影响的:
3.只要我们Model发生了改变，View上自然就会表现出来。
4.当用户修改了View，Model中的数据也会跟着改变。
5.把开发人员从繁琐的 DOM操作中解放出来，把关注点放在如何操作Model上。
2、Vue简介
Vue(读音/yju:/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，vue被设计为可以自底向上逐层应用。Mue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
官网:Vue.js
参考:介绍 — Vue.js
Git地址:vuejs · GitHub
尤雨溪，Vue.js创作者，Vue Technology创始人，致力于vue的研究开发。
3.Vue入门案例
3.1 安装 npm init -y
使用vscode创建新的文件夹，使用命令npm init -y初始化一个项目
3.2使用npm安装vue; npm install vue
3.3创建index.html页面
Document ,你好vue
4.Vue基本语法以及插件安装
1、双向绑定,模型变化，视图变化。反之亦然。1 /3、事件处理
1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
2、指令来简化对dom的一些操作。
3、声明方法来做更复杂的操作。
4.1 v-model指令（双向绑定）
在js代码中声明一个对象，如果页面改变了 js中也会发生变化
Document {{name}},你好vue,有{{num}}个人为你点赞
Document 张三
李四
王五
选中的数据为:{{language}}
4.2 v-on:click 指令
v-on == @
v-on表示在xxx元素上声明事件名称
Document {{name}},你好vue,有{{num}}个人为你点赞
4.3vue的方法声明
Document {{name}},你好vue,有{{num}}个人为你点赞
4.4安装vue浏览器插件
4.5 v-text、v-html指令
v-text 输出文本
v-html 如果一个字符串是html模板，会带格式输出
Document {{msg}}
4.6插值表达式
a)花括号
格式:{{表达式}}
说明:
1.该表达式支持Js语法，可以调用南内置函数（必须有返回值)
2.表达式必须有返回结果。例如1+1，没有结果的表达式不允许使用，
如:let a =1+1;
-
可以直接获取vue,实例中定义的数据或函数
b) 插值闪烁
使用{{}}方式在网速较慢时会出现间题。在数据未加载完成时，页面会显示出原始的`{{}},加载完毕后才显示正确数据，我们称为插值闪烁。
4.7 v-bind
Document 跳转 你好
4.8事件修饰符
在事件处理程序中调用‘event.preventDefault()或‘event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是:方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，Vue.js为‘v-on'提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
'.stop:阻止事件冒泡到父元素
.prevent':阻止默认事件发生
'.capture':使用事件捕获模式
`.self:只有元素自身触发事件才执行。（冒泡或捕获的都不执行)
.once':只执行一次
Document
4.9按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为'v-on'在监听键盘事件时添加按键修饰符:
只有在‘keyCode’是13时调用‘vm.submit()-->
记住所有的‘keyCode’比较困难，所以 Vue为最常用的按键提供了别名:
全部的按键别名:
'.enter'
'.tab`
.left'
.right'
'.delete'(捕获"册除”和“退格"键)
'.esc'
'.space'
.up
`.down
Document
4.10 v-for
Document
- 当前索引：{{index}} ==> {{user.name}} ==> {{user.gender}} ==>{{user.age}}
对象信息： {{k}}=={{v}}=={{i}}；
4.11 v-if和v-show
Document if=看到我....
show=看到我
4.12 v-else和v-else-if
Document {{random}}看到我啦？！ >= 0.75
看到我啦？！ >= 0.5
看到我啦？！ >= 0.2
看到我啦？！ < 0.2