java后端需要学习的Vue知识点

最新推荐文章于 2024-04-08 15:41:40 发布

花花叔叔

最新推荐文章于 2024-04-08 15:41:40 发布

阅读量1.9k

点赞数 3

分类专栏： # 后端（旧）文章标签： vue.js 后端 java

zbdx

本文链接：https://blog.csdn.net/qq_52077949/article/details/123015478

版权

后端（旧）专栏收录该内容

52 篇文章 10 订阅

订阅专栏

文章目录

Vue入门程序
Vue常用指令
axios
钩子函数

Vue入门程序

引入Vue.js库
写html页面
写Vue对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 第一步：引入vue.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
    <!-- 第二步：写html页面 -->
    <div id="app">
        {{name}}
    </div>
</body>
<script>

    // 创建vue对象
    var VM = new Vue({

        el: '#app',
        data:{
            name:"lihuikang"
        }

    });
</script>
</html>

在这里插入图片描述
{{}}: 插值表达式：通常用来获取Vue实例中定义的数据(data)
el: 挂载点：定义 Vue实例挂载的元素节点,表示vue接管该区域
data: 数据对象

<script>

    // 创建vue对象
    var VM = new Vue({

        el: '#app',
        data:{
            name:"lihuikang",
            school:{
                name:"拉勾教育",
                id:"123"
            },
            names:["小王","小明","小李"]
        }

    });
</script>

Vue常用指令

v-text 指令

获取data数据, 设置标签的内容.这个标签会覆盖标签内部的所有数据
但是使用{{}}差值表达式就不会覆盖，只会相连。

<h2 v-text="message">百度</h2>

<h2>{{message}}百度</h2>

在这里插入图片描述

v-html 指令

可以向元素中写入新的标签

<h2 v-html = "url"></h2>

data:{
            name:"lihuikang",
            school:{
                name:"拉勾教育",
                id:"123"
            },
            names:["小王","小明","小李"],
            message:"java程序员",
            url: "<a href='https://www.baidu.com'>百度一下</a>"
        }

在这里插入图片描述

v-on 指令

为元素绑定事件的指令，就比如说给按钮绑定事件等，点击按钮之后就可以跳转到对应的事件。
比如: v-on:click,可以简写为 @click=“方法”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>

</head>
<body>
    <div id="app">
        <input type="button" value="点击按钮" v-on:click="alert">

        <input type="button" value="点击实现第二种方法" @click="alert2">
    </div>
</body>
<script>
    var VM = new Vue({
        el:"#app",
        data:{

        },
        methods:{
            alert:function() {
                console.log("第一种方法已经实现了"); 
            },
            alert2:function() {
                console.log("第二种简写方法已经实现了"); 
            }
        }
    })
</script>
</html>

v-show指令

v-show指令, 根据真假值,切换元素的显示状态

这个指令的属性值是boolean类型的，这个v-show标签可以绑定图片，然后控制图片的显示或者隐藏，当点击按钮时候，触发相应的事件，然后修改data中的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>

</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="changeShow">
        <img v-show="isShow" src="./a.jpg" width="400px">
        <img src="./b.jpg" width="400px">
    </div>
</body>
<script>
    var VM = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            changeShow:function(){

                this.isShow = !this.isShow;
            }
        }
    })
</script>
</html>

v-if 指令

根据表达值的真假,切换元素的显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>

</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="changeShow">
        <img v-if="isShow" src="./a.jpg" width="400px">
        <img src="./b.jpg" width="400px">
    </div>
</body>
<script>
    var VM = new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            changeShow:function(){

                this.isShow = !this.isShow;
            }
        }
    })
</script>
</html>

频繁切换使用 v-show ,反之使用v-if

v-bind 指令

设置元素的属性（比如:src,title,class）
完整写法 v-bind:属性名，可以简写为 :属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>
</head>
<body>
    <div id="app">
       <!-- 使用v-bind设置src属性值 -->
       <img v-bind:src="imgSrc" alt="">
       <!-- 简写 设置title -->
       <img :src="imgSrc" alt="" :title="imgTitle">
       <!-- 设置class -->
       <div :style="{ fontSize: size + 'px'}">v-bind指令</div>      
    </div>
</body>
<script>
    var VM = new Vue({
    el:"#app",
    data:{
      imgSrc:"./a.jpg",
      imgTitle:"拉钩教育",
      size:100
   }
 })
</script>
</html>

v-for指令

v-for="(item,i) in list list是在data中的数组，i指的是数组下标，item指的是数组的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-for="(item,i) in list">--索引值--{{i}} --每一项值--{{item}}</p>
        <p v-for="(key,value) in user">{{value}},{{key}}</p>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            list: [6, 7, 8, 9, 10],
            user: {
                id: 1,
                name: '托尼.贾',
                gender: '男'
            }
        }
    })
</script>

</html>

v-mode 指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" ></script>

</head>
<body>
    <!-- 第二步：写html页面 -->
    <div id="app">
        <input v-model="name">
        <h2>{{name}}</h2>
    </div>
</body>
<script>

    // 创建vue对象
    var VM = new Vue({
        el: '#app',
        data:{
            name:"张子怡",
        }
    });
</script>
</html>

axios

axios.get(地址?key=value&key2=value2).then(function(response){},function(error)
{});

axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})

钩子函数

在这里插入图片描述

花花叔叔

关注

3
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
java后端需要学习的Vue知识点

文章目录Vue入门程序Vue常用指令v-text 指令v-html 指令v-on 指令v-show指令v-if 指令v-bind 指令v-for指令v-mode 指令axios钩子函数Vue入门程序引入Vue.js库写html页面写Vue对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="w
复制链接

扫一扫