vue/element简单使用

VUE框架

image-20220413143757081

快速入门

首先在js文件夹里引入vue.js

image-20220413145019531

在要用到的页面导入（和axios一样）

<body>
<div id="app">
    <input v-model="username">
<!--    插值表达式-->
    {{username}}
</div>
<script src="js/vue.js"></script>
<script>
    //.创建vue的核心对象
    new Vue({
       el:"#app" ,
        /*data:function (){
           return{
               name:""
           }
        }*/
        data(){
            return{
                username:""
            }
        }
    });
</script>
</body>

这就是一个快速入门

常用指令

image-20220413145213084

image-20220413145620942

image-20220413145853445

<body>
<div id="app">
    <div v-if="count==3">div1</div>
    <div v-else-if="count==4">div2</div>
    <div v-else>div3</div>
    <input v-model="count">
<!--    插值表达式-->
    {{username}}
</div>
<script src="js/vue.js"></script>
<script>
    //.创建vue的核心对象
    new Vue({
       el:"#app" ,
        /*data:function (){
           return{
               name:""
           }
        }*/
        data(){
            return{
                username:"",
                count:3
            }
        }
    });
</script>
</body>

image-20220413150646303

生命周期

image-20220413151047901

要知道

mounted：挂在完成，Vue初始化成功，HTML页面渲染成功

发送异步请求，加载数据

案例-优化查询所有&新增品牌

image-20220413152059005

<div id="app">
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <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>
 
</table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
        return{
            brands:[]
        }
        },
 
        mounted(){
            //.页面加载完成之后，发送异步请求，查询数据
            var _this=this
            axios({
                method:"get",
                url:"http://localhost:8080/cookie-demo/selectAllServlet"
 
            }).then(function (resp){
               _this. brands= resp.data;
            })
        }
    })
</script>

简单了太多了，这里要小心this的作用域，如果要使用另一个方法中的this可以使用引入变量的方式

image-20220413154216975

<body>
<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" v-model="brand.description" id="description" name="description"></textarea><br>
    状态：
    <input type="radio" v-model="brand.status" name="status" value="0" >禁用
    <input type="radio" v-model="brand.status" name="status" value="1">启用<br>
 
    <input type="button" id="btn" @click="submitForm" value="提交">
</form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        methods:{
 
            submitForm(){
                var _this=this
                //.发送ajax请求完成添加
                axios({
                    method:"post",
                    url:"http://localhost:8080/cookie-demo/addServlet",
                    data:_this.brand
                }).then(function (resp){
                    //.判断响应数据是否为success
                    if(resp.data=="success"){
                        location.href="http://localhost:8080/cookie-demo/brand.html"
                    }
                })
            }
        },
        data(){
            return{
                brand:{},
 
            }
        },
        mounted(){
 
        }
    })

ELEMENT

快速搭建网页的工具，要用的组件直接到

快速入门

首先导入包在webapp下

image-20220414194343844

再导入vue.js文件在js目录，也可以通过网上的链接导入

image-20220414194448718

再到要用到的界面导入依赖链接，写好vue模板

image-20220414194543821

随后在div中就可以去官网需要的代码了

只是注意代码要分开放到不同的模块，html的放到div中，style放到style中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
 
    <el-row>
<!--        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>-->
        <el-button type="danger">删除</el-button>
    </el-row>
 
 <!--   <el-row>
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
-->
    <el-row>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </el-row>
 
    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></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",
        data(){
            return{
 
            }
        },
        mounted(){
 
        }
    })
</script>
</body>
</html>
posted @   Ember00  阅读(247)  评论(0)  编辑  收藏  举报
相关博文：
·  spring5入门笔记
·  WEB综合案例
·  Vue前端框架基础+Element的使用
·  13.VUE
·  Vue 快速入门
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示