vue3框架学习之路1 Vue起步

最新推荐文章于 2024-12-12 09:13:18 发布

原创最新推荐文章于 2024-12-12 09:13:18 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍Vue3的基础应用，包括创建应用实例、数据绑定、方法调用等核心概念，并通过示例展示了如何在网页上显示数据及实现数据变化的实时更新。

目前比较流行vue，所以要学习一下vue3的应用，大家一起吧!!!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="hello-vue">
		  {{ message }}
		</div>
		
		<script>
		const HelloVueApp = {
			//data是一个函数，所以要注意写return
		  data() {
		    return {
		      message: 'Hello Vue!!'
		    }
		  }
		}
		//找到要使用的根组件（HelloVueApp，再去指定要使用的DOM元素
		Vue.createApp(HelloVueApp).mount('#hello-vue')
		</script>
		<div id="app">{{ count }}</div>
		
		<script type="text/javascript">
			const app = Vue.createApp({
				data(){
					return{
						count: 4
					}
				}
			})
			const vm = app.mount("#app");//div的innerhtml的值和下方一样会被改变
			//两种写法
			document.write(vm.count +"<br>")//=>4
			document.write(vm.$data.count + "<br>")//=>4
			//两种修改方式
			vm.count = 5 // 修改上面data函数中count的值
			document.write(vm.count + "<br/>");//=>5
			document.write(vm.$data.count + "<br/>");//=>5
			vm.$data.count = 6;
			document.write(vm.count + "<br/>");//=>6
			document.write(vm.$data.count);//=>6
			
		</script>
		
		<div id="ap">
			
		</div>
		<script type="text/javascript">
			const t = Vue.createApp({
				data(){
					return{
						index: 1
					}
				},
				methods:{
					increase(){
						this.index++
					}
				}
			})
			const tt = t.mount("#ap");
			document.write(tt.index + "<br/>");
			tt.increase();
			document.write(tt.index)；
		</script>
	</body>
	
</html>