vue3框架学习之路1 Vue起步

最新推荐文章于 2024-03-06 07:00:00 发布

God shen

最新推荐文章于 2024-03-06 07:00:00 发布

阅读量146

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_53655745/article/details/119080383

版权

目前比较流行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>

God shen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3框架学习之路1 Vue起步

目前比较流行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> <
复制链接

扫一扫