Vue框架
- Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
- 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
- 官网：https://cn.vuejs.org
关于MVVM：MVC思想下只能实现模型到视图的单向展示，而MVVM将视图与模型绑定，视图会自动随着模型的改变而改变。
基本使用
- 新建HTML页面，引入vue的js文件：
<script src="js/vue.js"></script> - 在JS代码区域创建Vue核心对象，进行数据绑定
- 编写视图
进行数据绑定的代码如下：
new Vue({
el:"#app",
date() {
return {
username:""
}
}
});
视图代码如下：
<div id="app">
<input name="username" v-model="username">
<!-- 差值表达式 -->
</div>
Vue常见指令
- 指令：HTML标签上带有
v-特殊前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for等 - 常用指令如下：
| 指令 | 作用 |
|---|---|
| v-bind | 为HTML标签绑定属性值，如设置href，css样式等，在书写时可以省略v-bind，只留下:href="url" |
| v-model | 在表单上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件，事件对应的函数要写到vue核心对象中的methods中，另外v-on:可以直接简写为@ |
| v-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-else | |
| v-else-if | |
| v-show | 根据条件展示某元素，区别在于切换的时display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
Vue生命周期
- 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)
| 状态 | 阶段周期 |
|---|---|
| beforeCreate | 创建前 |
| creat | 创建后 |
| beforeMount | 载入前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestroy | 销毁前 |
| destroyed | 销毁后 |
这些钩子的使用方法就是在Vue定义中写入同名方法，例如：
new Vue({
el:"#app",
date() {
return {
username:""
}
},
mounted() {
alert("vue挂载完成，发送异步请求");
// 这里的代码会在页面完成加载时自动完成
}
});
