button中增加onclick_Vue 3.0 中 jsx 语法尝试

最新推荐文章于 2023-10-09 11:54:25 发布
最新推荐文章于 2023-10-09 11:54:25 发布
阅读量1.3k 收藏
点赞数
文章标签： button中增加onclick
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30311179/article/details/113580631
版权
本文介绍了在 Vue 3.0 中如何利用 JSX 语法添加按钮的 onclick 事件，并展示了在 JSX 中绑定数据和进行组件通信的方法。通过示例，详细解释了如何在 Vue 3.0 中实现无状态和有状态组件的创建。
摘要由CSDN通过智能技术生成

Vue 3.0 正式发布了，喜大普奔?。新的语法又要学习一阵阵，不过需要在生产环境下大面积使用，可能需要等到它的周边工具：vuex，vue-router 等等全部升级完毕。

Vue 3.0 中尤大使用的了新的编译工具 vite，革了 webpack 的命?。尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。

项目创建

npm init vite-app vite-vue
cd vite-vue
npm install
npm run dev

我们发现创建的目录解构很简单bebeeb286fca71fc185ec821f0ec3743.png

使用 JSX

Vue 3.0 直接支持 jsx 语法，新建 demo.jsx


 



                

        

        




    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  晓琼爱学习
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
【Vue2】事件处理(点击、按键)

				
			

			

				

					weixin_45707229的博客
				

				

					08-19
					
					6221
					
				

			

		

		

			
				
Vue的按键点击事件@click="函数名" 或者 @click="函数名($event,参数...)"，$event是点击事件的对象。

			
		

	



                

              
                



	

		

			

				
					
vue怎么根据一个数据改变触发事件_Object.defineProperty实现一个简单的双向绑定

				
			

			

				

					weixin_39585974的博客
				

				

					12-01
					
					961
					
				

			

		

		

			
				
好久好久好久都没有更新过文章了。无论怎样，要开始加油了！切入正题ing~~~使用过vue的人都知道，vue的双向绑定是靠Object.defineProperty来实现的。抛开vue，如果让我们通过Object.defineProperty来实现一个双向绑定，应该如何实现呢？先看一段vue使用实例： "app">    <form>      <input typ...

			
		

	



                


  
              

                


	

		

			

				
					
Vue3按钮（Button）

				
			

			

				

					Mr Dear的博客
				

				

					03-10
					
					5393
					
				

			

		

		

			
				
丰富又好看的各种按钮，用于开始一个即时操作，支持：7 种类型；3 种形状；自定义按钮图标；三种尺寸；ghost 样式；自定义样式；设置链接跳转；禁用；加载中；自定义加载指示符；设置为 block 按钮等等，总之，功能丰富，简单易用😁😁

			
		

	





	

		

			

				
					
vue 给el-button加点击事件

				
			

			

				

					u013100927的专栏
				

				

					01-20
					
					4325
					
				

			

		

		

			
				
this.$refs.inputDom.$el.click() 因为el-botton 是组件 所以直接去操作是找不到Dom的


			
		

	



		

			
		



	

		

			

				
					
vue button onclick绑定_React组件的事件绑定

				
			

			

				

					weixin_42208901的博客
				

				

					02-04
					
					894
					
				

			

		

		

			
				
React组件事件绑定关于this一个问题假设有这样一个问题，求输出语句的打印varobj={fn:function(){console.log(this)}}varoutFn=obj.fnobj.fn()//this为objoutFn()//this为window为什么会出现这样的状况？函数调用函数调用有三种方式(暂时不讨论apply)fn(p1,p2...

			
		

	





	

		

			

				
					
在vue中使用jsx语法的使用方法

				
			

			

				

					10-16
				

			

		

		

			
				
在Vue中使用JSX语法可以让开发者以更接近于JavaScript的编程方式来构建组件，这种方式在React中非常流行。Vue官方推荐使用模板语法来构建Vue组件，因为这种方式直观、简洁并且在大多数场景下都足够高效。然而，当你...

			
		

	





	

		

			

				
					
Vue中jsx不完全应用指南小结

				
			

			

				

					12-13
				

			

		

		

			
				
Vue中的JSX是一种在Vue组件内部使用类似React的JSX语法来编写模板的方式。这种方式主要适用于处理复杂的逻辑和条件渲染，以及避免重复的DOM结构。本文将简要介绍Vue中使用JSX的基本语法和注意事项。  首先，为了在...

			
		

	





	

		

			

				
					
Vue2.0 + JSX

				
			

			

				

					A-Select  °
				

				

					08-07
					
					1080
					
				

			

		

		

			
				
JSX 简介
JSX是一种Javascript的语法扩展，JSX = Javascript + XML，即在Javascript里面写XML，因为JSX的这个特性，所以他即具备了Javascript的灵活性，同时又兼具html的语义化和直观性。
应用场景
为了让大家更方便的去理解JSX的作用及用法，小编先为大家罗列了几个可能会用到JSX的应用场景。
在消息框内添加html
在开发过程中，经常会用到消息框，使用消息框可能的一种写法是这样的
Message.alert({
  messge: '确定要删除?',

			
		

	





	

		

			

				
					
在Vue中使用jsx

				
			

			

				

					eswang的CSDN博客
				

				

					02-10
					
					1528
					
				

			

		

		

			
				
前言
前排警告，这不是玩具！
那、还能是啥呢
起因
最近看到好多在Vue中使用JSX的文章，我虽然是Vue入门的，但是我对Vue的熟悉程度也只有几个V-指令和简单的传值传事件了。作为目前最受欢迎的MVVM框架，其实不学习还是有些对不住自己的。但是无奈太喜欢React，所以在Vue中能使用JSX还是能勾起很多人的好奇心的。
我就是，还有么
简单Demo
对于vue-cli3和4创建的Vue工程，是可...

			
		

	





	

		

			

				
					
关于 vue3 的 jsx 写法问题

				
			

			

				

					qq_41302594的博客
				

				

					07-18
					
					2983
					
				

			

		

		

			
				
关于vue3的jsx写法问题。

			
		

	





	

		

			

				
					
login组件的两种用法_React & Vue 用法区别记

				
			

			

				

					weixin_39943101的博客
				

				

					11-21
					
					484
					
				

			

		

		

			
				
前言由于我先使用react，所以react用法在我脑海根深蒂固，现在在写vue的时候我总是想如果用react的时候我会怎么做，然后查一下找到vue该如何使用。其实大致的思想差不多，但是用法上还是有点区别。所以这篇文章就整理一下，react、vue两个框架在不同的场景下，用法的区别。希望这篇文章可以帮助你在react/vue之间自由切换。1、 创建组件ReactReact 有两种类型的组件，分别是f...

			
		

	





	

		

			

				
					
VUE防抖与节流的最佳解决方案——函数式组件

				
			

			

				

					weixin_33905756的博客
				

				

					05-21
					
					6385
					
				

			

		

		

			
				
前言

有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的。还有一个常见的场景在input标签的input事件里请求后端接口，input事件也是连续触发的，假设我输入了“12”就会请求两次接口参数分别是“1”和...

			
		

	





	

		

			

				
					
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）

				
			

			

				

					运维玄德公
				

				

					05-31
					
					6353
					
				

			

		

		

			
				
1. 点击事件参数（click）
1.1 基本使用
1.2 绑定一个方法
1.3 冒泡事件
说明
示例
2. 点击事件修饰符
2.1 .stop （阻止冒泡）
使用说明
使用示例
2.2 capture （捕获冒泡）
使用说明
使用示例
2.3 .self （只监听触发该元素的事件）
使用说明
使用示例
2.4 once （事件只触发一次）
使用说明
使用示例
2.5 鼠标的修饰符......

			
		

	





	

		

			

				
					
【Vue 基础】06-按钮点击事件

				
			

			

				

					ChaoChao66666的博客
				

				

					04-25
					
					794
					
				

			

		

		

			
				
【Vue 基础】06-按钮点击事件

			
		

	





	

		

			

				
					
vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为

					
热门推荐

				
			

			

				

					涂涂
				

				

					01-18
					
					15万+
					
				

			

		

		

			
				
其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown.......
以下click为例
注意：所有的v-on都可以简写为@，比如说v-click可以简写为@click
1.监听事件
可以用v-on指令监听
 DOM 事件，并在触发时运行一些 JavaScript 代码。通常来讲就是

			
		

	





	

		

			

				
					
浅析：如何在Vue3+Vite中使用JSX

				
			

			

				

					qq_38334677的博客
				

				

					02-17
					
					1716
					
				

			

		

		

			
				
JSX（JavaScript 和 XML）是一种语法扩展，它结合了 HTML 和 JavaScript 的功能。最初，它是在 React 中引入的，用于描述 UI 应该呈现出其交互本质的形式。由于 JSX 是在 JavaScript 语法上的扩展，因此类似于 HTML 的代码可以与 JavaScript 代码混合使用。Click Me该 button 常量称为 JSX 表达式。可以使用它在我们的应用程序中渲染标签。浏览器是无法读取直接解析 JSX 的。MyButton,

			
		

	





	

		

			

				
					
使用Vue3点击触发按钮，请求接口

				
			

			

				

					qq_40901613的博客
				

				

					05-02
					
					5689
					
				

			

		

		

			
				
事件处理方法

实践：
按钮绑定一个点击事件，然后调用这个接口，接收返回数据
@click里填一个方法名，该名称为你要调用的函数名
<el-button type=“success” @click=“runcase”>运行
在函数名里使用axios调用这个接口,get(url)里填写你要调用的接口路径


结果


...

			
		

	





	

		

			

				
					
Vue jsx onClick 点击事件无效，无法触发

				
			

			

				

					japlus的博客
				

				

					01-04
					
					1909
					
				

			

		

		

			
				
在Vue3 环境中用@vue/babel-plugin-transform-vue-jsx 就会导致onClick 事件失效
Vue2 用 @vue/babel-plugin-transform-vue-jsx 插件
Vue3 用@vue/babel-plugin-jsx 插件

			
		

	





	

		

			

				
					
vue3 h函数点击事件

					
最新发布

				
			

			

				

					m0_65730686的博客
				

				

					10-09
					
					1846
					
				

			

		

		

			
				
vue3 h函数点击事件

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值