Vue.js教程(一)--入门 vue.js从入门到实战

bigegpt 2024-10-11 10:55 23 浏览

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

适合人群：了解HTML，CSS，JavaScript

一、第一个 Vue 应用

<div id="app">
 {{ message }}
</div>

var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

运行结果：Hello Vue!

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

二、事件和属性

1、事件

1.1 事件简写

v-on:click="" 简写方式@click

1.2 事件对象$event

包含事件相关信息、如事件源、事件类型、偏移量 target、type、offset

1.3 事件冒泡

阻止事件冒泡：

a)原生js方式，依赖于事件对象（e.stopPropagation()）

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">事件冒泡</h1>
		</header>
		<div class="mui-content" id="content">
			<div @click="printf()">
				<div @click="print()">
					<div @click="show($event)">click me</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					printf:function(){
						console.log("printf")
					},
					print:function(){
						console.log("print")
					},
					show:function(e){
						console.log("show");
						console.log(e.target.innerHTML);//DOM对象
						e.stopPropagation();//阻止事件冒泡(原生js方式)
					}
				}
			})
			mui.init()
		</script>
	</body>
</html>

b)Vue方式，不依赖于事件对象 @click.stop

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">事件冒泡</h1>
		</header>
		<div class="mui-content" id="content">
			<div @click="printf()">
				<div @click="print()">
					<div @click.stop="show()">click me</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					printf:function(){
						console.log("printf")
					},
					print:function(){
						console.log("print")
					},
					show:function(){
						console.log("show")
					}
				}
			})
			mui.init()
		</script>
	</body>
</html>

1.4 事件默认行为

a)原生js方式（e.preventDefault()）

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">阻止默认事件</h1>
		</header>
		<div class="mui-content" id="content">
			<a href="#" @click="lianjie($event)">我是一个链接，点我</a>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					lianjie:function(e){
						console.log("lianjie");
						e.preventDefault();//阻止默认事件(原生js方式)
					}
				}
			})
			mui.init()
		</script>
	</body>
</html>

b)Vue方式 @click.prevent

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">阻止默认事件</h1>
		</header>
		<div class="mui-content" id="content">
			<a href="#" @click.prevent="lianjie()">我是一个链接，点我</a>
		</div>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#content",
				data:{
					
				},methods:{
					lianjie:function(e){
						console.log("lianjie");
					}
				}
			})
			mui.init()
		</script>
	</body>
</html>

1.5 键盘事件

回车：@keydown.13 或 @keydown.enter
上：@keydown.38 或 @keydown.up

1.6 事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

2. 属性

2.1 属性绑定和属性简写

v-bind 用于属性绑定， v-bind:属性=""

属性的简写： v-bind:属性=""简写为 :属性=""

2.2 class和style属性

如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.aa{
				color: red;
			}
			.bb{
				background: #007AFF;
			}
			.cc{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div class="mui-content" id="content">
			<!-- 
			 class属性
			 -->
			<!-- <div :class="aa">hello vue</div> --><!-- 这种方式不可以，Vue的属性绑定不能直接使用css样式 -->
			
			<!-- 方式1：变量形式 -->
			<div :class="class1">hello vue</div>
			
			<!-- 方式2：数组形式，同时引用多个 -->
			<div :class="[class1,class2]">hello vue</div>
			
			<!-- 方式3：json形式，常用！！！ -->
			<div :class="{aa:false,bb:true,cc:num>4}">hello vue</div>
			
			<!-- 
			 style属性
			 -->
			<div :style="style1">hello vue</div>
			<div :style="[style1,style2]">hello vue</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init();
			var vm=new Vue({
				el:"#content",
				data:{
					class1:"aa",
					class2:"bb",
					num:5,
					style1:{color:'green',fontSize:'30px'},
					style2:{backgroundColor:'gray'}
				}
			})
		</script>
	</body>
</html>

vue阻止冒泡

上一篇：Vue 开发必须知道的 36 个技巧「近1W字」
下一篇：Vue 2x 常见用法 vue2-manage

Vue.js教程(一)--入门 vue.js从入门到实战

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解