07.JavaWeb-Vue+elementUI
1.Vue
功能替代JavaScript和jQuery，基于JavaScript实现的前端框架
1.1配置Vue
1.1.1引入vue库
方法一：通过cdn链接引入最新版本的vue（可能会慢些）
<head><script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>方法二：将vue库下载到本地，通过相对路径引入
<head><script src="js/vue/vue.js"></script>
</head>1.1.2创建vue实例
<script>// 创建Vue对象new Vue({el: '#app', //vue作用于指定的元素及其子元素data: { //用来声明vue的属性、页面上需要的东西user:{ account:"",password:""}},methods:{ //元素触发的方法login: function (){console.log("账号"+this.user.account)console.log("密码"+this.user.password)//利用axios发送请求，then等同于ajax的successaxios.post("login",this.user).then(res =>{//res后台返回的结果console.log(res)})}}});
</script>
1.1.3创建vue模板
<div id="app"><p>{{ message }}</p>
</div>
{{message}}是一个模板表达式，它会被Vue实例的message数据所替代
1.2 axios
发请求的工具，作用与$.ajax一致
axios.post("login",this.user).then(res =>{//res后台返回的结果console.log(res)alert(res.data)
})注意：axios数据提交的是一个字符串，ajax提交的是对象，可以加注解将字符串转换成注解
//@RequestBody将json格式的字符串转换为对象
public void login(@RequestBody User user){}1.3 element-ui
基于vue的组件库，地址：(Element - The world's most popular Vue UI framework)
里面有很多已经做好的很好看的也好用的组件（按钮、输入框、开关。。。）
<div id="app"><el-row>
<!-- span指定当前行分几列--><el-col :span="6"><el-input v-model="user.account" placeholder="请输入账号"></el-input><el-input v-model="user.password" placeholder="请输入密码" show-password></el-input><el-button type="primary" icon="el-icon-delete-solid" circle></el-button><el-button type="primary" @click="login()" icon="el-icon-ice-cream- square" round>登录</el-button></el-col></el-row>
<!-- 获取账号，并实时显示在页面-->
<!-- <p>{{account}}</p>-->
</div>1.3.1配置使用环境
获取配置文件的地址：(UNPKG - element-ui)
1.在webapp中创建css/vue与js文件夹用来存储，vue中放一个element-index.css文件和一个fonts文件夹里面有两个字体相关文件，js中放一个vue文件夹里面有axios.min.js和elemant-index.js和vue.js
2.在页面head中连接这些文件，并配置vue
<head><script src="js/vue/vue.js"></script><script src="js/vue/axios.min.js"></script><link rel="stylesheet" href="css/vue/element-index.css"><script src="js/vue/element-index.js"></script>
</head>3.创建elementUI的组件
<div id="app"><el-row>
<!-- span指定当前行分几列--><el-col :span="6"><el-input v-model="user.account" placeholder="请输入账号"></el-input><el-input v-model="user.password" placeholder="请输入密码" show-password></el-input><el-button type="primary" icon="el-icon-delete-solid" circle></el-button><el-button type="primary" @click="login()" icon="el-icon-ice-cream- square" round>登录</el-button></el-col></el-row>
<!-- 获取账号，并实时显示在页面-->
<!-- <p>{{account}}</p>-->
</div>4.创建Vue对象
要想使用elementUI的组件，还需要创建Vue对象
<script>//创建vue对象new Vue({el:"#app", //vue作用于指定的元素及其子元素})
</script>1.4 双向数据绑定
Vue.js框架实现的一项核心功能就是“双向数据绑定”，所谓双向数据绑定就是指View（视图）和Model（模型）的数据相互同步。（双向数据绑定通过v-model来实现）
1.4.1 v-model原理*
先为绑定的元素添加value属性，value与Vue实例中指定的数据绑定，再为元素添加一个事件监听器，当用户输入时触发并更新value值，从而更新Vue实例中的数据对象
1.4.2 延迟更新数据
通过v-model绑定的数据会在文本输入框改变时同步更新Vue数据对象，但我们一般想要的是用户输入完毕、光标离开输入框时再更新数据，这就要用到 .lazy修饰符
<input v-model.lazy="message" type="text">
1.4.3 将用户输入的值自动转为数值类型（Number）
<input v-model.number="quantity" type="number">
注意：如果用户输入的值无法转换为有效的数值，数据属性会变成NaN
1.4.4 删除文本输入框内容首尾空格
<input type="text" v-model.trim="message">