第一个Vue.js程序-Hello World

2023年9月10日

标签：Vue.js, 应用开发

一切还得从那个“hello world”说起。

最近在学vue3（以下简称vue，vue2和vue3貌似区别挺大的，以后学到vue2再说吧），发现还是得从hello world入手啊。（如果nginx也能这么简单从例子入手就好了）。

Vue.js是什么
Vue的简单介绍

Vue是用JavaScript编写的，用于构造前端的MVVM响应式框架。

写者注
MVVM：即Model-View-ViewModel。简单来说就是既要将后端的数据转换为用户能看到的前端页面，也要将看到的页面转化成后端的数据。

响应式简单来说就是–不用你刷新页面，页面会自己刷新。这点接下来还会提到。

而关于vue用在哪，官网给出了很明确的解释。

单页面应用 (SPA)：一些应用在前端需要具有丰富的交互性、较深的会话和复杂的状态逻辑。构建这类应用的最佳方法是使用这样一种架构：VUE 不仅控制整个页面，还负责处理抓取新数据，并在无需重新加载的前提下处理页面切换。这种类型的应用通常称为单页应用 (SINGLE-PAGE APPLICATION，缩写为 SPA)。

我的理解：你初学html时写的那些html文档，最后展示的只是静态页面。而基于vue框架构建的应用（网站也好，QQ也好），说白了就是个应用程序。这个应用程序除了html的部分外，还包括了JavaScript和CSS。它已经不是那个“单纯的”html静态页面了。

扯的有点远，介绍太多也没啥意义，不如自己搜。

通过CDN的方式引入Vue.js程序–Hello World
CDN：Content Delivery Network–内容分发网络

我直接说CDN可能各位不太了解，但我举个Hello World的例子相信各位就能理解了。

假设我现在想写一个html页面，让其显示“hello world”和一张表情包。很简单，直接用img图像标签就行了。

代码也很简单，如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<img src="https://white-night.club/wp-content/uploads/2023/08/18b0aa53599f291e9f1c311ae1f552f.jpg">
	<h2>hello world</h2>
	
</body>
</html>

实现效果如图

那么现在有一个问题，我不想让它显示hello world了，我想改成“goodbye world”，该怎么实现呢？

也很简单，改一下html文档的代码然后刷新一下页面即可。但这就意味着，这个页面是静态的，固定的。只有“刷新”才能获取新的页面。

但是，如果引入了vue.js之后，先来看下完整的代码。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>

	<div id="app">
		<div><img v-bind:src="url"></div>
		<h2>{{text}}</h2>
	</div>
	
	<script>
		const vm=Vue.createApp({
			data(){
				return{
					url:'https://white-night.club/wp-content/uploads/2023/08/18b0aa53599f291e9f1c311ae1f552f.jpg',
					text:'hello world',
				}
			}
		}).mount('#app');
	</script>
</body>
</html>

只用一行代码就能向项目中引入vue框架。而这就是通过CDN的方式来引入vue。不过由于大陆地区的特殊原因，unpkg的访问速度稍微有点慢，所以不是很建议用unpkg。

写者注
你如果在国内真的通过unpkg去引入vue框架，虽然不用翻墙，但你自己写点东西试一下，就能明显的感受到这个“慢”是慢在哪里了。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>

	<div id="app">
		<div><img v-bind:src="url"></div>
		<h2>{{text}}</h2>
	</div>
	
	<script>
		const vm=Vue.createApp({
			data(){
				return{
					url:'https://white-night.club/wp-content/uploads/2023/08/18b0aa53599f291e9f1c311ae1f552f.jpg',
					text:'hello world',
				}
			}
		}).mount('#app');
	</script>
</body>
</html>

写者注
如果想更直观的体会vue引入前后的对比，可以先写根元素（div），再引入vue。

分析代码
简单的分析下vue的代码

先来分析整体代码，删去无关项只保留结构的话代码如下。

<script src="https://unpkg.com/vue@next"></script>

	<div id="app"></div>
	<script>
		const vm=Vue.createApp().mount('#app');
	</script>

vue应用,都说了是应用，那么就需要有一个应用实例，在这个实例的基础上去加载对应的内容。

而创建了应用实例还不够。只有在调用了.mount()方法后，应用实例才会被渲染出来，也就是才调用该方法后，你设计的那些图片啊，文本啊才会展示出来。而.mount()方法接收的则是一个“容器”，容器里放什么就看自己需求了。

接下来是div的内容，这里div被当作是vue的根元素（也被叫做根组件），vue应用程序的内容都会被挂载到这个div内。比较简单，只作个简单的解释吧。

<div id="app">
		<div><img v-bind:src="url"></div>
		<h2>{{text}}</h2>
</div>

v-bind：vue的指令。这里是将img标签的src特性于表达式url进行绑定。当url的内容变更时，图像的src也会跟着改变，这也是vue响应式更新html特性的体现。
{{text}}：官方术语叫“文本插值”，这种双大括号的语法叫做Mustache语法。和上面一样，也是种“数据绑定”。text属性的变更也会导致h2标签的变更。

不过更有意思的vue对于数据绑定还支持使用JavaScript的表达式，这块后续会提到。

最后是创建应用实例的部分。

const vm=Vue.createApp({
			data(){
				return{
					url:'https://white-night.club/wp-content/uploads/2023/08/18b0aa53599f291e9f1c311ae1f552f.jpg',
					text:'hello world',
				}
			}
		}).mount('#app');

createAPP()就是创建vue应用程序的实例。在调用它的方法mount(“某容器”)后，容器内的所有数据变化都会被vue框架所监控。

简单来说，把上面的div容器理解为前端展示的页面，这里的data()函数作为后端的数据库。createAPP()则是搭建一个能将前后端相互绑定的桥梁。

怎么体会到vue对于html页面的影响？
f12开发者->控制台(Console)

虽然上面提到过了。但那种展示方法不够明显。最直观的方法就是在你自己写的页面（比如我写的test.html)上按f12进入开发者（或者鼠标右键然后选择“检查”也行），然后选择“控制台”(Console)。

照着图中的输入vm.test=”Goodbye World”也行，输入完之后按下回车，你就会发现：即使你没有刷新页面，原先的Hello World也变成了Goodbye World。

当然，由于你html保存在本地（或服务器），不修改原本的html的话刷新一下页面还是会变成原样的。