VUE基础知识（JAVA后端入门篇）

Vue是一套前端框架，免除原生JavaScriptr中的DOM操作，简化书写
基于MVVM(Model–View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

请添加图片描述

Vue快速入门

新建HTML页面，引入vue.js文件
```
<script src="js/vue.js"></script>
```
在JS代码区域，创建Vue核心对象，进行数据绑定
```
new Vue({el:"#app",data(){return{username:""}}
});
```

编写视图

<div id="app"><input name="username" v-model="username">{{username}}
</div>

Vue常用指令

指令：HTML标签上带有V-前缀的特殊属性，不同指令具有不同含义。

常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href,css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind: 为HTML标签绑定属性值，如设置href,css样式等

<a v-bind:href="url">百度一下</a>
<!--v-bind可以省略
-->

v-on: 为HTML标签绑定事件

<input type="button" value="一个按钮" v-on:click="show()">
<input type="button" value="一个按钮" @click="show()">
new Vue({el:"#app",methods:{show(){alert("我被点了");}		}
});

v-if & v-show：

<div v-if= "count==3">div1</div>
<div v-else-if="count==2">div2</div>
<div v-else>div3</div>
<div v-show="count==3">div4</div>

v-for

<div v-for="addr in addrs">{{addr}}<br>
</div><!--加索引-->
<div v-for="(addr,i) in addrs"><!-i表示索引，从0开始->{{i +1}}:{{addr}}<br>
</div>

Vue生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态阶段的周期
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后
mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。
- 发送异步请求，加载数据
```
new Vue({el:"#app",mounted(){alet("vue挂载完毕，发送异步请求"); }
});
```

状态	阶段的周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后