mirror of
				https://github.com/vuejs/babel-plugin-jsx.git
				synced 2025-10-31 09:22:19 +08:00 
			
		
		
		
	docs: update README
This commit is contained in:
		
							
								
								
									
										54
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										54
									
								
								README.md
									
									
									
									
									
								
							| @@ -4,21 +4,71 @@ To add Vue JSX support. | |||||||
|  |  | ||||||
| ## Syntax | ## Syntax | ||||||
|  |  | ||||||
|  | ### Content | ||||||
| functional component | functional component | ||||||
|  |  | ||||||
| ```jsx | ```jsx | ||||||
| const App = () => <div></div> | const App = () => <div></div> | ||||||
| ``` | ``` | ||||||
|  |  | ||||||
| with setup render | with render | ||||||
|  |  | ||||||
|  | ```jsx | ||||||
|  | const App = { | ||||||
|  |   render() { | ||||||
|  |     return <div>Vue 3.0</div> | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | ``` | ||||||
|  |  | ||||||
| ```jsx | ```jsx | ||||||
| const App = defineComponent(() => { | const App = defineComponent(() => { | ||||||
|   const count = ref(0); |   const count = ref(0); | ||||||
|  |  | ||||||
|  |   const inc = () => { | ||||||
|  |     count.value++; | ||||||
|  |   }; | ||||||
|  |  | ||||||
|   return () => ( |   return () => ( | ||||||
|     <div> |     <div onClick={inc}> | ||||||
|       {count.value} |       {count.value} | ||||||
|     </div> |     </div> | ||||||
|   ) |   ) | ||||||
| }) | }) | ||||||
| ``` | ``` | ||||||
|  |  | ||||||
|  | fragment | ||||||
|  |  | ||||||
|  | ```jsx | ||||||
|  | const App = () => ( | ||||||
|  |   <> | ||||||
|  |     <span>I'm</span> | ||||||
|  |     <span>Fragment</span> | ||||||
|  |   </> | ||||||
|  | ) | ||||||
|  | ``` | ||||||
|  |  | ||||||
|  | ### Attributes/Props | ||||||
|  |  | ||||||
|  | ```jsx | ||||||
|  | const App = () => <input type="email" /> | ||||||
|  | ``` | ||||||
|  |  | ||||||
|  | with a dynamic binding: | ||||||
|  |  | ||||||
|  | ```jsx | ||||||
|  | const placeholderText = 'email' | ||||||
|  | const App = () => ( | ||||||
|  |   <input | ||||||
|  |     type="email" | ||||||
|  |     placeholder={placeholderText} | ||||||
|  |   /> | ||||||
|  | ) | ||||||
|  | ``` | ||||||
|  |  | ||||||
|  | ## Compatibility | ||||||
|  |  | ||||||
|  | This repo is only compatible with: | ||||||
|  |  | ||||||
|  | - **Babel 7+** | ||||||
|  | - **Vue 3+** | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user