JavaWeb—Vue

最新推荐文章于 2024-07-25 13:36:28 发布
最新推荐文章于 2024-07-25 13:36:28 发布
阅读量2.1k 收藏 7
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/west_xia_616/article/details/79871125
版权

vue介绍

Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易于上手，便于与第三方库或既有项目整合，另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也能够为复杂的单页应用提供驱动。

特点：轻量级、js语法、入门及上手快

vue与jQuery比较：

jQuery关注dom；vue关注数据，不关注dom


vue初步使用介绍

1、引入外部文件

2、构造Vue对象

3、使用{{}}将数据和DOM对象绑定

4、改变数据即可查看结果

eg：用Vue在浏览器页面显示"Hello World"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VUE</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" cintent="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
	<div class="container" id="app">
		<div class="row">
			<div class="col-md-12">
				<p>{{content}}</p>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			content:'Hello World'
		}
	});
</script>

显示结果：



Vue对象介绍

el：Vue的作用域，即只有在这个作用域里面的dom受Vue控制

data：vue界面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象属性不允许增加，因此页面数据模型必须提前定义好

methods：事件处理方法对象

eg：使用vue实现checkbox、radio、password、select

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VUE</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" cintent="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
	<div class="container" id="app">
		<div class="row">
			<div class="col-md-12">
				<input type="checkbox" value="apple" v-model="fruits" name="ck1" />苹果
				<input type="checkbox" value="banana" v-model="fruits" name="ck1" />香蕉
				{{fruits}}
				<input type="password" v-model="name" />
				{{name}}
				<input type="radio" value="apple" v-model="fruit" name="rd1" />苹果
				<input type="radio" value="banana" v-model="fruit" name="rd1" />香蕉
				{{fruit}}
				<select v-model="sel" name="sel">
					<option value="1">选项1</option>
					<option value="2">选项2</option>
					<option value="3">选项3</option>
				</select>
				{{sel}}
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			fruits:'',
			name:'',
			fruit:'',
			sel:''
		}
	});
</script>

显示结果：



vue事件处理

v-on:<事件名>

       v-on:click

eg：点击按钮在文本框中显示信息

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VUE</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" cintent="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
	<div class="container" id="app">
		<div class="row">
			<div class="col-md-4">
				姓名：<input type="text" v-model="name" />
				<button type="button" class="btn btn-default" v-on:click="sayhi()">Say Hi</button>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			name:''
		},
		methods:{
			sayhi:function () {
				this.name="World";
			}
		}
	});
</script>

显示结果：





数据绑定

绑定指令

v-bind、{{}}、v-html：以原始数据方式绑定

绑定位置

文本：文本可以出现的地方

属性：dom对象的属性，如title，src等

css：包括style和class绑定


vue常用指令

条件指令

v-if、<p v-if="true">显示</p>、v-else-if、v-else、v-show

循环指令

v-for、<li v-for="todo in todos">、<li v-for="(todo,index) in todos">、<li v-for="(value,key,index) in object">

表单绑定

v-model

<input v-model="name" />


eg1：常用指令的演示，其中通过点击按钮会控制地址的显示与隐藏，隐藏的结果就是被其他字取代

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VUE</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" cintent="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
	<div class="container" id="app">
		<div class="row">
			<div class="col-md-4">
				<button type="button" class="btn btn-default" v-on:click="showhide()">showhide</button>
				<h3 v-if="isshow">{{addr.city}},{{addr.street}}</h3>
				<h4 v-else>地址被隐藏了</h4>
				<p :title="name" v-show="isshow">{{showtime()}}</p>
				<ul>
					<li v-for="(item,index) in items">{{item}}，序号：{{index}}</li>
					<li v-for="(value,key,index) in addr">{{key}}={{value}}，序号：{{index}}</li>
				</ul>
				<template v-for="(item,index) in items">
					<ol>
						<li>列表{{item}}</li>
					</ol>
					<button class="btn btn-default">{{item}}</button>
				</template>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			name:'World',
			isshow:true,
			addr:{
				city:'北京',
				street:'王府井'
			},
			items:[1,2,3,4,5]
		},
		methods:{
			showhide:function () {
				this.isshow=!this.isshow;
			},
			showtime:function () {
				return new Date();
			}
		}
	});
</script>

显示结果：


eg2：省市联动：默认显示第一条数据

过滤器：将时间中的秒过滤出来以及定义人民币符号"￥"

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VUE</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" cintent="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
	<div class="container" id="app">
		<div class="row">
			<div class="col-md-12">
				省份：<select name="shengfen" v-model="selshengfen">
					<option v-for="item in shengfen" :value="item">{{item.name}}</option>
				</select>
				城市：<select name="chengshi">
					<option v-for="item in selshengfen.city">{{item.name}}</option>
				</select>
				<h3>{{time | formatdate}}</h3>
				<h4>{{100 | currency}}</h4>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	var vue = new Vue({
		el:"#app",
		data:{
			name:'',
			time:new Date(),
			selshengfen:{
				name:'',
				city:[]
			},
			shengfen:[{
				name:'陕西省',
				city:[
				{
					name:'西安市'
				},
				{
					name:'咸阳市'
				}
				]
			},
			{
				name:'河南省',
				city:[
				{
					name:'郑州市'
				},
				{
					name:'洛阳市'
				}
				]
			}
			]
		},
		methods:{
			updatetime:function () {
				this.time = new Date();
			}
		},
		filters:{
			formatdate:function(d){
				return d.getSeconds();
			},
			currency:function(m){
				return "￥"+m;
			}
		},
		mounted:function(){
			this.selshengfen=this.shengfen[0];
		}
	});
</script>

显示效果：



vue自定义组件

组件：页面中完成某个特定功能的模块

使用组件的原因：代码复用。DRY(Don't Repeat Yourself)原则

结构：

        Vue.component('组件名',{props:['属性名'],template:'模板内容'})

       自定义组件使用

              <组件名>

       自定义组件属性绑定

              v-bind:属性名='实际对象'

  

eg：一个简单的组件演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VUE</title>
	<meta http-equiv="X-UA-Compatible" content="IE-edge">
	<meta name="viewport" cintent="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
	<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
	<div class="container" id="app">
		<div class="row">
			<div class="col-md-12">
				<mycomponent v-bind:message="amsg" />
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<mycity v-bind:shengfen="shengfen" />
			</div>
		</div>		
	</div>
</body>
</html>
<script type="text/javascript">
	Vue.component('mycomponent',{
		props:['message'],
		template:'<h3>{{message}}</h3>'
	});
	Vue.component('mycity',{
		props:['shengfen'],
		template:'<div>省份：<select name="shengfen" v-model="selshengfen"><option v-for="item in shengfen" :value="item">{{item.name}}</option></select>城市：<select name="chengshi"><option v-for="item in selshengfen.city">{{item.name}}</option></select></div>',
		data:function () {
			return {
				selshengfen:{
					name:'',
					city:[]			
				}
			}
		},
		mounted:function(){
			this.selshengfen=this.shengfen[0];
		}
	});
	var vue = new Vue({
		el:"#app",
		data:{
			amsg:'这是一个模板',
			shengfen:
			[
				{
					name:'陕西省',
					city:[
							{
								name:'西安市',
							},
							{
								name:'商洛市'
							}
						]
				},
				{
					name:'河南省',
					city:[
						{
							name:'郑州市',
						},
						{
							name:'洛阳市'
						}
					]
				},
			]
		},
		methods:{

		}
	});
</script>

显示结果：


陌凨107
关注
JavaWeb——vue
xiongzhouxiong的博客
04-13 2419
VUEVue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动，相比于jQuery关注DOM，Vue更关注于数据。Vue的优点：vue轻量级，使用熟悉的js语法，入门上手比较快...
java Javaweb Vue mysql宿舍管理系统
11-09
【标题】"java Javaweb Vue mysql宿舍管理系统"是一个基于Java、JavaScript框架Vue.js以及关系型数据库MySQL构建的学生宿舍信息管理平台。这个系统旨在帮助学校更有效地管理和维护学生的住宿信息，提供便捷的信息...
JavaWeb之vue
Seulementzh1010的博客
04-12 1576
一、Web前端技术：  1、展示：html ,css.  2、交互：java applet , flash , javaScript(包含原生javascript时代，jquery时代，大前端时代[angularjs ,vue]). 二、angularjs：    1、起源：诞生2009年，由Misko Hevery等人创建,后被Google所收购。是一款优秀的前端JS框架，      angul...
(Javaweb)Vue
最新发布
2301_79144798的博客
07-25 600
1.model--数据模型：包含了很多的业务数据以及数据的处理方法2.view--视图层--数据的展示--DOM元素3.viewmodel--完成数据绑定的核心，实现model与viewmodel之间的数据连接其中，MVVM由三部分组成，model，view，viewmodelmodel--数据模型，包含业务数据以及数据的处理方法。view--视图层，负责数据的展示，相当于标签，DOM元素通过viewmodel，完成两只之间的数据绑定，是双向数据绑定的核心。
java-Vue
qq_40301475的博客
03-15 2976
标题
03.VUE
qq_37636795的博客
02-10 427
Vue 1. 学习目标 了解什么是框架 了解什么是Vue 掌握Vue的基本语法 了解Vue的生命周期 2. 内容讲解 2.1 什么是框架 任何编程语言在最初的时候都是没有框架的，后来随着在实际开发过程中不断总结『经验』，积累『最佳实践』，慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』。 于是有人把成熟的『固定解决方案』收集起来，整合在一起，就成了『框架』。 在使用框架的过程中，我们往往只需要告诉框架『做什么（声明）』，而不需要关心框架『怎么做（编程）』。 对于Java程序来说
javaweb和vue知识点
ljm_99的博客
08-08 664
JavaWeb相关知识点思维导图 javaweb知识点总结
基于SpringBoot JavaWeb Vue的网页端外卖平台订单项目.zip
10-29
1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合...
javaweb vue 期末作业
07-09
javaweb vue 期末作业是一项综合性作业，结合了JavaWeb和Vue的技术要求。这个作业要求我们设计并实现一个具有前后端交互的Web应用程序。 首先，我们需要使用JavaWeb技术来搭建后端环境。我们可以使用Java框架，如...
JavaWeb网页，vue+springboot+mybatisplus，老年管理平台
07-16
在本项目中，我们主要探讨的是一个基于JavaWeb技术栈的老年管理平台的构建，它融合了现代化的前端框架Vue.js、后端轻量级框架SpringBoot以及数据库操作组件MyBatisPlus。这个平台旨在为老年人提供一个集游戏、购物、...
基于javaweb+vue+mysql的课程管理系统源码.zip
08-22
基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程管理系统源码.zip基于javaweb+vue+mysql的课程...
Java 进阶（vue 基础）
Chenhui98的博客
09-06 279
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。
Java-Vue基础
baidu_40924406的博客
10-11 602
//创建组件步骤//1.创建一个组件对象template:"<h1>欢迎来到王者荣耀</h1>"})//2.注册组件el:"#app",})
java和vue2.0
weixin_30772261的博客
07-13 167
java中的el表达式${对象.属性}和vue中的双向数据绑定{{mode.xx}}感觉有点类似 转载于:https://www.cnblogs.com/YangBinChina/p/11180460.html
JavaWeb前端与Vue.js
程序员光剑
01-18 1040
1.背景介绍 JavaWeb前端与Vue.js是一篇深度探讨JavaWeb前端技术和Vue.js框架的专业技术博客文章。在这篇文章中，我们将从以下几个方面进行探讨： 背景介绍 核心概念与联系 核心算法原理和具体操作步骤以及数学模型公式详细讲解 具体代码实例和详细解释说明 未来发展趋势与挑战 附录常见问题与解答 1.1 JavaWeb前端背景 JavaWeb前端技术是指在JavaWeb应...
vue基础——java程序员版(vue入门)
陨石的博客
03-19 1805
​ 这是一个java程序员的vue学习记录。
JavaWeb-Vue入门
萌萌虎的博客
07-12 652
目录一、基本介绍二、基本语法-绑定属性2.1 绑定元素属性 v-bind/{{ }}2.2 双向绑定元素属性 v-model2.2.1 .trim修饰符三、基本语法-条件渲染 v-if/v-else/v-show3.1 v-if3.2 v-if 和 v-else3.3 v-show四、基本语法-列表渲染（v-for="e in eList"） 4.1 迭代普通数组4.2 迭代对象数组五、基本语法-事件驱动（v-on:事件名/@事件名）六、基本语法-侦听属性 watch 声明式渲染：
JavaWeb—Vue的简单介绍
weixin_45890113的博客
01-28 1735
概述数据渲染特点开发步骤①引入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
Eumenides_Suki的博客
03-12 1138
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。我们之前也学习过后端的框架MybatisMybatis是用来简化jdbc代码编写的；而VUE是前端的框架，是用来简化JavaScript代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下学习了VUE后，这部分代码我们就不需要再写了。那么VUE是如何简化 DOM 书写呢？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值