【无标题】

最新推荐文章于 2025-05-05 22:15:46 发布

Kateri_a

最新推荐文章于 2025-05-05 22:15:46 发布

阅读量96

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/ChenBo8520/article/details/125158363

版权

VUE

<body>
		<div id="counter">
		  Counter: {{ counter }}
		</div>
		<script>
			const Counter = {
			  data() {
			    return {
			      counter: 100
			    }
			  }
			}
			
			Vue.createApp(Counter).mount('#counter')
		</script>
	</body>

‘#counter’ 是上面的id
注意构造函数
beforeCreat() VUE程序创建前
和 Creat() VUE程序创建后
created() 内可以访问数据
mounted() 挂载后可以控制HTML
v-bind: 中的v-bind可以省略只保留冒号即可，用于绑定属性

VUE-事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
		
	</head>
	<body>
		<div id="counter">
		 <button v-on:click="fun(10)">点击fun无参</button><br>
		 <!--省略写法 -->
		 <button @click="fun(10)">点击有参</button>
		 <br> 
		 <input type="text" @keydown="keyFun($event)"/>
		
		</div>
		<script>
			const Counter = {
			  data() {
			    return {
			      
			    }
			  },
			  methods:{
				  fun(a){
					  a = 10
					  alert(a);
				  },
				  keyFun(e){
						if(e.keyCode == 65){
							alert("a你好");
						}
					}
			  }
			}
			Vue.createApp(Counter).mount('#counter')
			
			
		</script>
	</body>
</html>

函数可以设置参数也可以不设置参数