功能替代JavaScript和jQuery，基于JavaScript实现的前端框架
方法一：通过cdn链接引入最新版本的vue（可能会慢些）
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>方法二：将vue库下载到本地，通过相对路径引入
<head>
<script src="js/vue/vue.js"></script>
</head><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的success
axios.post("login",this.user).then(res =>{
//res后台返回的结果
console.log(res)
})
}
}
});
</script>
<div id="app">
<p>{{ message }}</p>
</div>
{{message}}是一个模板表达式，它会被Vue实例的message数据所替代
发请求的工具，作用与$.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){}基于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>获取配置文件的地址：(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>Vue.js框架实现的一项核心功能就是“双向数据绑定”，所谓双向数据绑定就是指View（视图）和Model（模型）的数据相互同步。（双向数据绑定通过v-model来实现）
先为绑定的元素添加value属性，value与Vue实例中指定的数据绑定，再为元素添加一个事件监听器，当用户输入时触发并更新value值，从而更新Vue实例中的数据对象
通过v-model绑定的数据会在文本输入框改变时同步更新Vue数据对象，但我们一般想要的是用户输入完毕、光标离开输入框时再更新数据，这就要用到 .lazy修饰符
<input v-model.lazy="message" type="text">
<input v-model.number="quantity" type="number">
注意：如果用户输入的值无法转换为有效的数值，数据属性会变成NaN
<input type="text" v-model.trim="message">
就是选择第一个决定第二个里有哪些项，这样嵌套下去
buildings: [{
id: '1',
label: '1栋',
units: [{id: '1',
label: '1单元',
rooms: [
{id: '1', label: '1-1-1'},
],
}, {id: '2',
label: '2单元',
rooms: [
{id: '1', label: '1-2-1'},
{id: '2', label: '1-2-2'},
],
},
},<el-select v-model="building" filterable placeholder="请选择楼栋" @change="changeBuilding()">
<el-select v-model="unit" filterable placeholder="请选择单元" @change="changeUnit()">changeBuilding :function (){
console.log(this.building)
//遍历楼栋比较id
for (const item of this.buildings) {
if(this.building==item.id){
this.units = item.units;
break;
}
}
},
changeUnit:function (){
for (const item of this.units) {
if(this.unit==item.id){
this.rooms = item.rooms;
break;
}
}
},