VUE的使用—JavaWeb

尘开的笔记

已于 2023-03-29 09:05:37 修改

阅读量629

点赞数

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

于 2023-03-28 21:22:06 首次发布

本文链接：https://blog.csdn.net/wwl193206126/article/details/129804067

版权

JavaWeb 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

系列文章目录

JavaWeb中VUE的简单使用

文章目录

系列文章目录
前言
一、VUE快速入门
二、常用指令和生命周期
三、案例
总结

前言

在这里插入图片描述
参考资料
链接：https://pan.baidu.com/s/1VaHce_t3DeTVGV495tLpKg?pwd=1111
提取码：1111

一、VUE快速入门

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>

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

        /*data:function () {
            return{
                username:""
            }
        }*/


    })
</script>
</body>
</html>

二、常用指令和生命周期

在这里插入图片描述

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

</head>
<body>

<div id="app">
    
    
    <!--v-bind的使用-->
    
    <a v-bind:href="url">点击一下</a>

    <a :href="url">点击一下</a>
    <input v-model="url">
    <br />
    
    <!--v-on的使用-->
    
    <input type="button" value="一个按钮" v-on:click="show()" >
    <br />
    <input type="button" value="一个按钮" @click="show()" >

    <br />
    
    <!--v-if的使用-->
    
    <div v-if="count==3">div1</div>
    <div v-else-if="count==4">div2</div>
    <div v-else>div3</div>

    <hr />
    
    
    
    <!--v-show的使用-->
    
    <div v-show="count==3">div v-show</div>
    <br />
    <input v-model="count">
    <br />
    
    
    <!--v-for的使用-->
    
    <div v-for="addr in addrs">
        {{addr}}
    </div>
    <hr />
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}}
    </div>
</div>

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




    })
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>

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

        mounted(){
            alert("加载完成、、、")
        }
    })
</script>
</body>
</html>

三、案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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 v-if="brand.status==0">禁用</td>
            <td v-else>启用</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/brand-demo1/selectAllServlet"
            }).then(function (resp) {
                _this.brands = resp.data;
            })
        }
    })
    /*//1.当页面加载完后，发送Ajax请求
    window.οnlοad=function () {
        //2.发送Ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo1/selectAllServlet"
        }).then(function (resp) {
            //获取数据
            let brands = resp.data;
            let tableData=" <tr>\n" +
                "        <th>序号</th>\n" +
                "        <th>品牌名称</th>\n" +
                "        <th>企业名称</th>\n" +
                "        <th>排序</th>\n" +
                "        <th>品牌介绍</th>\n" +
                "        <th>状态</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>"
            for (let i=0;i<brands.length;i++){
                let brand=brands[i];
                tableData +="<tr align=\"center\">\n" +
                    "        <td>"+(i+1)+"</td>\n" +
                    "        <td>"+brand.brandName+"</td>\n" +
                    "        <td>"+brand.companyName+"</td>\n" +
                    "        <td>"+brand.ordered+"</td>\n" +
                    "        <td>"+brand.description+"</td>\n" +
                    "        <td>"+brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>"
            }

            document.getElementById("brandTable").innerHTML=tableData;
        })
    }*/
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<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" id="description" v-model="brand.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",
        data() {
            return{
                brand:{}
            }
        },
        methods:{
            submitForm:function(){
                //发送Ajax请求，添加
                var _this=this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-demo1/addServlet",
                    data:_this.brand
                }).then(function (resp) {
                    //判断响应数据是否为success
                    if (resp.data=="success"){
                        location.href="http://localhost:8080/brand-demo1/brand.html"
                    }
                })
            }
        }
    })

   /* //1.给按钮绑定事件
    document.getElementById("btn").οnclick=function () {
        //将表单数据转为JSON
        var formData={
            brandName:"",
            companyName:"",
            ordered:"",
            description:"",
            status:""
        }

        //获取表单数据
        let brandName = document.getElementById("brandName").value;

        //设置数据
        formData.brandName=brandName;


        let companyName = document.getElementById("companyName").value;
        formData.companyName=companyName;


        let ordered = document.getElementById("ordered").value;
        formData.ordered=ordered;


        let description = document.getElementById("description").value;
        formData.description=description;


        let status = document.getElementsByName("status");
        for (let i=0;i<status.length;i++){
            if (status[i].checked){
                //
                formData.status=status[i].value
            }
        }

        console.log(formData);

        //2.发送Ajax请求
        axios({
            method:"post",
            url:"http://localhost:8080/brand-demo1/addServlet",
            data:formData
        }).then(function (resp) {
            //判断响应数据是否为success
            if (resp.data=="success"){
                location.href="http://localhost:8080/brand-demo1/brand.html"
            }
        })
    }*/
</script>

</body>
</html>