Vue入门笔记Day7

最新推荐文章于 2024-08-13 16:15:07 发布
最新推荐文章于 2024-08-13 16:15:07 发布
阅读量67 收藏
点赞数
分类专栏： Vue 文章标签： vue javascript html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43273921/article/details/115397063
版权
本文详细讲解了Vue中如何使用is属性处理h5标签规范，子组件data的函数定义，ref的使用与父子组件数据传递，组件参数校验，原生事件绑定，以及非父子组件间通信的总线机制。深入剖析了组件开发中的关键知识点。
摘要由CSDN通过智能技术生成

1.组件使用中的细节点

（1）使用is解决h5标签的bug

h5编码规范tbody里面必须跟tr所以不能直接写成组件，有序列表与无序列表也一样，还有下拉列表等。
is属性解决：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件使用中的细节点 1.使用is解决h5标签的bug</title>
		<script src="../vue.js">
			
		</script>
	</head>
	<body>
		<div id="root">
			<table border="" cellspacing="" cellpadding="">
				<tbody>
					<tr is="row"></tr>
					<tr is="row"></tr>
					<tr is="row"></tr>         <!-- h5编码规范tbody里面必须跟tr所以不能直接写成row -->
				</tbody>						<!-- is属性解决 -->
			</table>
			<!-- <ol>
				<li is="row"></li>
			</ol>                                     菜单与列表一样也需要is属性解决
			<select name="">
				<option is="row"></option>
			</select> -->
		</div>
		
		<script type="text/javascript">
			Vue.component('row',{
				template:'<tr><td>this is row</td></tr>'
			})
			var vm = new Vue({
				el:'#root'
			})
		</script>
	</body>
</html>

（2）子组件定义data必须为函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2.子组件定义data必须为函数</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<table border="" cellspacing="" cellpadding="">
				<tbody>
					<tr is="row"></tr>
					<tr is="row"></tr>
					<tr is="row"></tr>				
				</tbody>
			</table>
		</div>
		<script type="text/javascript">
			Vue.component('row',{ 
				data:function(){        //在子组件定义data必须是一个函数，不能是一个对象
					return{
						conent:'this is row'
					}
					
				},
				template:'<tr><td>{{conent}}</td></tr>'
			})
			var vm = new Vue({
			el:'#root'
		})
		</script>
		
	</body>
</html>

（3）ref使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ref使用</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<div 
				ref='hello'   <!-- 引用的名字hello -->
				@click="handleClick"
			>
				hello word
			</div>
		</div>
		<script type="text/javascript">
				
			var vm = new Vue({
				el:'#root',
				methods:{
					handleClick:function(){
						console.log(this.$refs.hello.innerHTML)
						            // $refs.ref指的是所有的引用，里面有一个ref引用，在这里叫hello,找到hello这个引用
					}
				}
			})
		</script>
	</body>
</html>

（4）ref完成number实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ref使用2</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<counter ref="one" @change="handleChange()"></counter>
			<counter ref="two" @change="handleChange()"></counter>
			<div >
		      {{total}}
			</div>
		</div>
		<script type="text/javascript">
			Vue.component('counter',{
				template: '<div @click="handleChange">{{number}}</div>',
				data:function(){
					return {
						number:0
					}
				},
				methods:{
					handleChange:function(){
						this.number ++,
						this.$emit('change')
					}
				}
			})
			var vm = new Vue({
				el:'#root',
					
				data:{
					total: 0 
				},
				methods:{
					handleChange:function(){
						this.total = this.$refs.one.number + this.$refs.two.number
						console.log(this.$refs.one.number)
						console.log(this.$refs.two.number)
						
						
					}
				}
			})
		</script>
	</body>
</html>

（5）父组件的数据传递

父组件通过属性向子组件传递数据.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父组件的数据传递</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root"> <!-- 父组件通过属性向子组件传递数据 -->
			<counter :count="0"></counter>
			<counter :count="2"></counter>
			
		</div>
		<!-- 父组件传递过来的内容，子组件不要修改，单向数据流 -->
		<script type="text/javascript">
			var counter = {
				props:['count'],
				data:function(){  //data里面定义初始值为count的number，
				                   //因为单向数据流，count不能改变，用number代替
					return{
						number:this.count
					}
				},
				template:'<div @click="handleClick">{{number}}</div>',
				methods:{
					handleClick:function(){
						this.number++
					}
				}
			}
			
			var vm = new Vue({
				el:'#root',
				components:{
					counter:counter
				}
			})
		</script>	
	</body>
</html>

（6）子组件向父组件传值

子组件通过事件触发向父组件传值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父组件向子组件的数据传递</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root"> <!-- 父组件通过属性向子组件传递数据 -->
			<counter :count="3" @inc="handleIncrease"></counter>
			<counter :count="2" @inc="handleIncrease"></counter>
			                <!-- 监听 -->
			<div id="">
				{{total}}
			</div>
		</div>
		<!-- 父组件传递过来的内容，子组件不要修改，单向数据流 -->
		<script type="text/javascript">
			var counter = {
				props:['count'],
				data:function(){
					return{
						number:this.count
					}
				},
				template:'<div @click="handleClick">{{number}}</div>',
				methods:{
					handleClick:function(){
						this.number=this.number+2;
						this.$emit('inc',2)
						          //监听事件的名字可以随便写
						//子组件向父组件传值通过事件的方式
					}
				}
			}
			
			var vm = new Vue({
				el:'#root',
				data:{
					total:5
				},
				components:{
					counter:counter
				},
					
				methods:{
					handleIncrease:function(step){
						alert(step);      //接受到的step就是this.$emit('inc',2)后面带的2
						this.total+=step;
					}
				}
			})
		</script>	
	</body>
</html>

2.组件参数校验与非props特性

1.组件参数校验

props特性：
（1）父组件调用子组件传递了count，而子组件在props里面也声明了count。
（2）不会显示在dom属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件参数校验与非props特性</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<child content="Hello word"></child>
		</div>
		
		<script type="text/javascript">
			Vue.component('child',{
				props:{
					content:{
						type:String,//类型校验
						// required:false,  组件接受的这个count属性是必传的或者不必传的，取决于后面跟得值
						// default:'default value'  当content不传的时候，显示默认值的使用
						validator:function(value){  //自定义校验器  ，value表示子组件被传入的内容
							return(value.length > 5)
						}
					},
				},
				template:'<div>{{content}}</div>'
			})
			var vm = new Vue({
				el:"#root",
				
			})
		</script>
	</body>
</html>

2.非props特性

非props特性：
（1）子组件向父组件传递了props属性，但子组件没有声明接受父组件，子组件里面无法使用count。
（2）会显示到dom属性中。

3.组件原生事件绑定

可以直接加.native表示原生事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>给组件绑定原生事件</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<child @click="handleClick"></child>  <!-- 直接绑定的事件是一个自定义的事件，不会直接触发
			<child @click.native="handleClick"></child>
						 .native事件修饰符，监听的就是原生事件了 -->
		</div>
		<script type="text/javascript">
			Vue.component('child',{
				template:'<div @click="handleChildClick">child</div>',
					
				methods:{                                
					handleChildClick:function(){     //点击click---子组件监听到自身div被点击---触发自定义事件
						this.$emit('click')         //父组件监听了click事件---handleClick会执行
					}
				}
			})
			var vm = new Vue({
				el:"#root",
				methods:{
					handleClick:function(){
						alert('click')
					}
				}
			})
		</script>
	</body>
</html>

4.非父子组件间的传值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>非父子组件间的传值（总线机制）(Bus/总线/发布订阅模式/观察者模式)</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<child content="Dell" ></child>
			<child content="Lee"></child>
			
		</div>
		<script type="text/javascript">
			Vue.prototype.bus = new Vue()
			// Vue的prototype上挂载bus，指向Vue实例，
			// 之后调用new Vue或创建组件的时候，每一个组件上都会有bus属性
			//也就是在Vue这一类上挂载了bus
			Vue.component('child',{
				data:function(){
						
					return{
					selfContent:this.content
					}
				},
				props:{
					content:String
				},
				template:'<div @click="handleClick">{{selfContent}}</div>',
				methods:{
					handleClick:function(){
						alert(this.selfContent)
						this.bus.$emit('change',this.selfContent)
					},
				},
				mounted:function(){
					var this_=this
					this.bus.$on('change',function(msg){
						alert(msg),
						this_.selfContent =msg
					})
				}
			})
			
			var vm = new Vue({
				el:'#root'
			}) 
		</script>
	</body>
</html>
阿浩！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门笔记Day2
weixin_43273921的博客
03-31 98
1.MVVM模式 传统设计模式MVP：Model层:数据层 Presenter层:呈现层控制器（控制层） View层：视图层（一般指dom展示） 2.组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： （1）全局组件 语法格式如下： Vue.component(组件名,{方法}) Vue.component("TodoItem"
Vue入门笔记Day5
weixin_43273921的博客
04-01 69
1.Vue模板语法 （1）插值表达式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div i
Vue入门笔记Day 1
weixin_43273921的博客
03-31 101
1.创建Vue实例 var vm = new Vue({ }) 2. data 用于定义属性。 methods 用于定义的函数，可以通过 return 来返回函数值。 {{ }} 用于输出对象属性和函数返回值。 3.插值 数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值. 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello world&lt
Vue入门笔记Day6
weixin_43273921的博客
04-01 98
1.Vue中的样式绑定 （1）class的对象绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue中的样式绑定</title> <script src="../vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/c
Vue入门笔记Day3
weixin_43273921的博客
04-01 60
完成TodoList的删除功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="
Vue入门笔记Day 8
weixin_43273921的博客
04-09 86
一.vue中的css动画原理 1.过渡显示 （1）transition标签 transition表示包裹的内容会有一个动画过渡效果，动画效果必须包含在transition标签里。 （2）动画流程 transition包裹后会vue会自动分析css样式，构建一个动画流程。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue中的css动画原理</title&g
Vue入门笔记Day4
weixin_43273921的博客
04-01 71
1.Vue实例 变量vm app 一般都代表vue实例 el:负责定义Vue定义的接管的dom最外层标签 2.生命周期函数 生命周期函数就是Vue实例在某一个时间点会自动执行的函数。 （1）beforeCreate <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../vue.js" type="tex
Vue入门笔记（1）
程序员的世界
11-26 213
这里写自定义目录标题一、vue对象创建vue中常用属性二、vue常用指令三、vue过滤器全局过滤器私有过滤器四、Vue的生命周期 一、vue对象创建 <html> <head> <!-- 导入vue.js --> <script src="lib/vue.js"></script> </head> <body> ...
Vue学习day03笔记
m0_73158362的博客
06-05 656
day03 一、今日目标 1.生命周期 生命周期介绍 生命周期的四个阶段 生命周期钩子 声明周期案例 2.综合案例-小黑记账清单 列表渲染 添加/删除 饼图渲染 3.工程化开发入门 工程化开发和脚手架 项目运行流程 组件化 组件注册 4.综合案例-小兔仙首页 拆分模块-局部注册 结构样式完善 拆分组件 – 全局注册 二、Vue生命周期 思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来） Vue生命周期：就是一个Vue实例从创建 到 销毁 的
Vue入门day01笔记
10-27
### Vue入门day01笔记详解 #### 库与框架的区别 在软件开发中，库（library）和框架（framework）都是提高开发效率、简化开发流程的重要工具，但它们有着本质的区别。 - **库（Library）**： - 库通常为开发者...
Vue入门笔记以及项目源码
04-18
这个压缩包中的“Vue入门笔记以及项目源码”提供了从基础到实践的全面学习材料，覆盖了Vue的核心概念和技术。 首先，让我们按照文件名的顺序逐个解析学习内容： 1. **Day 01**：通常会涵盖Vue的基础知识，包括Vue...
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
最新尚硅谷vue系列笔记
02-11
7. **Vue 3 更新**：Vue 3版本带来了许多改进，如Composition API，它允许开发者按需组合功能，提高了代码的可重用性和可维护性。另外，还引入了Teleport，用于在特定位置插入组件，优化了响应式系统的性能，并支持...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 469
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 624
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
vue2前端阿里云oss服务端签名直传
最新发布
weixin_74285634的博客
08-13 119
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
Electron学习与总结
song854601134的博客
08-12 146
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
Vue入门与基础知识点总结
本文档是一篇关于个人学习Vue框架的笔记，作者分享了自己初次接触Vue.js时的心得体会和关键知识点。文章按照时间线展开，从认识Vue.js及其原因、安装与配置，到初体验中的基础组件如HelloVuejs、列表渲染和计数器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值