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

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花花叔叔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值