Vue(三)跨向实例的最后一步

最新推荐文章于 2024-01-11 14:31:05 发布
最新推荐文章于 2024-01-11 14:31:05 发布
阅读量169 收藏
点赞数
分类专栏： Vue 文章标签： vue javascript js html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43222167/article/details/106347593
版权

template

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<template v-if="isShow">
				template
			</template>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				isShow:true
			}
			
		})
	</script>
</html>

运行后可以发现template标签不显示
在这里插入图片描述

事件处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<!--js冒泡事件-->
			<div @click="fun1">
				其他内容
				<h1 @click="fun2">
					fun2
				</h1>
			</div>
		</div>
	</body>
	
	<script>
		var app=new Vue({
			el:"#app",
			methods:{
				fun1:function(){
					alert(1);
				},
				fun2:function(){
					alert(2);
				}
			}
		})
	</script>
</html>

运行后我们点击
在这里插入图片描述
可以看到先弹出fun2里面的内容,再弹出fun1里面的。这个事件我们称为冒泡事件(向上传播)

那么有时候我们只想触发里面的内容,而不想外面的内容触发呢,很简单,只需要改

<!-- 阻止单击事件继续传播 -->
<h1 @click.stop="fun2">
	fun2
</h1>

运行后再点击发现只触发fun2的内容了

prevent:阻止标签的默认事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<!--js冒泡事件-->
			<div @click="fun1">
				其他内容
				<!-- prevent 阻止标签的默认事件-->
				<a @click.stop="fun2" href="https://www.baidu.com/">
					fun2
				</a>
			</div>
		</div>
	</body>
	
	<script>
		var app=new Vue({
			el:"#app",
			methods:{
				fun1:function(){
					alert(1);
				},
				fun2:function(){
					alert(2);
				}
			}
		})
	</script>
</html>

在这里插入图片描述

<a @click.stop.prevent="fun2" href="https://www.baidu.com/">
					fun2
</a>

在这里插入图片描述

submit.prevent

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<!-- 提交事件不再重载页面 -->
			<form v-on:submit.prevent="onSubmit">
				<input type="text" id="name" /><br/>
				<input type="text" id="password" />
				<input type="submit" value="提交" />
			</form>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			methods:{
				onSubmit:function(){
					alert("提交成功");
				}
			}
		})
	</script>
</html>

运行后我们在输入框中输入值点击后发现值还在输入框里面
在这里插入图片描述

按键事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<input @keyup="fun1" value="keyup事件" />
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			methods:{
				fun1:function(){
					alert(1);
				}
			}
		})
	</script>
</html>

在这里插入图片描述
可以发现不管是对框中的值的增加,删除,只要鼠标选中框摁键盘都会触发

选框

单选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<input type="checkbox" v-model="myCheck" /><br/>
			<h1>myCheck值:{{myCheck}}</h1>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				myCheck:true
			}
		})
	</script>
</html>

在这里插入图片描述

多选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<input type="checkbox" value="1" v-model="myChecks" />王者<br/>
			<input type="checkbox" value="2" v-model="myChecks"/>吃鸡<br/>
			<input type="checkbox" value="3" v-model="myChecks" />LOL<br/>
			<h1>myChecks的值:{{myChecks}}</h1>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				myChecks:[]
			}
		})
	</script>
</html>

在这里插入图片描述

单选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			性别:{{sex}}<br/>
			<input type="radio" value="男" v-model="sex"/>男
			<input type="radio" value="女" v-model="sex" />女
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				sex:''
			}
		})
	</script>
</html>

在这里插入图片描述
下拉框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<select v-model="sel">
				<option value="A">A</option>
				<option value="B">B</option>
				<option value="C">C</option>
			</select>
			绑定的值是:{{sel}}
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				sel:""
			}
		})
	</script>
</html>

在这里插入图片描述

lazy

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<!-- 在“change”时而非“input”时更新 -->
			<input v-model.lazy="name">
			<p>姓名:{{name}}</p>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				name:"aa"
			}
		})
	</script>
</html>

输入完鼠标移开后下面才会改变值
在这里插入图片描述

组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<com1 name="aa"></com1>
			<com1 name="bb"></com1>
			<com1 name="cc"></com1>
		</div>
	</body>
	<script>
		
		Vue.component("com1",{
			//绑定外部的参数
			props:["name"],
			//声明组件数据(函数)
			data(){
				return{
					str:"data"
				}
			},
			template:'<h1>这里是组件{{name}}---{{str}}</h1>'
		})
		
		var app=new Vue({
			el:"#app"
		})
	</script>
</html>

在这里插入图片描述
有个小特性:根级标签只能有一个,具体的例子:h1标签两个

template:'<h1></h1><h1>这里是组件{{name}}---{{str}}</h1>'

在这里插入图片描述
修改为:

template:'<div><h1></h1><h1>这里是组件{{name}}---{{str}}</h1></div>'

在这里插入图片描述

$emit
将template修改

template:`<div>
				<h1>这里是组件{{str}}---{{name}}</h1>
				<a @click="$emit('com')">点击</a>
			</div>`

在这里插入图片描述

插槽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<com1 name="aa" @com="fun1">
				<h1>这里是插入组件的插槽</h1>
			</com1>
			<com1 name="bb"></com1>
			<com1 name="cc"></com1>
		</div>
	</body>
	<script>
		
		Vue.component("com1",{
			//绑定外部的参数
			props:["name"],
			//声明组件数据(函数)
			data(){
				return{
					str:"data"
				}
			},	
			template:`<div>
						<h1>这里是组件{{str}}---{{name}}</h1>
							<slot></slot>
							<a @click="$emit('com')">点击</a>
					  </div>`
		})
		var app=new Vue({
			el:"#app",
			methods:{
				fun1:function(){
					alert(1);
				}
			}
		})
	</script>
</html>

在这里插入图片描述

Be Your Superhero
关注
专栏目录
Vue 全家桶 + Electron 开发的一个跨三端的应用
努力，可能成功！放弃，注定失败！
06-22 8893
GitHub Repo：vue-objccn Follow: halfrost · GitHub 项目地址：https://github.com/halfrost/vue-objccn 本文来自简书，原文地址:http://www.jianshu.com/p/bff94aa90836 利用 Vue.js 实现 objc中国 的跨平台全栈应用 ✅ 桌面应用，支持 Mac
Vue+ Electron 开发的一个跨三端的应用（Taro开发多端应用）
Enweitech Software Works
03-20 3518
官方解释: 使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、H5、React-Native 等）运行的代码。 使用前 第一次看到Taro是在github搜索React插件时看到(个人习惯,有时候会去搜索一个语言的插件在GitHub再按照Star排名，看看各个插件功能，后期开发时用到这功能有个印象)，感...
Vue3 事件处理
大河之犬的博客
12-06 927
但是在通常情况下，我们需要使用一个方法来调用 JavaScript 方法。指令来监听 DOM 事件，从而执行 JavaScript 代码。提供了事件修饰符来处理 DOM 事件细节。添加了事件修饰符，此按钮只能点击一次。可以接收一个定义的方法来调用。"第一个事件处理器逻辑...""第二个事件处理器逻辑..."表示的指令后缀来调用修饰符。Vue.js 通过由点。
VUE跨组件数据传递方法
zlingyun的博客
08-10 7755
Q：需求是这样的： 兄弟组件或者子组件执行了某个操作之后，需要在另外一个A组件中执行刷新操作（某个方法）   解决思路： 1.如果是父子组件，可以用事件来处理，on，emit 2.我这个更普遍一点，不一定是父子组件的关系，这里有一个比较一般的解决方法   解决流程如下 首先，在vuex中定义一个变量 然后，在需要刷新的A组件中，获取对应的bool值，监听变量变化，并触发方法 ...
Vue组件跨层级获取组件实例
萝卜斯基先生的博客
05-30 7198
this.$parent 访问父实例 this.$children 当前实例的直接子组件。(不保证顺序,不是响应式) this.$parent.$parent.$refs.xxx 跨级访问父组件 this.$children.$children.$refs.xxx 跨级访问子组件 这种递归的方式 代码繁琐 性能低效 ref 只能获取当前组件上下文组件 无法跨层级 ref 是字符串 被用来给...
Vue.js子组件向父组件通信的方法实例代码详解
10-17
本文将详细介绍如何实现子组件向父组件通信，并提供相应的代码实例。 Vue.js支持多种组件通信的方式，其中最直接的方式之一就是通过自定义事件（custom events）。在自定义事件的机制中，子组件可以使用`this.$emit...
Vue实例的源码解析 (实例二)
qq_44999678的博客
08-16 1173
实例二 该实例的模板如下： <div id="app"> <mycom></mycom> <div></div> </div> <script> var vm = new Vue({ el:'#app', data:{ message:123 },
vue框架使用
最新发布
qq_45645848的博客
01-11 1202
前端vue基础知识总结，汇总
vue面试考察知识点全梳理
bb_xiaxia1998的博客
10-25 267
数据驱动组件化虚拟dom、diff局部最优更新Vue.js 的源码在 src 目录下，其目录结构如下。src├── compiler # 编译相关├── core # 核心代码├── platforms # 不同平台的支持├── server # 服务端渲染├── sfc # .vue 文件解析├── shared # 共享代码compiler：编译相关的代码。它包括把模板解析成 ast 语法树，ast 语法树优化，代码生成等功能。core。
2023年最新的Vue全套面试题（含答案）
热门推荐
xm1037782843的博客
03-06 14万+
前端Vue面试题 最新面试题 最全的面试题vue
Vue 3 表单输入绑定
人生代码 ---- 公众号
10-18 1303
表单输入绑定实验介绍你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据...
Vue入门-事件处理
压缩疯雷的博客
10-19 283
事件处理监听事件事件处理方法内联处理器中的方法事件修饰符按键修饰符按键码系统修饰键.exact 修饰符鼠标按钮修饰符为什么在 HTML 中监听事件？ 监听事件 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been cli
onsubmit和submit()详解
冰雪为融的博客
08-03 2万+
首先说明一点：onsubmit是Form对象的事件句柄，而submit()是form对象的事件方法 还有一个Submit 对象，代表 HTML 表单中的一个提交按钮 (submit button)。在 HTML 表单中 &lt;input type="submit"&gt; 标签每出现一次，一个 Submit 对象就会被创建。（这里我们暂且不详细说明哦） 一、onsubmit：在表单提交之前调用...
vue3新特性和新用法
感恩、奋进、自信
04-17 5029
下面是关于vue3的一些新特性和新用法的讲解 一、新增内置组件：teleport 官文解释teleport：Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下呈现 HTML，而不必求助于全局状态或将其拆分为两个组件 场景：在组件A中使用alert弹窗，但不希望alert弹窗渲染的DOM结构嵌套在组件A中；而是渲染在我们指定的位置上 实现方式： 1）使用<teleport to="#alert">包裹自定义的alert组件，to属性：是有效的查询选择器..
Vue指令大全
weixin_45537076的博客
03-11 203
Vue指令大全 1.v-text v-text主要用来更新textContent，可以等同于JS的text属性。 2. v-html 双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。 3. v-pre v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的...
[apiCloud结合vue](混合跨三端) 实现单页混合开发。
Anles的博客
03-04 3823
由于app是基于apicloud的多页混合开发，目前想转成单页开发,更好的管理，更好的维护，导致问题就来了，官方ApiCloud是不建议单页，不过，我觉得还是单页好，可能是vue用多了吧- -~。 本次搭建主要是利用webpack --watch的方法来实现，WIfi真机同步。每次修改监听直接编译生成文件，将wifi同步路径指定打包生成的文件，就OK了。之前没思路，想着怎么推送给apiClond，...
vue2与vue3的实例销毁，有什么区别。
qq_42264793的博客
06-19 9895
vue2的实例销毁: vm.$destroy() 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。 触发 beforeDestroy 和 destroyed 的钩子。 vue3的实例销毁： destroyed 生命周期选项被重命名为 unmounted beforeDestroy 生命周期选项被重命名为 beforeUnmount updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。 beforeUnmount：在卸载绑定元素的父组件之前调用 unmoun
使用java操作vue
qq_43222167的博客
06-01 2740
这里我们需要使用axios,所以在终端里面先运行npm install axios --save 运行好之后的页面 index.vue
掌握VUE框架：实例展示与操作文档
Vue实例是使用Vue.js框架的基础，每个Vue应用都是通过Vue函数创建一个新的Vue实例。创建实例时，可以传入一个选项对象，其中包含各种属性，例如：el、data、methods、computed等。el用于指定挂载元素，data用于声明...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值