Vue之模块语法（三）

最新推荐文章于 2024-02-04 14:52:21 发布
最新推荐文章于 2024-02-04 14:52:21 发布
阅读量132 收藏
点赞数
分类专栏： 前端 文章标签： Vue 模块语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44255950/article/details/100987279
版权

博客目标

讲解Vue的基本使用(下）

2.1 样式绑定

2.1.1 class绑定

<style>
/* 定义演样式 */
		.a{
			background-color: green;
		}
		.b{
			background-color: red;
		}
		.c{
			font-size: 60px;
		}
	</style>
	<body>
		<!-- vue所管理的边界 -->
		<div>
			<div id="app">
			<ul>
				<li>样式绑定</li>
				<span :class="aclz">技术小白，only老k</span>
				<span :class="bclz">only老k，我为自己带盐</span>
			</ul>			
			</div>
		</div>
	</body>
	<script>
		//通过vue实例去渲染vue所管理的边界
		new Vue({
			el:'#app',
			data() {
				return {
					aclz:'a',
					bclz:['b','c']
				};
			}
		})
	</script>

效果图：在这里插入图片描述

2.2 事件处理器

2.2.1 阻止单击事件冒泡
核心方法：

@click.stop="a"

案例演示：只提示a

<style>
		/* 定义演样式 */
		.a{
			background-color: green;
		}
		.b{
			background-color: red;
		}
		.c{
			font-size: 60px;
		}
		div{
			padding: 25px;
		}
	</style>
	<body>
		<!-- vue所管理的边界 -->
		<div>
			<div id="app">
			<ul>
				<li>样式绑定
				<span :class="aclz">技术小白，only老k</span>
				<span :class="bclz">only老k，我为自己带盐</span>
				</li>
				<li>
				<h3>事件冒泡 我点击一个颜色只弹出一个提示而不是外层也弹出</h3>
				<div style="width: 300px;height: 300px;background-color: #008000;"@click="d">
					<div style="width: 200px;height: 200px;background-color: #FF0000;"@click="c">
						<div style="width: 100px;height: 100px;background-color: antiquewhite;"@click="b">
						    <div style="width: 50px;height: 50px;background-color: cadetblue;"@click.stop="a">
							
						    </div>	
						</div>
					</div>
				</div>
				</li>
			</ul>			
			</div>
		</div>
	</body>
	<script>
		//通过vue实例去渲染vue所管理的边界
		new Vue({
			el:'#app',
			data() {
				return {
					aclz:'a',
					bclz:['b','c']
				};
			},
			methods:{
				a(){
					alert("事件A触发！！！");
				},
				b(){
					alert("事件B触发！！！");
				},
				c(){
					alert("事件C触发！！！");
				},
				d(){
					alert("事件D触发！！！");
				}
			}
		})
	</script>

效果图：
在这里插入图片描述
2.2.2 click事件只能点击一次
核心方法：

@click.once="send"

	<style>
		/* 定义演样式 */
		.a{
			background-color: green;
		}
		.b{
			background-color: red;
		}
		.c{
			font-size: 60px;
		}
		div{
			padding: 25px;
		}
	</style>
	<body>
		<!-- vue所管理的边界 -->
		<div>
			<div id="app">
			<ul>
				<li>样式绑定
				<span :class="aclz">技术小白，only老k</span>
				<span :class="bclz">only老k，我为自己带盐</span>
				</li>
				<li>
				<h3>事件冒泡 我点击一个颜色只弹出一个提示而不是外层也弹出</h3>
				<div style="width: 300px;height: 300px;background-color: #008000;"@click="d">
					<div style="width: 200px;height: 200px;background-color: #FF0000;"@click="c">
						<div style="width: 100px;height: 100px;background-color: antiquewhite;"@click="b">
						    <div style="width: 50px;height: 50px;background-color: cadetblue;"@click.stop="a">
							
						    </div>	
						</div>
					</div>
				</div>
				</li>
				<li>模拟qq消息发送（讲解的是某些按钮只能点击一次）</li>
				{{info}}<input v-model="msg" />
				<button @click="send">发送多次 </button>
				<button @click.once="send">只能发送一次 </button>
			</ul>			
			</div>
		</div>
	</body>
	<script>
		//通过vue实例去渲染vue所管理的边界
		new Vue({
			el:'#app',
			data() {
				return {
					aclz:'a',
					bclz:['b','c'],
					msg:'',
					info:''
				};
			},
			methods:{
				a(){
					alert("事件A触发！！！");
				},
				b(){
					alert("事件B触发！！！");
				},
				c(){
					alert("事件C触发！！！");
				},
				d(){
					alert("事件D触发！！！");
				},
				send(){
					this.info=this.msg;
					this.msg='';
				}
			}
		})
	</script>

效果：
在这里插入图片描述
以及本身按回车发送消息
核心代码：（加入到input标签中）

 v-on:keyup.enter="send"

2.3 Vue组件

2.3.1 局部组件的注册
<body>
		<!-- vue所管理的边界 -->
		<div>
			<div id="app">
			<ul>
				<li>
					<h3>局部组件的注册</h3>
					<my-button></my-button>
					
				</li>
				<li>
					<h3>父子组件的传参（父传子）</h3>
					<my-button></my-button>
				</li>
				<li>
					<h3>父子组件的传参（子传父）</h3>
					<my-button></my-button>
				</li>
				<li>
					<h3>全局组件的注册</h3>
					<my-button></my-button>
				</li>
			</ul>			
			</div>
		</div>
	</body>
	<script>
		//通过vue实例去渲染vue所管理的边界
		new Vue({
			el:'#app',
			data() {
				return {
					
				};
			},
			components:{ //components组件  template模板
				'my-button':{
					template:'<button v-on:click="add">被zs点击了{{n}}次</button>',
					data() {
						return {
							n:1
						};
					},
					methods:{
						add(){
							this.n=this.n+1;
						}
					}
				}
			}
		})
	</script>

效果图：
在这里插入图片描述

原始html有的功能在vue中也能使用,属性的绑定，事件的绑定,vue实例的变量在自定义组件中都能用
2.3.2 父子组件传参 （父传子）案例：传递m到局部组件中
<li>
					<h3>父子组件的传参（父传子）</h3>
					<my-button m="zs"></my-button>
				</li>

<script>
		//通过vue实例去渲染vue所管理的边界
		new Vue({
			el:'#app',
			data() {
				return {
				};
			},
			components:{
				'my-button':{
					props:["m"],
					template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
					data() {
						return {
							n:1
						};
					},
					methods:{
						add(){
							this.n=this.n+1;
						}
					}
				}
			}
		})
	</script>

效果图：
在这里插入图片描述

2.3.2 父子组件传参 （子传父） 案例：将自定义组件内部的n传出去 通过自定义事件去完成
<body>
		<!-- vue所管理的边界 -->
		<div>
			<div id="app">
			<ul>
				<li>
					<h3>局部组件的注册</h3>
					<my-button></my-button>
					
				</li>
				<li>
					<h3>父子组件的传参（父传子）</h3>
					<my-button m="zs"></my-button>
					<my-button m="lx"></my-button>
				</li>
				<li>
					<h3>父子组件的传参（子传父）</h3>
					<my-button v-on:three-click="getData"></my-button>
					接收自定义组件中内部的变量值：{{innerNum}}
				</li>
				<li>
					<h3>全局组件的注册</h3>
					<my-button></my-button>
				</li>
			</ul>			
			</div>
		</div>
	</body>
	<script>
		//通过vue实例去渲染vue所管理的边界
		new Vue({
			el:'#app',
			data() {
				return {
					innerNum:1
				};
			},
			methods:{
				getData(v){
					this.innerNum=v;
				}
			},
			components:{
				'my-button':{
					props:["m"],
					template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
					data() {
						return {
							n:1
						};
					},
					methods:{
						add(){
							this.n=this.n+1;
							//自定义一个三击事件
							if(this.n%3==0){
								this.$emit('three-click',this.n)
							}
							
						}
					}
				}
			}
		})
	</script>

效果：
在这里插入图片描述

	<body>
		<!-- vue所管理的边界 -->
		<div>
			<div id="app">
			<ul>
				<li>
					<h3>局部组件的注册</h3>
					<my-button></my-button>
					
				</li>
				<li>
					<h3>父子组件的传参（父传子）</h3>
					<my-button m="zs"></my-button>
					<my-button m="lx"></my-button>
				</li>
				<li>
					<h3>父子组件的传参（子传父）</h3>
					<my-button v-on:three-click="getData"></my-button>
					接收自定义组件中内部的变量值：{{innerNum}}
					作者：{{au}}
				</li>
				<li>
					<h3>全局组件的注册</h3>
					<my-button></my-button>
				</li>
			</ul>			
			</div>
		</div>
	</body>
	<script>
		//通过vue实例去渲染vue所管理的边界
		new Vue({
			el:'#app',
			data() {
				return {
					innerNum:1,
					au:''
				};
			},
			methods:{
				getData(v,b){
					this.innerNum=v;
					this.au=b;
				}
			},
			components:{
				'my-button':{
					props:["m"],
					template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
					data() {
						return {
							n:1,
							auther:'only老k'
						};
					},
					methods:{
						add(){
							this.n=this.n+1;
							//自定义一个三击事件
							if(this.n%3==0){
								this.$emit('three-click',this.n,this.auther)
							}
							
						}
					}
				}
			}
		})
	</script>

传递两个参数
在这里插入图片描述

2.3.3 全局组件的注册
<li>
					<h3>全局组件的注册</h3>
					<my-button2></my-button2>
</li>

写入到script中定义即可

		Vue.component('my-button2',{
					props:["m"],
					template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
					data() {
						return {
							n:1,
							auther:'only老k'
						};
					},
					methods:{
						add(){
							this.n=this.n+1;
							//自定义一个三击事件
							if(this.n%3==0){
								this.$emit('three-click',this.n,this.auther)
							}
							
						}
					}
				})

效果图：
在这里插入图片描述

only老K
关注
专栏目录
vue中的VNode
瓜冬瓜的博客
08-26 1万+
VueJS的虚拟DOM是基于开源Snabbdom的。 前端发展很多年，直到出现了虚拟DOM，才可以从操作DOM解脱出来。 JQuery的出现，简化了操作DOM的过程，但是还是摆脱不了操作DOM。 而虚拟DOM的目的是，使用虚拟节点代替真实节点，所有操作都发生在虚拟节点，然后通过diff算法对比新旧两棵虚拟DOM，计算出更新真实DOM的最少操作，由框架代替用户执行这些操作，所以用户可以把大量的精力放...
vue中组件参数
Only_ruiwen的博客
07-07 2098
我们来聊一下vue中的组件参数. 1.vue中组件参数 我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 我们来看下最为简单和常见的vue代码 &lt;div id="root"&gt; &lt;item content="hello"...
24vue学习——vue的组件的基础学习（组件化和模块化的区别）
weixin_42530160的博客
08-05 4195
我们前面学习很多关于 vue 的知识了，下面让我们来学习 vue 中一个重要的知识点——组件。这篇文章我们就来看看组件到底是什么吧。
vue中如何动态添加readonly属性
weixin_33912246的博客
08-01 7137
1 <inpu :readonly="status ? false : 'readonly'"> status 为 false时添加 readonly 属性，只读，false不要加引号！ 转载于:https://www.cnblogs.com/veritas-sj/p/9400131.html
【Vue】模块基本语法
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
09-18 4535
v-if和v-show的区别是什么？计算属性和监听属性的区别？还有那些是你不知道的冷知识？来看这篇文章吧！熟练的掌握Vue.js里面的基本语法，让你的开发效率事半功倍！
vue基本语法总结大全
最新发布
xueluoyouying的博客
02-04 2394
vue基本语法总结
Vue-模块化
张锦的博客
04-23 4642
记录学习的点点滴滴
Vue Eslint语法检测工具
长沙火山
12-10 2954
一、ESlint 简介 1. Lint 的含义 如果你写自己的项目怎么折腾都没关系，但是在公司中老板希望每个人写出的代码都要符合一个统一的规则，这样别人看源码就能够看得懂，因为源码是符合统一的编码规范制定的。 那么问题来了，总不能每个人写的代码老板都要一行行代码去检查吧，这是一件很蠢的事情。凡是重复性的工作，都应该被制作成工具来节约成本。这个工具应该做两件事情： 提供编码规范； 提供自动检验代码的程序，并打印检验结果：告诉你哪一个文件哪一行代码不符合哪一条编码规范，方便你去修改代码。 Lint 因此而诞
Vue setup语法糖
闪电⚡之王的博客简介
01-01 638
setup语法糖指的是Vue组件当中的setup字段是 Vue3 的一个新语法糖，在 setup 函数中。所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。使用方式就是仅需要在 script 标签加上 setup 关键字即可。
VScode中vue文件的语法提示
abundoning的博客
06-15 2160
VScode实现vue文件语法提示
vue-multipage vue 模块化开发打包
11-23
3. **公共模块共享**：虽然页面是分离的，但Vue-multipage 仍然允许你定义公共模块，如Vue实例、全局组件、样式等，这些公共模块会被所有页面共享，减少重复代码。 4. **插件支持**：Webpack 插件体系强大，Vue-...
在vue项目中使用sass语法问题
10-16
在Vue项目中使用Sass语法是前端开发中的一个重要话题，尤其对于希望提高CSS组织性和复用性的开发者来说。Sass（Syntactically Awesome Stylesheets）是一种CSS预处理器，它扩展了CSS的功能，支持变量、嵌套规则、...
Vue小模块之功能全面的表格
06-08
Vue小模块之功能全面的表格，是一个基于Vue.js框架实现的高效、灵活的表格组件，旨在提供丰富的数据展示和操作功能。这个模块充分利用了Vue.js的响应式特性，结合Element UI库，实现了增删改查、Excel导入导出等多种...
vue3.0基础语法的练习笔记
02-07
* Context 里面的三个重要的东西是 attrs、slots 和 emit，它们相当于 Vue 2 里面的 this.$attrs,this.$slots,this.$emit。 Ref 和 Reactive Ref 和 Reactive 是 Vue 3.0 中两个非常重要的概念。Ref 用于将响应式...
vue语法.rar
08-16
三、Vue常见指令介绍上 1、插值表达式 {{}} 当模型中的数据发生改变时，那么视图中的数据也对应的发生改变。 2、v-text 将一个变量的值渲染到指定的元素中 3、v-html 可以真正输出html元素 4、v-model 实现...
ES6（一）
only老K的博客 qq:1025271924
11-27 1115
博客目标let和const关键字let特点const特点对象定义简写模板字符串箭头函数简单来一手 let和const关键字 let特点 1.在块级作用域里有效（比如循环遍历内部就可以用let定义变量） { let a='https://blog.csdn.net/weixin_44255950'; var b='only老K'; console.log(b); ...
SPA项目之登录注册
only老K的博客 qq:1025271924
09-27 819
目录安装开发模块检测是否安装成功SPA项目完成登录注册登录注册页跳转提供Login.vueReg.vue配置App.vuemain.js效果图：项目源码：eclipes项目：SPA项目 安装开发模块 在搭建好的spa项目的文件所在位置中进行安装 npm install element-ui -S npm install axios -S npm install qs -S npm inst...
使用vue-cli搭建SPA项目
only老K的博客 qq:1025271924
09-25 652
目录目标前提简介操作开始安装vue-cli测试是否安装成功使用脚手架vue-cli(2.X版)来构建项目出现如下代码代表成功测试并打开运行结果：简单修改搭建出来的项目vue项目结构说明修改端口号如何在SPA项目中使用路由思路操作：结果学习嵌套路由的使用实现项目大体图片注意点结果图 目标 使用vue-cli搭建SPA项目 前提 搭建好NodeJS环境 可以在这里学习并且安装（我的博客） https:...
SPA项目首页导航以及左侧菜单
only老K的博客 qq:1025271924
09-28 642
目录安装mockjs依赖查看是否成功配置开发环境及生产环境dev.env.jsprod.env.jsmain.js测试：前台主界面的搭建拷贝组件以及配置组件配置问题一效果图退出功能Vue总线概念图解左侧树收缩功能效果： 安装mockjs依赖 安装方法不在啰嗦 npm install mockjs -D 查看是否成功 配置开发环境及生产环境 dev.env.js 'use strict' ...
Vue路由模块化配置实战解析
在上述示例中，我们使用了`component: () => import('@/views/...')`这样的语法，这是Vue Router的懒加载功能，它允许在实际访问到某个路由时才去加载对应的组件，从而减少初始加载时间。 四、路由守卫与重定向 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值