07.JavaWeb-Vue+elementUI

LB_bei

已于 2023-07-06 16:37:33 修改

阅读量2.1k

点赞数

分类专栏：前端 JavaEE 文章标签： spring mvc java

于 2023-06-09 14:45:38 首次发布

本文链接：https://blog.csdn.net/LB_bei/article/details/131095371

版权

JavaEE 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

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的success
                axios.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">

1.5 实现联结选择框

就是选择第一个决定第二个里有哪些项，这样嵌套下去

1.5.1 将数据嵌套起来

    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'},
            ],
        }, 
    },

1.5.2 为外层数据对应的元素添加@change事件

<el-select v-model="building" filterable placeholder="请选择楼栋" @change="changeBuilding()">

<el-select v-model="unit" filterable placeholder="请选择单元" @change="changeUnit()">

1.5.3 设计事件触发的函数

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;
            }
        }
    },

LB_bei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
07.JavaWeb-Vue+elementUI

1.在webapp中创建css/vue与js文件夹用来存储，vue中放一个element-index.css文件和一个fonts文件夹里面有两个字体相关文件，js中放一个vue文件夹里面有axios.min.js和elemant-index.js和vue.js。先为绑定的元素添加value属性，value与Vue实例中指定的数据绑定，再为元素添加一个事件监听器，当用户输入时触发并更新value值，从而更新Vue实例中的数据对象。里面有很多已经做好的很好看的也好用的组件（按钮、输入框、开关。
复制链接

扫一扫

专栏目录