【JAVA】Vue

Lx_Hy_

已于 2022-08-19 16:02:15 修改

阅读量590

点赞数 1

分类专栏： JavaWeb 文章标签： vue.js vue

于 2022-08-18 16:01:21 首次发布

本文链接：https://blog.csdn.net/huihu__/article/details/126344005

版权

JavaWeb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

【Vue】

【概述】

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

【使用】

1、新建HTML页面，引入Vue.js文件

<script src="js/vue.js"></script>

2、在JS代码区域，创建Vue核心对象，进行数据绑定

//创建vue核心对象
    new Vue({
        el: "#app",
        data() {
            return {
                username: ""
            }
        }
    })

3、编写视图

<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>

【Vue指令】

【概述】

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

【常用指令】

指令	作用
v-bind	为HTML标签绑定属性值，如设置href，css样式等
v-model	在表单元素上创建双向数据绑定

【v-bind】

<a v-bind:href="url">点击一下</a>或

<a :href="url">点击一下</a>

【v-model】

<input name="username" v-model="username">

例：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a v-bind:href="url">点击一下</a>
    <input v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
    //创建vue核心对象
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",
                url: "https://www.baidu.com"
            }
        }
    })
</script>
</body>
</html>

指令	作用
v-on	为HTML标签绑定事件

【v-on】

html

<input type="button" value="一个按钮" v-on:click="show()">

<input type="button" value="一个按钮" @click="show()">

new Vue({

        el: "#app",

        methods:{

                show() {

                        alert("我被点了");

                }

        }

});

例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="一个按钮" v-on:click="show()"><br>
</div>
<script src="js/vue.js"></script>
<script>
    //创建vue核心对象
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",
                url: "https://www.baidu.com"
            }
        },
        methods:{
            show() {
                alert("我被点了");
            }
        }
    });
</script>
</body>
</html>

指令	作用
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的时display属性的值

【v-if】

<div v-if="count ==3">div1</div>

<div v-else-if="count ==4">div2</div>

<div v-else>div3</div>

【v-show】

<div v-show="count==2">div-show</div>

例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-if="count ==3">div1</div>
    <div v-else-if="count ==4">div2</div>
    <div v-else>div3</div>
    <hr>
    <div v-show="count==2">div-show</div>
    <br>
    <input v-model="count">


</div>
<script src="js/vue.js"></script>
<script>
    //创建vue核心对象
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",
                url: "https://www.baidu.com",
                count: "3"
            }
        },
        methods: {
            show() {
                alert("我被点了");
            }
        }
    });
</script>
</body>
</html>

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性

【v-for】

<div v-for="adder in address">

{{adder}}<br>

</div>

<div v-for="(adder,i) in address">



{{i+1}}--{{adder}}<br>

</div>

例：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-for="adder in address">
        {{adder}}<br>
    </div>
    <hr>
    <div v-for="(adder,i) in address">
        {{i+1}}--{{adder}}<br>
    </div>

</div>
<script src="js/vue.js"></script>
<script>
    //创建vue核心对象
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",
                url: "https://www.baidu.com",
                count: "3",
                address:["北京","西安","上海"]
            }
        },
        methods: {
            show() {
                alert("我被点了");
            }
        }
    });
</script>
</body>
</html>

【Vue生命周期】

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

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

【mounted】

挂载完成，Vue初始化成功，HTML页面渲染成功。

new Vue({
    el:"#app",
    mounted(){
        alert("vue 挂载完毕，发送异步请求");
    }
});

【作用】

发送异步请求，加载数据

例：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>
<script src="js/vue.js"></script>
<script>
    //创建vue核心对象
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",
                url: "https://www.baidu.com",
                count: "3",
                address:["北京","西安","上海"]
            }
        },
        methods: {
            show() {
                alert("我被点了");
            }
        },
        mounted(){
            alert("加载完成")
        }
    });
</script>
</body>
</html>

【Element】

【概述】

Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页

组件：组成网页的部件，例如超链接、按钮、图片、表格等等~

【官网】

Element - 网站快速成型工具

【使用】

1、引入Element的css、js文件和Vue.js

<script src="js/vue.js"></script>

<script src="element-ui/lib/index.js"></script>

<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

2、创建Vue核心对象

<script>

         new Vue({

                 el:"#app"

                 })

</script>

3、官网复制Element组件代码

<el-row>

<el-button type="danger">删除</el-button>

</el-row>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <el-row>
        <el-button type="danger">删除</el-button>
    </el-row>
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app"
    })
</script>

</body>
</html>

【Element布局】

【方式】

Layout布局：通过基础的24分栏，迅速简便地创建布局

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-row {
            margin-bottom: 20px;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <!--
        添加一行，8个格子
    -->
    <el-row>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

Container布局容器：用于布局的容器组件，方便快速搭建也买你的基本结构

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }
        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航一</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="2-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item)
            }
        }
    })
</script>
</body>
</html>

【Element组件】

【案例】

实现如图页面

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">

    <!--表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
            <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--按钮-->
    <el-row>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>

    <!--添加数据的对话框-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">提 交</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </el-form-item>
        </el-form>
        </span>
    </el-dialog>

    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    label="排序"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="当前状态"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <el-row>
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">删除</el-button>
                </el-row>
            </el-table-column>

        </el-table>
    </template>

    <!--分页工具条-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5,10,15,20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>

</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>

    new Vue({
        el: "#app",
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            //查询方法
            onSubmit() {
                console.log(this.brand);
            },
            //添加数据
            addBrand() {
                console.log(this.brand);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        data() {
            return {
                //当前页码
                currentPage: 4,
                //添加数据对话框是否展示的标记
                dialogVisible: false,
                //品牌数据模型
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id: '',
                    ordered: '',
                    description: ''
                },
                //复选框选中数据集合
                multipleSelection: [],
                //表格数据
                tableData: [{
                    brandName: '小米',
                    companyName: '小米科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '小米',
                    companyName: '小米科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '小米',
                    companyName: '小米科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '小米',
                    companyName: '小米科技有限公司',
                    ordered: '100',
                    status: "1"
                }]
            }
        }
    })
</script>

</body>
</html>