13.VUE

发布时间：2023-01-09 文章分类：编程知识 投稿人：王小丽 字号： 默认 | 大 | 超大 打印

VUE

笔记目录：(https://www.cnblogs.com/wenjie2000/p/16378441.html)

视频教程(P146~P148)

本篇是使用的vue2。虽然vue3.x已经出了，目前但对于后端人员来说了解一些vue2就足够了。不需要过于深入学习

13.VUE

Vue快速入门

首先要在IDEA中下载Vue.js插件（File>Setting>Plugins）。如果不下，后续在html中使用vue不但代码没有提示和高亮，还会报错（实际上能正常使用没有问题）。

  1. 新建HTML页面，引入vue.js文件（我这里用的是vue2.x。如果使用vue3.x则是引入的vue.global.js，语法上也有一些区别）

    <!--vue2.x-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--vue3.x-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    当然，你也可以下载此文件并自行提供服务：

    <script src="https://www.cnblogs.com/wenjie2000/archive/2023/01/09/js/vue.js"></script>

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

    new Vue({
    el:"#app",
    data() {
        return {
            username: "",
        }
    }
});

    如果使用的vue3，这里就是：

    const {createApp} = Vue
createApp({
    data() {
        return {
            username: "",
        }
    }
    ......//内部除了el，其他没什么区别
}).mount('#app')

    如果想用vue3，后面可以模仿着进行修改

  3. 编写视图

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

  4. 完整html页面

    <!--输入框内容改变，{{username}}会跟着变。Model变动，让两个View变化产生联动-->
<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                username: ""
            }
        }
    });
</script>
</body>
</html>

Vue常用指令

Vue生命周期

案例

查询所有品牌

13.VUE

直接在上一节的案例的基础上修改html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table border="1" id="brandTable">
        <tr align="center">
            <td>序号</td>
            <td>品牌名称</td>
            <td>企业名称</td>
            <td>排序</td>
            <td>品牌介绍</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
        <!--使用v-for遍历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.status}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                brands:[],
            }
        },
        mounted() {
            // 页面加载完后，发送异步请求，查询数据
            var _this=this;//如果直接在axios中的.then(function(){})中使用this，this默认会指向window对象，不能指向Vue的对象,所以需要变量_this进行传递
            axios({
                method: "get",
                url: "http://localhost:8080/login-web/SelectAllServlet2",
            }).then(function (response) {
                _this.brands=response.data;
            })
        },
    });
</script>
</body>
</html>

新增品牌

13.VUE

新增品牌的页面也可以学着手动修改。不难，这里我就不给结果了

标签 , , ,