WebApp开发自学记录：Vue3.x应用的创建、使用

最新推荐文章于 2024-05-21 21:06:26 发布

allenkjjf

最新推荐文章于 2024-05-21 21:06:26 发布

阅读量364

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/allenkjjf/article/details/122471235

版权

前言

本系列《自学记录》文章用于未来工作中如发生意外情况（如遗忘、教导朋友）的查阅，本人铭记“学以致用”的原则，因此本系列文章可能不适合用于Vue的系统性学习，但我会尽全力在文章涵盖自己在学习道路上所遇到的困难，未来文章的更新周期大约为每日一篇左右。（同本人的学习速度挂钩）

本系列文章每一篇都将包含代码展示、代码拆分与解释、补充内容三个部分。其中需要强调的是代码拆分与解释的部分，解释目的在于“方便易用”，因此会较为通俗、表述不够专业、不够全面，欢迎大家在评论区参指正与补充。

另外，关于许多“代码拆分与解释”部分没有解释清楚的内容，将会在“补充内容”部分配合官方文档等资料进行完善，如果存在希望了解、完善更多相关知识，请一定要阅读。最后，十分推荐在阅读完教程类文章后查找官方的文档进行阅读做进一步的了解、研究，往往会大有收益。

正文

1.代码展示

以下为创建并使用应用的完整代码展示（不包含链接Vue文件的部分）。

	<body>
		<div id="times">
			{{ count }}
			{{ $data.count }}
		</div>
		<script type="text/javascript">
			const app_times = Vue.createApp({
				data(){
					return{
						count:0
					}
				},
				methods:{
					increment(){
						this.count++;
					}
				}
			});
			const vm = app_times.mount('#times');
			vm.increment();
		</script>
	</body>

2.代码拆分与解释

（一）html部分

		<div id="times">
			{{ count }}
			{{ $data.count }}
		</div>

创建了一个简单的div容器，要注意的地方只有两点：id属性、{{}}双大括号语法。

从声明了id属性我们可以一下子联想到Vue的作用是发生在JavaScript部分的代码上的。而具体使用我们可以看到div区块内容下的{{}}双大括号语法，这个似乎是我们原来没有接触过的，而双大括号所包括的应该就是某一个我们希望返回的值。

（二）JavaScript部分

        <script type="text/javascript">
			const app_times = Vue.createApp({
				data(){
					return{
						count:0
					}
				},
				methods:{
					increment(){
						this.count++;
					}
				}
			});
			const vm = app_times.mount('#times');
			vm.increment();
		</script>

这段代码看着比较麻烦，但是只要先把部分括号里的东西无视掉就可以看到其简单的结构(如下所示)。其中我们可以看到创建应用一共就只有两步：

const app_times = Vue.createApp();
const vm = app_times.mount('#times');

（1）首先调用Vue.createApp()方法创建应用；

（2）然后通过mount()方法将其与id选择器挂钩。·

其中需要详细讲解的是关于Vue.createApp()方法内的内容，同理我们再拆开一次：

data(){
	return{
		count:0
		}
},
methods:{
	increment(){
		this.count++;
	}
}


<!-- 拆开后 -->

data(){
    return{
         变量名:赋值;
    }
},
methods:{
    方法名(){
        代码块;
    }
}

这个是上面创建应用时代码的大致结构，把两个代码进行对比，不难看出示例的代码返回的变量叫做count，其初始化的值为0。而保存的方法叫做increment()，其内容是令count对应的值加1。

然后是调用保存在应用的方法，位于代码的最后两句：

const vm = app_times.mount('#times');
vm.increment();

我们在将应用与id挂钩的同时，将其构建成了一个对象，名为vm，并且使用“对象.方法()”的方式调用了我们保存在应用的方法。因此最终输出到页面上的结果是两个1。

3.补充内容

根组件

在Vue.3x的官方文档中(应用 & 组件实例 | Vue.js)，对于将应用与id挂钩的部分是这样描述的：

传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。

例如，如果你想把一个 Vue 应用挂载到 <div id="app"></div>，应该传入 #app：
const RootComponent = { 
  /* 选项 */ 
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')
与大多数应用方法不同的是，mount 不返回应用本身。相反，它返回的是根组件实例。

其他的Vue应用属性

对于本篇文章中创建的应用，仅介绍了Vue应用中的两种属性（property），即data和methods，分别为数据和方法，还有的Vue实例属性包括props，computed，inject 和 setup。将放在未来的文章中进行讲解，因此不必怀疑Vue应用的功能性。

生命周期钩子函数

有一类函数，存在于一个应用的生命周期里的不同阶段，例如应用被创建、数值被更新、最后被取消等等，然后这一类方法可以在这些事件发生时准确的自动调用，如created（被创建）、mounted（被挂载）、updated（数据被改变）和 unmounted（被取消挂载）。它们就是生命周期钩子，而语法中的this，则用于指向调用它的当前活动实例。

例如示例中的代码可以做出如下更改，改变显示的结果：

        <script type="text/javascript">
			const app_times = Vue.createApp({
				data(){
					return{
						count:0
					}
				},
				methods:{
					increment(){
						this.count++;
					}
				},
				created() {
					this.count=5;
				}
			});
			const vm = app_times.mount('#times');
			vm.increment();
		</script>

变量count的初始值通过created函数在创建时更改为5，因此最终输出的结果为6。