• 【JAVA】Vue

    目录

    【Vue】

    【使用】

    【Vue指令】

    【常用指令】

    【v-bind】

    【v-model】

    【v-on】

    【v-if】

    【v-show】

    【v-for】

    【Vue生命周期】

    【mounted】

    【Element】

    【使用】

    【Element布局】

    【Element组件】

    【案例】

    【Vue】

    【概述】 

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

    【使用】

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

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

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

    1. //创建vue核心对象
    2.     new Vue({
    3.         el: "#app",
    4.         data() {
    5.             return {
    6.                 username: ""
    7.             }
    8.         }
    9.     })

    3、编写视图

    1. <div id="app">
    2.     <input v-model="username">
    3.     
    4.     {{username}}
    5. div>

    【Vue指令】

    【概述】

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

    【常用指令】

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

    【v-bind】

    点击一下或

    点击一下

    【v-model】

    例：

    1. html>
    2. <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <a v-bind:href="url">点击一下a>
    10.     <input v-model="url">
    11. div>
    12. <script src="js/vue.js">script>
    13. <script>
    14.     //创建vue核心对象
    15.     new Vue({
    16.         el: "#app",
    17.         data() {
    18.             return {
    19.                 username: "",
    20.                 url: "https://www.baidu.com"
    21.             }
    22.         }
    23.     })
    24. script>
    25. body>
    26. html>
    指令作用
    v-on为HTML标签绑定事件

    【v-on】

    • html

    • vue

    new Vue({

            el: "#app",

            methods:{

                    show() {

                            alert("我被点了");

                    }

            }

    });

    例：

    1. html>
    2. <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <input type="button" value="一个按钮" v-on:click="show()"><br>
    10. div>
    11. <script src="js/vue.js">script>
    12. <script>
    13.     //创建vue核心对象
    14.     new Vue({
    15.         el: "#app",
    16.         data() {
    17.             return {
    18.                 username: "",
    19.                 url: "https://www.baidu.com"
    20.             }
    21.         },
    22.         methods:{
    23.             show() {
    24.                 alert("我被点了");
    25.             }
    26.         }
    27.     });
    28. script>
    29. body>
    30. html>
    指令作用
    v-if条件性的渲染某元素，判定为true时渲染，否则不渲染
    v-else
    v-else-if
    v-show根据条件展示某元素，区别在于切换的时display属性的值

    【v-if】

    div1

    div2

    div3

    【v-show】

    div-show

    例：

    1. html>
    2. <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.  
    10.     <div v-if="count ==3">div1div>
    11.     <div v-else-if="count ==4">div2div>
    12.     <div v-else>div3div>
    13.     <hr>
    14.     <div v-show="count==2">div-showdiv>
    15.     <br>
    16.     <input v-model="count">
    17.  
    18.  
    19. div>
    20. <script src="js/vue.js">script>
    21. <script>
    22.     //创建vue核心对象
    23.     new Vue({
    24.         el: "#app",
    25.         data() {
    26.             return {
    27.                 username: "",
    28.                 url: "https://www.baidu.com",
    29.                 count: "3"
    30.             }
    31.         },
    32.         methods: {
    33.             show() {
    34.                 alert("我被点了");
    35.             }
    36.         }
    37.     });
    38. script>
    39. body>
    40. html>
    指令作用
    v-for列表渲染，遍历容器的元素或者对象的属性

    【v-for】

             {{adder}}

           

             {{i+1}}--{{adder}}

    例：

    1. html>
    2. <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.  
    10.     <div v-for="adder in address">
    11.         {{adder}}<br>
    12.     div>
    13.     <hr>
    14.     <div v-for="(adder,i) in address">
    15.         {{i+1}}--{{adder}}<br>
    16.     div>
    17.  
    18. div>
    19. <script src="js/vue.js">script>
    20. <script>
    21.     //创建vue核心对象
    22.     new Vue({
    23.         el: "#app",
    24.         data() {
    25.             return {
    26.                 username: "",
    27.                 url: "https://www.baidu.com",
    28.                 count: "3",
    29.                 address:["北京","西安","上海"]
    30.             }
    31.         },
    32.         methods: {
    33.             show() {
    34.                 alert("我被点了");
    35.             }
    36.         }
    37.     });
    38. script>
    39. body>
    40. html>

    【Vue生命周期】

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

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

    【mounted】

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

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

    【作用】

    发送异步请求，加载数据

    例：

    1. html>
    2. <html lang="en" >
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.  
    10. div>
    11. <script src="js/vue.js">script>
    12. <script>
    13.     //创建vue核心对象
    14.     new Vue({
    15.         el: "#app",
    16.         data() {
    17.             return {
    18.                 username: "",
    19.                 url: "https://www.baidu.com",
    20.                 count: "3",
    21.                 address:["北京","西安","上海"]
    22.             }
    23.         },
    24.         methods: {
    25.             show() {
    26.                 alert("我被点了");
    27.             }
    28.         },
    29.         mounted(){
    30.             alert("加载完成")
    31.         }
    32.     });
    33. script>
    34. body>
    35. html>

    【Element】

    【概述】 

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

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

    【官网】

    Element - 网站快速成型工具

    【使用】

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

    2、创建Vue核心对象

    3、官网复制Element组件代码

             删除

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <div id="app">
    9.     <el-row>
    10.         <el-button type="danger">删除el-button>
    11.     el-row>
    12. div>
    13.  
    14. <script src="js/vue.js">script>
    15. <script src="element-ui/lib/index.js">script>
    16. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    17.  
    18. <script>
    19.     new Vue({
    20.         el:"#app"
    21.     })
    22. script>
    23.  
    24. body>
    25. html>

    【Element布局】

    【方式】

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

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         .el-row {
    8.             margin-bottom: 20px;
    9.         }
    10.         .el-col {
    11.             border-radius: 4px;
    12.         }
    13.         .bg-purple-dark {
    14.             background: #99a9bf;
    15.         }
    16.         .bg-purple {
    17.             background: #d3dce6;
    18.         }
    19.         .bg-purple-light {
    20.             background: #e5e9f2;
    21.         }
    22.         .grid-content {
    23.             border-radius: 4px;
    24.             min-height: 36px;
    25.         }
    26.         .row-bg {
    27.             padding: 10px 0;
    28.             background-color: #f9fafc;
    29.         }
    30.     style>
    31. head>
    32. <body>
    33. <div id="app">
    34.     
    35.     <el-row>
    36.         <el-col :span="3"><div class="grid-content bg-purple">div>el-col>
    37.         <el-col :span="3"><div class="grid-content bg-purple-light">div>el-col>
    38.         <el-col :span="3"><div class="grid-content bg-purple">div>el-col>
    39.         <el-col :span="3"><div class="grid-content bg-purple-light">div>el-col>
    40.         <el-col :span="3"><div class="grid-content bg-purple">div>el-col>
    41.         <el-col :span="3"><div class="grid-content bg-purple-light">div>el-col>
    42.         <el-col :span="3"><div class="grid-content bg-purple">div>el-col>
    43.         <el-col :span="3"><div class="grid-content bg-purple-light">div>el-col>
    44.     el-row>
    45. div>
    46. <script src="js/vue.js">script>
    47. <script src="element-ui/lib/index.js">script>
    48. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    49.  
    50. <script>
    51.     new Vue({
    52.         el:"#app"
    53.     })
    54. script>
    55. body>
    56. html>
    • Container布局容器：用于布局的容器组件，方便快速搭建也买你的基本结构

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         .el-header {
    8.             background-color: #B3C0D1;
    9.             color: #333;
    10.             line-height: 60px;
    11.         }
    12.         .el-aside {
    13.             color: #333;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18. <div id="app">
    19.     <el-container style="height: 500px; border: 1px solid #eee">
    20.         <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    21.             <el-menu :default-openeds="['1', '3']">
    22.                 <el-submenu index="1">
    23.                     <template slot="title"><i class="el-icon-message">i>导航一template>
    24.                     <el-menu-item-group>
    25.                         <template slot="title">分组一template>
    26.                         <el-menu-item index="1-1">选项1el-menu-item>
    27.                         <el-menu-item index="1-2">选项2el-menu-item>
    28.                     el-menu-item-group>
    29.                     <el-menu-item-group title="分组2">
    30.                         <el-menu-item index="1-3">选项3el-menu-item>
    31.                     el-menu-item-group>
    32.                     <el-submenu index="1-4">
    33.                         <template slot="title">选项4template>
    34.                         <el-menu-item index="1-4-1">选项4-1el-menu-item>
    35.                     el-submenu>
    36.                 el-submenu>
    37.                 <el-submenu index="2">
    38.                     <template slot="title"><i class="el-icon-menu">i>导航二template>
    39.                     <el-menu-item-group>
    40.                         <template slot="title">分组一template>
    41.                         <el-menu-item index="2-1">选项1el-menu-item>
    42.                         <el-menu-item index="2-2">选项2el-menu-item>
    43.                     el-menu-item-group>
    44.                     <el-menu-item-group title="分组2">
    45.                         <el-menu-item index="2-3">选项3el-menu-item>
    46.                     el-menu-item-group>
    47.                     <el-submenu index="2-4">
    48.                         <template slot="title">选项4template>
    49.                         <el-menu-item index="2-4-1">选项4-1el-menu-item>
    50.                     el-submenu>
    51.                 el-submenu>
    52.                 <el-submenu index="3">
    53.                     <template slot="title"><i class="el-icon-setting">i>导航三template>
    54.                     <el-menu-item-group>
    55.                         <template slot="title">分组一template>
    56.                         <el-menu-item index="3-1">选项1el-menu-item>
    57.                         <el-menu-item index="3-2">选项2el-menu-item>
    58.                     el-menu-item-group>
    59.                     <el-menu-item-group title="分组2">
    60.                         <el-menu-item index="3-3">选项3el-menu-item>
    61.                     el-menu-item-group>
    62.                     <el-submenu index="3-4">
    63.                         <template slot="title">选项4template>
    64.                         <el-menu-item index="3-4-1">选项4-1el-menu-item>
    65.                     el-submenu>
    66.                 el-submenu>
    67.             el-menu>
    68.         el-aside>
    69.  
    70.         <el-container>
    71.             <el-header style="text-align: right; font-size: 12px">
    72.                 <el-dropdown>
    73.                     <i class="el-icon-setting" style="margin-right: 15px">i>
    74.                     <el-dropdown-menu slot="dropdown">
    75.                         <el-dropdown-item>查看el-dropdown-item>
    76.                         <el-dropdown-item>新增el-dropdown-item>
    77.                         <el-dropdown-item>删除el-dropdown-item>
    78.                     el-dropdown-menu>
    79.                 el-dropdown>
    80.                 <span>王小虎span>
    81.             el-header>
    82.  
    83.             <el-main>
    84.                 <el-table :data="tableData">
    85.                     <el-table-column prop="date" label="日期" width="140">
    86.                     el-table-column>
    87.                     <el-table-column prop="name" label="姓名" width="120">
    88.                     el-table-column>
    89.                     <el-table-column prop="address" label="地址">
    90.                     el-table-column>
    91.                 el-table>
    92.             el-main>
    93.         el-container>
    94.     el-container>
    95. div>
    96. <script src="js/vue.js">script>
    97. <script src="element-ui/lib/index.js">script>
    98. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    99.  
    100. <script>
    101.     new Vue({
    102.         el:"#app",
    103.         data() {
    104.             const item = {
    105.                 date: '2016-05-02',
    106.                 name: '王小虎',
    107.                 address: '上海市普陀区金沙江路 1518 弄'
    108.             };
    109.             return {
    110.                 tableData: Array(20).fill(item)
    111.             }
    112.         }
    113.     })
    114. script>
    115. body>
    116. html>

    【Element组件】

    【案例】

    实现如图页面

    例：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>品牌列表title>
    6.     <style>
    7.         .el-table .warning-row {
    8.             background: oldlace;
    9.         }
    10.  
    11.         .el-table .success-row {
    12.             background: #f0f9eb;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17. <div id="app">
    18.  
    19.     
    20.     <el-form :inline="true" :model="brand" class="demo-form-inline">
    21.         <el-form-item label="当前状态">
    22.             <el-select v-model="brand.status" placeholder="当前状态">
    23.                 <el-option label="启用" value="1">el-option>
    24.                 <el-option label="禁用" value="0">el-option>
    25.             el-select>
    26.         el-form-item>
    27.         <el-form-item label="企业名称">
    28.             <el-input v-model="brand.companyName" placeholder="企业名称">el-input>
    29.         el-form-item>
    30.         <el-form-item label="品牌名称">
    31.             <el-input v-model="brand.brandName" placeholder="品牌名称">el-input>
    32.         el-form-item>
    33.         <el-form-item>
    34.             <el-button type="primary" @click="onSubmit">查询el-button>
    35.         el-form-item>
    36.     el-form>
    37.  
    38.     
    39.     <el-row>
    40.         <el-button type="danger" plain>批量删除el-button>
    41.         <el-button type="primary" plain @click="dialogVisible = true">新增el-button>
    42.     el-row>
    43.  
    44.     
    45.     <el-dialog
    46.             title="编辑品牌"
    47.             :visible.sync="dialogVisible"
    48.             width="30%">
    49.         <el-form ref="form" :model="brand" label-width="80px">
    50.             <el-form-item label="品牌名称">
    51.                 <el-input v-model="brand.brandName">el-input>
    52.             el-form-item>
    53.             <el-form-item label="企业名称">
    54.                 <el-input v-model="brand.companyName">el-input>
    55.             el-form-item>
    56.             <el-form-item label="排序">
    57.                 <el-input v-model="brand.ordered">el-input>
    58.             el-form-item>
    59.             <el-form-item label="备注">
    60.                 <el-input type="textarea" v-model="brand.description">el-input>
    61.             el-form-item>
    62.             <el-form-item label="状态">
    63.                 <el-switch v-model="brand.status"
    64.                            active-value="1"
    65.                            inactive-value="0">el-switch>
    66.             el-form-item>
    67.             <el-form-item>
    68.                 <el-button type="primary" @click="addBrand">提 交el-button>
    69.                 <el-button @click="dialogVisible = false">取 消el-button>
    70.             el-form-item>
    71.         el-form>
    72.         span>
    73.     el-dialog>
    74.  
    75.     
    76.     <template>
    77.         <el-table
    78.                 :data="tableData"
    79.                 style="width: 100%"
    80.                 :row-class-name="tableRowClassName"
    81.                 @selection-change="handleSelectionChange">
    82.             <el-table-column
    83.                     type="selection"
    84.                     width="55">
    85.             el-table-column>
    86.             <el-table-column
    87.                     type="index"
    88.                     width="50">
    89.             el-table-column>
    90.             <el-table-column
    91.                     prop="brandName"
    92.                     label="品牌名称"
    93.                     align="center">
    94.             el-table-column>
    95.             <el-table-column
    96.                     prop="companyName"
    97.                     label="企业名称"
    98.                     align="center">
    99.             el-table-column>
    100.             <el-table-column
    101.                     prop="ordered"
    102.                     label="排序"
    103.                     align="center">
    104.             el-table-column>
    105.             <el-table-column
    106.                     prop="status"
    107.                     label="当前状态"
    108.                     align="center">
    109.             el-table-column>
    110.             <el-table-column
    111.                     label="操作"
    112.                     align="center">
    113.                 <el-row>
    114.                     <el-button type="primary">修改el-button>
    115.                     <el-button type="danger">删除el-button>
    116.                 el-row>
    117.             el-table-column>
    118.  
    119.         el-table>
    120.     template>
    121.  
    122.     
    123.     <el-pagination
    124.             @size-change="handleSizeChange"
    125.             @current-change="handleCurrentChange"
    126.             :current-page="currentPage4"
    127.             :page-sizes="[5,10,15,20]"
    128.             :page-size="5"
    129.             layout="total, sizes, prev, pager, next, jumper"
    130.             :total="400">
    131.     el-pagination>
    132.  
    133. div>
    134.  
    135. <script src="js/vue.js">script>
    136. <script src="element-ui/lib/index.js">script>
    137. <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    138.  
    139. <script>
    140.  
    141.     new Vue({
    142.         el: "#app",
    143.         methods: {
    144.             tableRowClassName({row, rowIndex}) {
    145.                 if (rowIndex === 1) {
    146.                     return 'warning-row';
    147.                 } else if (rowIndex === 3) {
    148.                     return 'success-row';
    149.                 }
    150.                 return '';
    151.             },
    152.             //复选框选中后执行的方法
    153.             handleSelectionChange(val) {
    154.                 this.multipleSelection = val;
    155.                 console.log(this.multipleSelection);
    156.             },
    157.             //查询方法
    158.             onSubmit() {
    159.                 console.log(this.brand);
    160.             },
    161.             //添加数据
    162.             addBrand() {
    163.                 console.log(this.brand);
    164.             },
    165.             handleSizeChange(val) {
    166.                 console.log(`每页 ${val} 条`);
    167.             },
    168.             handleCurrentChange(val) {
    169.                 console.log(`当前页: ${val}`);
    170.             }
    171.         },
    172.         data() {
    173.             return {
    174.                 //当前页码
    175.                 currentPage: 4,
    176.                 //添加数据对话框是否展示的标记
    177.                 dialogVisible: false,
    178.                 //品牌数据模型
    179.                 brand: {
    180.                     status: '',
    181.                     brandName: '',
    182.                     companyName: '',
    183.                     id: '',
    184.                     ordered: '',
    185.                     description: ''
    186.                 },
    187.                 //复选框选中数据集合
    188.                 multipleSelection: [],
    189.                 //表格数据
    190.                 tableData: [{
    191.                     brandName: '小米',
    192.                     companyName: '小米科技有限公司',
    193.                     ordered: '100',
    194.                     status: "1"
    195.                 }, {
    196.                     brandName: '小米',
    197.                     companyName: '小米科技有限公司',
    198.                     ordered: '100',
    199.                     status: "1"
    200.                 }, {
    201.                     brandName: '小米',
    202.                     companyName: '小米科技有限公司',
    203.                     ordered: '100',
    204.                     status: "1"
    205.                 }, {
    206.                     brandName: '小米',
    207.                     companyName: '小米科技有限公司',
    208.                     ordered: '100',
    209.                     status: "1"
    210.                 }]
    211.             }
    212.         }
    213.     })
    214. script>
    215.  
    216. body>
    217. html>
  • 相关阅读:
    武汉便宜的ov通配符https证书
    halcon二维码识别简单案例
    NIFI关于Parameter Contexts的使用
    PostgreSQL部署与配置
    c++day6
    扫普通二维码进入小程序、链接进入小程序
    Python 霸榜的一周，又有什么新 AI 力作呢？「GitHub 热点速览」
    创建Zookeeper伪集群启动失败
    No module named ‘PyQt5.QtWebEngineWidgets‘kn-----已解决
    如何进入 mysql?
  • 原文地址：https://blog.csdn.net/huihu__/article/details/126344005