JavaWeb—Vue

最新推荐文章于 2024-07-28 11:20:53 发布

陌凨107

最新推荐文章于 2024-07-28 11:20:53 发布

阅读量2.1k

点赞数 1

本文链接：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

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>

显示结果：