一、Vue概述
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上
官网：Vue.js (vuejs.org)
MVC和MVVM的区别图例：
二、Vue入门案例
1、新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>
2、在JS代码区域创建Vue核心对象，进行数据绑定
<script> //1.创建vue核心对象 new Vue({ el:"#app", data(){ return{ username:"" } } </script>
3、编写视图
<div id="app"> <input v-model="username"> <!--插值表达式--> {{username}} </div>
代码示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input v-model="username"> <!--插值表达式--> {{username}} </div> <script src="js/vue.js"></script> <script> //1.创建vue核心对象 new Vue({ el:"#app", data(){ return{ username:"" } } }); </script> </body> </html>
执行结果：
三、Vue常用指令
指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。例如v-if,v-for...
常用指令：
| 指令 | 作用 |
| v-bind | 为HTML标签绑定属性值，如设置href,css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-else | |
| v-else-if | |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
v-bind：
<a v-bind:href="url">百度一下</a>
<!-- v-bind可以省略 --> <a :href="url">百度一下</a>
v-model：
<input name="username" v-model="username">
执行结果：
v-on
html：
<input type="button" value="一个按钮" v-on:click="show()"><br> <input type="button" value="一个按钮" @click="show()">
vue：
<script src="js/vue.js"></script> <script> //1.创建vue核心对象 new Vue({ el:"#app", data(){ return{ username:"", url:"https://www.baidu.com" } }, methods:{ show(){ alert("我被点了"); } } }); </script>
执行结果：
v-if：
<div v-if="cont==3">div1</div> <div v-else-if="count==2">div2</div> <div v-else>div3</div>
v-show：
<hr> <div v-show="count==3">div v-show</div> <br>
vue：
<script> //1.创建vue核心对象 new Vue({ el: "#app", data() { return { username: "", url: "https://www.baidu.com", count: 3 } }, methods: { show() { alert("我被点了"); } } }); </script>
执行结果：
v-for：
<div v-for="addr in addrs"> {{addr}}<br> </div> <hr>
加索引：
<div v-for="(addr,i) in addrs"> {{i+1}}--{{addr}}<br> </div>
vue：
<script> //1.创建vue核心对象 new Vue({ el: "#app", data() { return { username: "", url: "https://www.baidu.com", count: 3, addrs:["北京","上海","西安"] } }, methods: { show() { alert("我被点了"); } } }); </script>
执行结果：
四、Vue生命周期
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
| 状态 | 阶段周期 |
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。
发送异步请求，加载数据
示例：
new Vue({ el:"#app", mounted(){ alert("vue挂载完毕，发送异步请求"); } })
执行结果：
