是一套用于构建用户界面的渐进式javascript框架。
开发中： 我们往往先定义好Vue数据模型，然后在页面标签中进行数据模型的绑定！
在Vue对象中声明数据绑定对象 <script> var vm=new Vue({ el:"#app",//挂载标签 data:{name:"李四"} //声明数据模型，定义一个name数据 }) </script> 在页面标签建立好标签-数据模型的关系 <div id="app">你好:{{name}}</div> <!--//在页面标签建立好标签-数据模型的关系--> 通过上述操作： 开发时，我们只需要关注 数据模型对象即可，页面标签数据会自动更新使用vue 可以更快捷的开发，将模型数据和页面展示 分离，开发人员无需开发数据如何更新的问题
使用vue 我们只需要关注数据模型的开发！ 注意语法： 一切皆json格式的规则！
使用vue 开发步骤简单，1. 先声明数据模型对象，2. 在页面标签位置，展示对应的数据即可 初学者重点要掌握： 1. 语法 如何声明数据模型对象 2. 页面展示数据{{}}等特定语法
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({ // 选项 })每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。我们可以通过el属性来指定。 例如一段html:
<div id="app"> </div>然后创建Vue实例，关联这个div
var vm = new Vue({ el:"#app" })这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。 html：
<div id="app"> {{name}} </div>js：
var vm = new Vue({ el:"#app", data:{ name:"刘德华" // data 区域 就是我们常说的数据模型对象！ } }) name的变化会影响到div标签内的值Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。
一般方法都会和对应的事件绑定：
举例： vue通过 v-on ：绑定事件 事件类型，通过冒号：事件类型名称即可
语法格式： v-on:click=“函数名称” 点击事件触发对应的函数 html：
<div id="app"> 你好：{{name}} <button v-on:click="clickMe">点击我</button> </div>js：
<script> var vm = new Vue({ el:"#app", data:{name:'lisi'}, methods:{ clickMe:function () { alert("弹弹弹。。。弹走鱼尾纹") } } }) </script>花括号 格式： 一般用来获取vue数据模型中定义的数据
{{表达式}}说明：
该表达式支持JS语法，可以调用js内置函数（必须有返回值）如：new Date()表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;可以直接获取Vue实例中定义的数据或函数插值表达式 不可以使用在标签内的属性值上 一定注意！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插值表达式{{}}</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <!--插值表达式 可以支持数学和逻辑运算--> {{1+1}} {{1==1?'true':'false'}} <!--插值表达式可以支持js内置函数--> {{new Date()}} <!--获取数据模型中数据--> {{name}} </div> <script> var vm = new Vue({ el: "#app", data: { name: '程序员' } }) </script> </body> </html>指令：
Vue.js的指令是指 v-开头，作用于html标签，提供一些特殊的特性，当指令被绑定到html元素的时候，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成html的一种属性。指令特征 (Directives) 是带有 v- 前缀的特殊属性，作用于 html标签！
也就是说 在标签中才会运用到指令语法！ 数据模型 ：不会涉及到v- 开头的语法！
v-text 数据绑定标签，将vue对象data中的属性绑定给对应的标签作为内容显示出来，类似js的text属性；
v-html 类似v-text标签，他是将data的属性作为html语法输出，类似js中的innerHtml属性 说明：
v-text： 将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-text-html</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> v-html:<span v-html="hello"></span> <br/> v-text:<span v-text="hello"></span> </div> <script> var vm = new Vue({ el:"#app", data:{ hello: "<h1>大家好，我是刘德华</h1>" } }) </script> </body> </html>v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。
接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型
语法：
html标签内部直接输入： v-model=“vue定义的变量名称”
此时标签中的value值就和vue定义的变量对应的值，形成了双向绑定，当一个值发生改变，另一个也随之改变；
v-model 指令大都数是用在表单 、 及 等元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。 注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <input type="radio" name="sex" value="male" v-model="sex" checked="checked"> 男性 <input type="radio" name="sex" value="female" v-model="sex"> 女性 <div> 你选择了{{sex}} </div> <hr> <div> <select name="xueli" v-model="xueli"> <option value="chuzhong" selected="selected">初中</option> <option value="gaozhong">高中</option> <option value="daxue">大学</option> <option value="boshi">博士</option> </select> </div> <div> 你选择了{{xueli+1}} </div> </div> <script> var vm = new Vue({ el:"#app", data :{ sex:"female", // 我们发现 标签中的 checked="checked" 失效 xueli:"boshi" // 标签中初始化的 selected="selected"失效 } }) </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <input type="checkbox" v-model="ischecked" />是否选中<br/> <input type="checkbox" v-model="language" value="Java" />Java<br/> <input type="checkbox" v-model="language" value="PHP" />PHP<br/> <input type="checkbox" v-model="language" value="GO" />GO<br/> <h1> 多选框：{{language}} ， 单选框：{{ischecked}} </h1> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ language: [],// 对于多选框 我们用数组来接受多个选项值！ ischecked: true // 对于单个 boolean 来定义 } }) </script> </body> </html>v-on指令用于给页面元素绑定事件
@事件名="js片段或函数名" v-on:click == @click <div id="app"> <!--事件中直接写js片段 简单的可以这样写 --> <button @click="num++">增加</button><br/> <!--复杂事件 需要指定一个回调函数，必须是Vue实例中定义的函数--> <button @click="decrement">减少</button><br/> <!--显示效果--> <h1>num: {{num}}</h1> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ num:0 // 初始化数据模型 }, methods:{ // 如果出现事件绑定的函数对象 要用 methods来声明事件 语法规则： decrement(){ this.num--; // 在vue 对象里面 ，this 表示当前的 vue对象 获取对应的属性 this.声明的属性名称 注意 this不是点击的标签按钮对象！ } } }) </script>Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 监听回车事件 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 表示用户敲击回车 会执行对应的submit函数 submit是函数名称 可以自定义--> <input @keyup.enter="submit"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <input type="text" @keyup.enter="submit" v-model="username"> <p> 你输入的内容：{{username}} </p> </div> <script> var vm = new Vue({ el:"#app", data :{ username:'' }, methods:{ submit() { alert("提交"+this.username) // 当我们敲击回车时，当前submit函数执行 } } }) </script> </body> </html>v-bind 用于将vue的值绑定给对应dom的属性值主要用于对标签的元素属性赋值
v-bind:元素属性名="数据模型定义的初试数据" <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-bind</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> 原始语法如下： <div v-bind:hidden="hiddenValue">v-bind test</div><br> 简化写法 :hidden <div :hidden="hiddenValue">v-bind test</div> </div> <script> new Vue({ el: "#app", data: { hiddenValue:false // 页面元素不影藏 ， 如果是true表示隐藏页面元素 } }) </script> </body> </html>Vue对class属性进行了特殊处理，可以接收数组或对象格式
<div :class="{ red: true,blue:false }"></div> <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-bind</title> <script src="js/vuejs-2.5.16.js"></script> <style> #box { width: 100px; height: 100px; color: darkgray } .red{ background-color: red; } .blue{ background-color: blue; } </style> </head> <body> <div id="app"> <button @click="change">更改颜色</button> <!-- {red:flag,blue:!flag} 对象中，key是已经定义的class样式的名称，如本例中的：red和blue value是一个布尔值，如果为true，则这个样式会生效，如果为false，则不生效。 --> <div id="box" :class="{red:flag,blue:!flag}"> 点击按钮，背景会切换颜色哦 </div> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { flag:true, // flag表示 当前的样式值 }, methods:{ change(){ this.flag=!this.flag } } }) </script> </body> </html>在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
v-for="(item,index) in items" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插值表达式{{}}</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <!-- 对象遍历--> <table> <tr v-for="(u,key,index) in user"> <td v-text="index"></td> <td v-text="key"></td> <td v-text="u"></td> </table> </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ user:{name:'小明', gender:'男', age: 21} } }) </script> </body> </html>v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
v-if="布尔表达式" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if-show</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app"> <div @click="flag=!flag"> 点击我试试 </div> <p v-if="flag">你好 程序员</p> <p v-else>你好 中国</p> </div> <script> var vm = new Vue({ el:"#app", data :{ flag: true } }) </script> </body> </html>v-if和v-show功能差不多，都是用来控制dom的显隐，用法也一样，只是原理不同，当v-if="false"时，dom被直接删除掉；为true时，又重新渲染此dom；
<div id="app"> <div @click="flag=!flag"> 点击我试试 </div> <p v-show="flag">你好 程序员</p> </div> <script> var vm = new Vue({ el:"#app", data :{ flag: true } }) </script>每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了监听函数。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。vue的生命周期中具体做了什么事情我们通常不需要关心，我们只要关注生命周期的8个监听函数。
vue的整个生命周期中，提供了8个监听函数，以便我们可以在某个生命周期段根据需要做相应的操作： beforeCreate：在vue实例创建前调用
created：在vue实例创建后调用,这个监听函数是最常用的，这个时候会初始化data数据，通常去后端取数据；
beforeMount：在挂载开始之前被调用 。 什么是挂载？可以将vue对象和视图模板进行关联的过程看作是挂载
mounted：挂载到实例上去之后调用
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy：实例销毁之前调用。在这一步，vue实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
this就是当前的Vue实例，在Vue对象内部，必须使用this才能访问到Vue中定义的data内属性、方法等
vue-resource是Vue.js的插件,提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以，因为现在基本使用的都是2.0之后的版本了。
axios是对ajax技术的一种封装，就像jQuery实现ajax封装一样。 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
说明： 使用axios将表单数据提交到后台 要求使用vue+axios 实现 html页面编写：
<div id="app"> <form> 用户名<input type="text" v-model="formData.username"><br> 密码<input type="password" v-model="formData.password"><br> 性别 <input type="radio" value="male" v-model="formData.sex">男 <input type="radio" value="female"v-model="formData.sex">女 <br> 爱好 <input type="checkbox" value="洗澡"v-model="formData.hobby">洗澡 <input type="checkbox" value="看电视"v-model="formData.hobby">看电视 <input type="checkbox" value="睡觉"v-model="formData.hobby">睡觉 <br> 学历 <select v-model="formData.education"> <option value="初中">初中</option> <option value="高中">高中</option> <option value="大专">大专</option> <option value="本科">本科</option> </select> <br> 简介<textarea rows="5" cols="20" v-model="formData.remark"></textarea> <br> <input type="button" @click="add" value="提交"></input><br> </form> </div>vue模块代码编写 通过ajax完成表单数据的提交！
<script> var vm = new Vue({ el:"#app", data:{ // 提交给后台的数据 都是在data中声明的 formData:{ username:'', password:'', sex:'', hobby:[], education:'', remark:'' } }, methods:{ add(){ // alert("---"+JSON.stringify(this.formData)) // axios 提交给后台 axios.post("/add.do",this.formData).then(); } } }) </script>注意：通过axios提交表单数据，会自动将表单数据序列化成json格式的数据，我们在后台controller只需要通过： @RequestBody 将此json格式数据 封装到实体对象里面即可！
key:value 格式提交！ 标准的json格式数据传输
