JavaWeb-Vue入门

最新推荐文章于 2024-04-18 15:45:42 发布
最新推荐文章于 2024-04-18 15:45:42 发布
阅读量424 收藏 1
点赞数 2
分类专栏： JavaWeb 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62427168/article/details/125749261
版权

目录

一、基本介绍

二、基本语法-绑定属性

2.1 绑定元素属性 v-bind/{{ }}

2.2 双向绑定元素属性 v-model

2.2.1 .trim修饰符

三、基本语法-条件渲染 v-if/v-else/v-show

3.1 v-if

3.2 v-if 和 v-else

3.3 v-show

四、基本语法-列表渲染（v-for="e in eList"） 

4.1 迭代普通数组

4.2 迭代对象数组

五、基本语法-事件驱动（v-on:事件名/@事件名）

六、基本语法-侦听属性 watch

一、基本介绍

        声明式渲染：

        『声明式』是相对于『编程式』而言的。

  • 声明式：告诉框架做什么，具体操作由框架完成
  • 编程式：自己编写代码完成具体操作

        渲染：

 

  • 蓝色方框：HTML标签
  • 红色圆形：动态、尚未确定的数据
  • 蓝色圆形：经过程序运算以后，计算得到的具体的，可以直接在页面上显示的数据、
  • 渲染：程序计算动态数据得到具体数据的过程

        演示：

        需要引入vue.js,让js初始化时new一个Vue对象出来。本来想引入Thymeleaf设置路径的，但发现引入后vue就失效了，可能是有冲突吧。

<html>
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script language="JavaScript" src="../../static/script/vue.js"></script>
    <script language="JavaScript">

        window.onload=function () {
            var vue=new Vue({
            // el用于指定Vue对象要关联的HTML元素。el就是element的缩写
	        // 通过id属性值指定HTML元素时，语法格式是：#id
                el:"#msg",

            // data属性设置了Vue对象中保存的数据
                data:{
                    message:"hello,WZ!"
                }
            })
        }
    </script>
</head>
<body>
        <!-- 使用{{}}格式，指定要被渲染的数据 -->
        <div id="msg">{{message}}</div>
</body>
</html>

        通过验证Vue对象的『响应式』效果，我们看到Vue对象和页面上的HTML标签确实是始终保持着关联的关系。

二、基本语法-绑定属性

2.1 绑定元素属性 v-bind/{{ }}

        语法：

一、标签属性

        v-bind : HTML标签的原始属性名        可省略为  : HTML标签的原始属性名
二、标签体内

        {{ HTML标签的原始属性名 }}

        举例：

<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script language="JavaScript" src="../../static/script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function () {
            var vue=new Vue({
                el:"#msg",//绑定id
                data:{
                    message1:"hello,Vue!",    //指定要渲染的内容
                    message2:"hello,Vue!"
                }
            });
        }
    </script>
</head>
<body>
    <div id="msg">
        <div>{{message1}}</div>   //标签体
        <input type="text" :value="message2"> //标签属性
    </div>
</body>

2.2 双向绑定元素属性 v-model

        何为双向？

        使用了双向绑定后，就可以实现：页面上数据被修改后，Vue对象中的数据属性也跟着被修改

        语法：

        v-mode:HTML标签的原始属性名 = ”... ...“

        可省略为：

        v-mode= "... ..."

        举例： 

 <script language="JavaScript">
        window.onload=function () {
            var vue=new Vue({
                el:"#demo",
                data:{
                    vueValue:"yyds"
                }
            });
        }
    </script>

... ...

<div id="demo">
	<!-- v-bind:属性名 效果是从Vue对象渲染到页面 -->
	<!-- v-model:属性名 效果不仅是从Vue对象渲染到页面，而且能够在页面上数据修改后反向修改Vue对象中的数据属性 -->

	<input type="text" v-model:value="vueValue" />
    <input type="text" v-model="vueValue" />
	<p>{{vueValue}}</p>

</div>

        此时，如果修改了 <input>  标签内的值，那么 <p> 标签的内容也会改变

2.2.1 .trim修饰符

        加在v-model后，可以将文本前后的空格去掉。

<input type="text" v-model.trim="vueValue" />

三、基本语法-条件渲染 v-if/v-else/v-show

        根据Vue对象中数据属性的值来判断是否对HTML页面内容进行渲染。

3.1 v-if

<script language="JavaScript">
        window.onload=function () {
            var vue=new Vue({
                  el:"#demo",
                  data:{
                        condition:true  //指定条件为true
                }
            });
        }
</script>

... ...

<div id="demo">
	<img v-if="condition" src="/images/1.jpg" />     //如果条件为true，加载图片1
	<img v-if="!condition" src="/images/0.jpg" />    //如果条件为false，加载图片0
</div>

3.2 v-if 和 v-else

        类似于if else

<script language="JavaScript">
        window.onload=function () {
            var vue=new Vue({
                  el:"#demo",
                  data:{
                        condition:true  //指定条件为true
                }
            });
        }
</script>

... ...

<div id="demo">
	<img v-if="condition" src="/images/1.jpg" />     //如果条件为true，加载图片1
	<img v-else="condition" src="/images/0.jpg" />    //如果条件不为true，加载图片0
</div>

3.3 v-show

        v-show通过其隐藏的display属性来控制标签是否显示

<div id="demo">
	<img v-show="condition" src="/images/beauty.jpg" />
</div>

四、基本语法-列表渲染（v-for="e in eList"） 

4.1 迭代普通数组

        假设给出一个颜色数组，依次输出每个颜色名字：

<script language="JavaScript">
        window.onload=function () {
            var vue=new Vue({
                el:"#demo",
                data:{
                    colorList: [
                        "red",
                        "green",
                        "blue",
                        "pink",
                        "white"
                    ]
                }
            });
        }
</script>

... ...

<div id="demo">
    <ul>
        <!-- 使用v-for语法遍历数组 -->
        <!-- v-for的值是语法格式是：引用数组元素的变量名 in Vue对象中的数组属性名 -->
        <!-- 在文本标签体中使用{{引用数组元素的变量名}}渲染每一个数组元素 -->
        <li v-for="color in colorList">{{color}}</li>
    </ul>
</div>

4.2 迭代对象数组

        输出员工表中每个员工的信息：

<script language="JavaScript">
        window.onload=function () {
            var vue=new Vue({
                el:"#demo",
                data:{
                    employeeList:[
                        {
                            "empId":11,
                            "empName":"tom",
                            "empAge":111,
                            "empSubject":"java"
                        },
                        {
                            "empId":22,
                            "empName":"jerry",
                            "empAge":222,
                            "empSubject":"php"
                        },
                        {
                            "empId":33,
                            "empName":"bob",
                            "empAge":333,
                            "empSubject":"python"
                        }
                    ]
                }
            });
        }
</script>

... ...

<div id="demo">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
        </tr>
        <tr v-for="employee in employeeList">
            <td>{{employee.empId}}</td>
            <td>{{employee.empName}}</td>
            <td>{{employee.empAge}}</td>
            <td>{{employee.empSubject}}</td>
        </tr>
    </table>
</div>

五、基本语法-事件驱动（v-on:事件名/@事件名）

        语法：

        v-on:事件名="... ..."   或者  @事件名="... ..."

        例如：

<div id="app">
    <p>{{message}}</p>
    <!-- v-on:事件类型="事件响应函数的函数名" -->
    <button @click="reverseMessage">Click me to reverse message</button>
</div>

        为了响应这些事件，要在js代码块中定义对应的函数：

<script language="JavaScript">
        window.onload=function () {
            var vue= new Vue({
                el:"#app",
                data:{
                    message:"Hello Vue!"
                },
                methods: {
                    reverseMessage: function () {
                        this.message = this.message.split("").reverse().join("");
                    }
                }
                });
        }
</script>
</head>

六、基本语法-侦听属性 watch

        所谓『侦听』，就是对message属性进行监控，当属性的值发生变化时，调用我们准备好的函数。

        格式：

<script language="JavaScript">
        window.onload=function () {
            var vue= new Vue({
                el:"#xxx",
                data:{
                 ... ...
                },
                "watch":{
                    属性1:function (newVal) {
                        操作1
                    },
                    属性2:function (newVal) {
                        操作2
                    }
                }
                });
        }
</script>

        我们可以实现一个简单的加法器

<script language="JavaScript">
        window.onload=function () {
            var vue= new Vue({
                el:"#app",
                data:{
                    num1:"1",
                    num2:"1",
                    res:"0"
                },
                "watch":{
                    num1:function (newVal) {
                        this.res=parseInt(newVal)+parseInt(this.num2)
                    },
                    num2:function (newVal) {
                        this.res=parseInt(newVal)+parseInt(this.num1)
                    }
                }
                });
        }
</script>

... ...

<div id="app">
    <input type="text" v-model="num1"><br/>
    <input type="text" v-model="num2"><br/>
    结果：<span>{{res}}</span>
</div>

        效果：

UndefinedException
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue学习笔记，B站黑马程序员的javaweb
11-05
vue学习笔记，B站黑马程序员的javaweb
JavaWeb—Vue的简单介绍
weixin_45890113的博客
01-28 1669
概述数据渲染特点开发步骤①引入vue.js②定义一个div作为vue的容器③创建vue对象 3 Vue的格式 4 Vue指令介绍 概述 Vue指令就是带""前缀的特殊属性 , 比如: , , , … 5 Vue文本操作 概述 通过v-text, v-html, 插值表达式将vue数据插入到html标签内容中 v-text : 不能解析html标签 , 可以解决插值闪烁 v-html : 可以解析html标签 ,可以解决插值闪烁 插值表达式 : 不能解析html标签 , 不能解决插值闪烁
JavaWeb——Vue
mxyjsu2021的博客
04-30 1367
Vue.js是一个流行的前端JavaScript框架，用于构建单页应用程序和可重用组件。Vue.js的设计目标是提供一种简单的方法来构建Web应用程序，同时尽可能地灵活和高效。Vue.js也被称为MVVM(Model-View-ViewModel)框架，因为它将应用程序的状态和行为分离成模型(model)、视图(view)和视图模型(viewmodel)的组件。官网：Vue.js修改变量的值，标签值自动变化；反过来，修改标签的值，变量的值也跟着更新，这就是双向绑定。
JavaWeb--05Vue项目简介
最新发布
m0_73678713的博客
04-18 903
我们自习观察发现，index.html的代码很简洁，但是浏览器所呈现的index.html内容却很丰富，代码和内容不匹配，所以vue是如何做到的呢？此时我们知道了vue创建的dom对象挂在到id=app的标签区域，但是我们还是没有解决最开始的问题：首页内容如何呈现的？，打开浏览器，发现之前访问的首页一片空白，如下图所示，这样就证明了，我们main.js中通过代码挂在到index.html的id=app的标签区域的。那么这个App对象怎么回事呢，我们打开App.vue,注意的是.vue结尾的都是vue组件。
【Java生态前后端】开发web应用使用到的技术 & Vue框架+Java开发Web应用的步骤
JosieBook
06-07 2915
介绍一些开发web应用使用到的技术，以及使用Vue+Java的方式开发Web应用的过程和步骤。通过以上内容的了解，可对web应用前后端开发建立一个初步的认知。
JavaWeb—vue（具体使用包含案例）
夏日漱石的博客
04-04 1565
1.Vue组件库Element 1.1Element介绍 1.2 Element组件 1.2.1 Table表格 1.2.2 Pagination分页 1.2.3 Dialog对话框 1.2.4 Form表单 1.3案例 1.3.1案例分析 1.3.2代码实现 2.Vue路由 2.1 路由介绍 2.2 路由入门
【JavaWeb】Day16.前端工程化——Vue项目开发流程
m0_74197695的博客
03-20 310
创建项目的两种方式：vue ui下面展示第二种方式：按照下图创建项目此时命令行开始生成项目注意此过程需要联网此时就已经成功创建Vue项目。
Javaweb期末设计项目-日记管理系统
01-05
使用场景及目标：这份资源适用于Javaweb期末设计作业，也适合用于练习适用ssm项目和vue+elementui开发的模式，从而更好的入门Javaweb这门课程，为后续学习Java或者前端做好准备。 其他说明：资源中包括：Java代码，...
JavaWeb入门（学生管理系统前后端开发，ajax+servlet+tomcat+vue+maven+mysql...)
07-15
快速入门JavaWeb,下载即用，功能简单明了，页面好看，逻辑清晰，不论是作为学习还是完成大作业都很好。本项目用到许多技术，让你快速对当下流行技术有所了解，而不必花费太长时间。
狂神说Java 笔记，java入门，docker ,spring 全家桶，redis , mysql , vue , javascript ,htm5, css
05-07
19、JavaWeb.pdf 20、MyBatis.pdf 21、Spring.pdf 22、SpringMVC.pdf 23、大前端串讲.pdf 24、Vue精讲.pdf 25、SpringBoot入门及原理.pdf 26、SpringBoot操作数据库.pdf 27、SpringBoot开发单体应用.pdf ...
JavaWeb--VUE
Eumenides_Suki的博客
03-12 684
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。我们之前也学习过后端的框架MybatisMybatis是用来简化jdbc代码编写的；而VUE是前端的框架，是用来简化JavaScript代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下学习了VUE后，这部分代码我们就不需要再写了。那么VUE是如何简化 DOM 书写呢？
JavaWeb—vue（基础知识）
夏日漱石的博客
04-02 560
JavaWeb—vue（基础知识）
03.VUE
qq_37636795的博客
02-10 382
Vue 1. 学习目标 了解什么是框架 了解什么是Vue 掌握Vue的基本语法 了解Vue的生命周期 2. 内容讲解 2.1 什么是框架 任何编程语言在最初的时候都是没有框架的，后来随着在实际开发过程中不断总结『经验』，积累『最佳实践』，慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。 于是有人把成熟的『固定解决方案』收集起来，整合在一起，就成了『框架』。 在使用框架的过程中，我们往往只需要告诉框架『做什么（声明）』，而不需要关心框架『怎么做（编程）』。 对于Java程序来说
VUE的使用—JavaWeb
wwl193206126的博客
03-28 605
VUE的使用
JavaWeb中的VUE快速入门
昊月光华的博客
11-30 1072
Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。Vue为当前的国内前端主流框架，基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程关注点放在数据上。
Laravel企业信息化管理平台
weixin_50196917的博客
09-04 5135
一款 PHP 语言基于 Laravel5.8、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构和常规基础模块，同时支持多主题切换，可以根据自己喜欢的风格选择
springboot+vue后台管理系统框架
西里古里的博客
08-17 2092
一款 Java 语言基于SpringBoot2、Layui、Thymeleaf、MybatisPlus、Shiro、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪、富文本编辑器等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构
基于javaweb的oa人事管理系统(java+springboot+jsp+layui+html+mysql)
m0_69592937的博客
10-24 730
基于javaweb的oa人事管理系统(java+springboot+jsp+layui+html+mysql) 运行环境 Java≥8、MySQL≥5.7 开发工具 eclipse/idea/myeclipse/sts等均可配置运行 适用 课程设计，大作业，毕业设计，项目练习，学习演示等
springboot+vue后台开发框架
西里古里的博客
08-17 1514
一款 Java 语言基于SpringBoot2、Layui、Thymeleaf、MybatisPlus、Shiro、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪、富文本编辑器等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构
javaweb阅读vue
02-02
如果你想在JavaWeb中使用Vue，可以通过以下步骤进行： 1. 引入Vue：在你的JavaWeb项目中，可以通过在HTML文件中引入Vue的CDN链接或者将Vue的源代码下载到本地并引入到项目中。 2. 创建Vue组件：在JavaWeb项目中，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值