AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-10-09 202
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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){})


钩子函数

1.png

文章标签：
CDN
Java
JavaScript
关键词：
Java vue
Java知识点
Java学习
Java后端
Java学习vue
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
花花叔叔
目录
相关文章
雨溪-yuxi
|
20天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
23 1
vue学习第一章
雨溪-yuxi
|
20天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
22 1
vue学习第三章
雨溪-yuxi
|
20天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
35 1
vue学习第四章
雨溪-yuxi
|
20天前
|
JavaScript 前端开发 算法
vue学习第7章(循环）
欢迎来到瑞雨溪的博客，一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令，包括遍历数组和对象、使用key以及数组的响应式方法等内容，并附有综合练习实例。关注我，将持续更新更多优质文章！🎉🎉🎉
雨溪-yuxi
21 1
vue学习第7章(循环）
雨溪-yuxi
|
20天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
28 1
vue学习第九章(v-model)
雨溪-yuxi
|
20天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
雨溪-yuxi
33 1
vue学习第十章(组件开发）
雨溪-yuxi
|
20天前
|
JavaScript 前端开发
vue学习第十一章（组件开发2）
欢迎来到我的博客，我是瑞雨溪，一名自学前端两年半的大一学生，专注于JavaScript与Vue。本文介绍Vue中的插槽（slot）使用方法，包括基本插槽、具名插槽及作用域插槽，帮助你在组件开发中实现内容的灵活定制。如果你觉得有帮助，请关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
19 1
vue学习第十一章（组件开发2）
雨溪-yuxi
|
20天前
|
监控 JavaScript 前端开发
vue学习第十二章(生命周期）
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。本文深入探讨了Vue实例的生命周期，从初始化到销毁各阶段的关键钩子函数及其应用场景，帮助你更好地理解Vue的工作原理。如果你觉得有帮助，欢迎关注我，将持续分享更多优质内容！🎉🎉🎉
雨溪-yuxi
21 1
vue学习第十二章(生命周期）
高端源码库
|
6天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码，采用SpringBoot、Vue、MySQL技术开发
基于B/S架构，采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统，适用于三甲医院，支持二次开发。该系统能自动监测全院患者药物不良反应，通过移动端和PC端实时反馈，提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块，确保精准、高效地处理ADR事件。
高端源码库
17 1
进步`于辰
|
1月前
|
存储 设计模式 SQL
[Java]知识点
本文涵盖Java编程中的多个知识点，包括静态与动态代理、基本数据类型转换、设计模式、异常处理、类加载、序列化、ORM框架、IPv4地址分类、编译与解释等。文章详细介绍了每个知识点的原理和使用方法，并提供了相关示例和注意事项。
进步`于辰
39 16
[Java]知识点

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    VUE上传功能本地上传正常，打包上传后报错TypeError: ***.upload.addEventListener is not a function
  • 3
    VueJS && ReactJS 如何？听听别人怎么说。
  • 4
    基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象，就可以渲染出一个页面(表单+表格))
  • 5
    中文代码示例之Vuejs入门教程(一)
  • 6
    vue之webpack打包原理和用法详解
  • 7
    新建Vue项目
  • 8
    Vue3+Vite4+Naive-UI 项目自动导入API和组件
  • 9
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 10
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 1
    【后端面经】【缓存】33｜缓存模式：缓存模式能不能解决缓存一致性问题？-03 Refresh Ahead + SingleFlight + 删除缓存 + 延迟双删
    131
  • 2
    【Uniapp 专栏】Uniapp 与后端接口对接的实战要点
    669
  • 3
    构建高效微服务架构：后端开发的新范式
    53
  • 4
    【后端面经】【缓存】33｜缓存模式：缓存模式能不能解决缓存一致性问题？-02 Write Through + Write Back
    90
  • 5
    nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（后端部分）
    97
  • 6
    ruoyi-nbcio-plus后端里mapstruct-plus和lombok的使用
    112
  • 7
    ruoyi-nbcio-plus后端升级遇到的编译错误问题
    95
  • 8
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    257
  • 9
    新的centos7.9安装docker版本的jenkins2.436.1最新版本-后端项目发布（四）
    130
  • 10
    构建高效微服务架构：后端开发的新范式
    35

    • 相关课程

    更多
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计
  • Java编程入门
  • Java面向对象编程
  • Java高级编程

    • 相关电子书

    更多
  • Java应用提速（速度与激情）
  • 十分钟上线-使用函数计算构建支付宝小程序服务
  • 机器学习在互联网后端技术中的应用

    • 相关实验场景

    更多
  • 阿里云平台上进行Java程序的编译与运行
  • 使用Java面向对象编写网络通信程序应用
  • 手动部署Java Web环境（Alibaba Cloud Linux 2）
  • 搭建Java Web开发环境（Anolis OS）
  • RocketMQ中使用Java客户端发送消息和消费的应用
  • 部署基于Dragonwell的Java运行环境
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月