Vue&Element

农专猿

已于 2023-04-14 08:48:10 修改

阅读量64

点赞数

分类专栏：后端前端文章标签： vue.js javascript 前端

于 2023-04-07 19:46:25 首次发布

本文链接：https://blog.csdn.net/m0_73886108/article/details/129975565

版权

后端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

Vue

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

快速入门

Vue 使用起来是比较简单的，总共分为如下三步：

新建 HTML 页面，引入 Vue.js文件
```
<script src="js/vue.js"></script>
```
在JS代码区域，创建Vue核心对象，进行数据绑定
```
new Vue({
    el: "#app",
    data() {
        return {
            username: ""
        }
    }
});
```
创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
- el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
- data ：用来定义数据模型
- methods ：用来定义函数。这个我们在后面就会用到
编写视图
```
<div id="app">
    <input name="username" v-model="username" >
    {{username}}
</div>
```
{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

Vue 指令

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

常用的指令有：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-else-if
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind

该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化

例如：
```
<a v-bind:href="url">百度一下</a>
```
上面的 v-bind:" 可以简化写成 : ，如下：
```

<a :href="url">百度一下</a>
```
v-model

该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如：
```
<input name="username" v-model="username">
```
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<div id="app">
   <a v-bind:href="url">点击一下</a>
   <a :href="url">点击一下</a>
   <input v-model="url">
</div>

<script src="js/vue.js"></script>
<script>
   //1. 创建Vue核心对象
   new Vue({
       el:"#app",
       data(){
           return {
               username:"",
               url:"https://www.baidu.com"
           }
       }
   });
</script>
</body>
</html>

通过浏览器打开上面页面，并且使用检查查看超链接的路径，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据
在这里插入图片描述

v-on 指令

我们在页面定义一个按钮，并给该按钮使用 v-on 指令绑定单击事件，html代码如下

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

而使用 v-on 时还可以使用简化的写法，将 v-on: 替换成 @，html代码如下

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

上面代码绑定的 show() 需要在 Vue 对象中的 methods 属性中定义出来

new Vue({
    el: "#app",
    methods: {
        show(){
            alert("我被点了");
        }
    }
});

注意：v-on: 后面的事件名称是之前原生事件属性名去掉on。

例如：

单击事件：事件属性名是 onclick，而在vue中使用是 v-on:click
失去焦点事件：事件属性名是 onblur，而在vue中使用时 v-on:blur

整体页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="一个按钮" v-on:click="show()"><br>
    <input type="button" value="一个按钮" @click="show()">
</div>
<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        
        methods:{
            show(){
                alert("我被点了...");
            }
        }
    });
</script>
</body>
</html>

条件判断指令

接下来通过代码演示一下。在 Vue中定义一个 count 的数据模型，如下

//1. 创建Vue核心对象
new Vue({
    el:"#app",
    data(){
        return {
            count:3
        }
    }
});

现在要实现，当 count 模型的数据是3时，在页面上展示 div1 内容；当 count 模型的数据是4时，在页面上展示 div2 内容；count 模型数据是其他值时，在页面上展示 div3。这里为了动态改变模型数据 count 的值，再定义一个输入框绑定 count 模型数据。html 代码如下：

<div id="app">
    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <hr>
    <input v-model="count">
</div>

整体页面代码如下：

<!DOCTYPE html>
<html lang="en">
<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>
    <input v-model="count">
</div>

<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                count:3
            }
        }
    });
</script>
</body>
</html>

通过浏览器打开页面并在输入框输入不同的值，效果如下

然后我们在看看 v-show 指令的效果，如果模型数据 count 的值是3时，展示 div v-show 内容，否则不展示，html页面代码如下

<div v-show="count == 3">div v-show</div>
<br>
<input v-model="count">

浏览器打开效果如下：

通过上面的演示，发现 v-show 和 v-if 效果一样，那它们到底有什么区别呢？我们根据浏览器的检查功能查看源代码

通过上图可以看出 v-show 不展示的原理是给对应的标签添加 display css属性，并将该属性值设置为 none ，这样就达到了隐藏的效果。而 v-if 指令是条件不满足时根本就不会渲染。

v-for 指令

这个指令看到名字就知道是用来遍历的，该指令使用的格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}
</标签>

注意：需要循环那个标签，v-for 指令就写在那个标签上。

如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>

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

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

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                addrs:["北京","上海","西安"]
            }
        }
    });
</script>
</body>
</html>

通过浏览器打开效果如下

1.4 生命周期

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 mounted 就行了。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。

案例

需求

使用 Vue 简化我们在前一天ajax学完后做的品牌列表数据查询和添加功能

此案例只是使用 Vue 对前端代码进行优化，后端代码无需修改。

查询所有功能

在 brand.html 页面引入 vue 的js文件
```
<script src="js/vue.js"></script>
```

创建 Vue 对象

在 Vue 对象中定义模型数据
在钩子函数中发送异步请求，并将响应的数据赋值给数据模型

new Vue({
    el: "#app",
    data(){
        return{
            brands:[]
        }
    },
    mounted(){
        // 页面加载完成后，发送异步请求，查询数据
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).hen((resp) => {
             this.brands = resp.data;
        })
    }
})

修改视图

定义 <div id="app"></div> ，指定该 div 标签受 Vue 管理
将 body 标签中所有的内容拷贝作为上面 div 标签中
删除表格的多余数据行，只留下一个

在表格中的数据行上使用 v-for 指令遍历

<tr v-for="(brand,i) in brands" align="center">
    <td>{{i + 1}}</td>
    <td>{{brand.brandName}}</td>
    <td>{{brand.companyName}}</td>
    <td>{{brand.ordered}}</td>
    <td>{{brand.description}}</td>
    <td>{{brand.statusStr}}</td>
    <td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>

Service

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用Service查询
        List<Brand> brands = brandService.selectAll();

        //2. 将集合转换为JSON数据   序列化
        String jsonString = JSON.toJSONString(brands, SerializerFeature.IgnoreErrorGetter);

        //3. 响应数据
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

新增品牌

在这里插入图片描述

注意：前端代码的关键点在于使用 v-model 指令给标签项绑定模型数据，利用双向绑定特性，在发送异步请求时提交数据。

在 addBrand.html 页面引入 vue 的js文件
```
<script src="js/vue.js"></script>
```

创建 Vue 对象

在 Vue 对象中定义模型数据 brand
定义一个 submitForm() 函数，用于给 提交 按钮提供绑定的函数
在 submitForm() 函数中发送 ajax 请求，并将模型数据 brand 作为参数进行传递

new Vue({
    el: "#app",
    data(){
        return {
            brand:{}
        }
    },
    methods:{
        submitForm(){
            // 发送ajax请求，添加
            var _this = this;
            axios({
                method:"post",
                url:"http://localhost:8080/brand-demo/addServlet",
                data:_this.brand,
                contentType:'application/json;charset=utf-8'
            }).then(function (resp) {
                // 判断响应数据是否为 success
                if(resp.data == "success"){
                    location.href = "http://localhost:8080/brand-demo/brand.html";
                }
            })

        }
    }
})

修改视图

定义 <div id="app"></div> ，指定该 div 标签受 Vue 管理
将 body 标签中所有的内容拷贝作为上面 div 标签中

给每一个表单项标签绑定模型数据。最后这些数据要被封装到 brand 对象中

<div id="app">
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        状态：
        <input type="radio" name="status" v-model="brand.status" value="0">禁用
        <input type="radio" name="status" v-model="brand.status" value="1">启用<br>

        <input type="button" id="btn" @click="submitForm" value="提交">
    </form>
</div>

Element

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

Element 提供了很多组件（组成网页的部件）供我们使用。例如超链接、按钮、图片、表格等等~

快速入门

将资源 04-资料\02-element 下的 element-ui 文件夹直接拷贝到项目的 webapp 下。目录结构如下

创建页面，并在页面引入Element 的css、js文件和 Vue.js

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

.创建Vue核心对象

Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象
```
<script>
    new Vue({
        el:"#app"
    })
</script>
```
官网复制Element组件代码

在左菜单栏找到 Button 按钮 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，将这些代码拷贝到我们自己的页面即可。

Element 布局

Element 提供了两种布局方式，分别是：

Layout 布局
Container 布局容器

Layout 局部

通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。

在这里插入图片描述

在左菜单栏找到 Layout 布局 ，然后找到自己喜欢的按钮样式，点击 显示代码 ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 head 标签内，将html标签拷贝到 <div id="app"></div> 标签内。

Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。

如下图是官网提供的 Container 布局容器实例：

该效果代码中包含了样式、页面标签、模型数据。将里面的样式 <style> 拷贝到我们自己页面的 head 标签中；将html标签拷贝到 <div id="app"></div> 标签中，再将数据模型拷贝到 vue 对象的 data() 中。

Element组件

在这里插入图片描述

完整页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <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="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            background>
    </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>

农专猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue&Element

通过浏览器打开上面页面，并且使用检查查看超链接的路径，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据。生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。用于布局的容器组件，方便快速搭建页面的基本结构。，在下面就会展示出对应的代码，将这些代码拷贝到我们自己的页面即可。，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。
复制链接

扫一扫

专栏目录