一.Vue是什么？
💖Vue的概念
Vue是一套前端框架，可以免除JavaScript的DOM操作，使代码更加简洁
Vue的实现是基于MVVM思想，实现数据的双向绑定。
框架是一个半成品软件，是一套可重用的、通用的、软件基础代码模型
Vue文件下载及其MVVM思想的介绍：http://t.csdn.cn/IGTO7
💖 Vue代码创建
使用前需要映入Vue.js文件：
<script src=" Vue.js文件路径 " ></script>
Vue语法格式：new Vue（{
el:" #id名 ",
//data定义数据模型 data:{
数据模型
}
}）
注：在JS区域中创建,并且el的定义相当于CSS的id选择器
使用格式：
<div id=" id名 "> 代码 {{数据模型}} </div>
<html lang="en"> <head> <title>Vue复习</title> <script src="vue.js"> </script> //引入vue.js文件 </head> <body> <div id="app"> //v-model下述有讲解 <input type="text" v-model="message"> {{message}} //显示message的值 </div> </body> <script> //创建Vue new Vue({ el:"#app", data:{ message:"Hello world" } }) </script>
而如代码中，通过v-model指令，text文本框和数据模型data，完成了双向绑定，文本框的值和 message保持一致
二.指令
由上面，我们可以发现一个新奇的东西，v-model，这便是指令。
指令：HTML标签上带有v-前缀的特殊属性，不同指令不同含义。
常用指令：
| 指令 | 作用 |
| v-bind | 为HTML标签绑定属性值，如设置 href,css样式等 |
v-model |
在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-else-if | |
| v-else | |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
v-bind
为标签绑定属性值，可是有人会问，我们不需要这个也可以绑定啊，可是这是动态绑定诶，
使用时，可以直接省略v-bind
例如：以上代码，当游戏链接出错时，未使用指令，需要一个一个去修改；使用了指令，则可以直接在data数据模型一键修改。
v-on
为HTML标签绑定事件，在Vue当中创建methods方法。
<head> <title>Vue复习</title> <script src="vue.js"> </script> </head> <body> <div id="app"> <input type="button" value="按钮" v-on:click="chage()"> </div> </body> <script> new Vue({ el:"#app", data:{ message:"Hello world", url:"http://t.csdn.cn/w5tHw" }, methods: { chage:function(){ alert("执行方法"); } } }) </script>
注：事件不再是onclick，而是click，去掉了on。
v-if、v-else-if、v-else
这三个配套使用，用法与 Java中的if、else if、else 一致，一般用于<span>标签中，是进行条件判断。当成立时，则会显露出<span> 文本 </span>中的文本内容。
注：如果不成立，浏览器检查中的元素是不存在该行代码的。
<head> <title>Vue复习</title> <script src="vue.js"> </script> </head> <body> <div id="app"> <span v-if="age<18">未成年</span> <span v-else-if="age>=18&&age<=40">青年</span> <span v-else>中年</span> </body> <script> new Vue({ el:"#app", data:{ age:18; } }) </script>
v-show
作用与v-if等指令一样，但是会显示出 不符合条件的代码行
v-for
循环，遍历，当数据模型data里含有数组时，可以使用
语法格式：<div v-for=" 变量名 in 数组名">{{ 变量名 }}</div>
获取索引：<div v-for=" (变量名,下标名） in 数组名"> {{下标值+1}}:{{ 变量名 }} </div>
三.Vue生命周期
生命周期：指一个对象从创建到销毁的整个过程。
Vue生命周期有8个阶段：每触发一个阶段便会自动执行一个生命周期的方法,也称钩子方法。
| 状态 | 阶段周期 |
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 挂载前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| update | 更新后 |
| beforeDestory | 销毁前 |
| destory | 销毁后 |
Vue生命周期完整过程:
代码示例：
<script> new Vue({ e1:"#app", data:{ //代码 }， mounted(){ //挂载完成时，执行的代码 } updated(){ //更新后，执行的代码 } ..... }) </script>
注：Java程序员只要掌握mounted()方法.
结：Vue主要依赖各种指令，生命周期每一个阶段都有其对应的执行方法。
----------懒惰的tq02
