跳到主要内容位置

创建第一个 Vue 3.x 应用

张旭乾

我们来开发第一个 Vue 3.x 的应用。我们会创建一个音乐播放列表,展示歌曲名称,还会提供一个搜索框,让用户搜索歌曲。

创建项目

首先打开 VS Code,在一个合适文件夹下边创建项目的工作空间目录,工作空间就是一个文件夹,所有跟项目有关的文件都在这个目录下,VS Code 会把它们作为一个整体看待。 然后,像开发普通 HTML 页面一样,创建 index.html、style.css 和 index.js 文件。

引入 Vue

打开 index.html 文件,在里面引入 style.css 和 index.js,这里把 index.js 的引入放到了 </body> 闭合处,这样在页面加载完成之后,才会执行 index.js 文件的代码。 接着,新建一个 lib 目录,把我们下载好的 vue 的 js 文件复制过来。 在 index.html 中,<head />标签结束前,引入 vue。

<head>
<!-- others -->
<script src="lib/vue.global.js"></script>
<link rel="stylesheet" href="style.css" />
<title>播放列表</title>
</head>

编写播放列表 HTML

我们先按照往常一样编写静态的页面,首先来看 HTML 结构:

<div id="app">
<h1>播放列表</h1>
<input type="text" placeholder="请输入要查找的歌曲名" class="search" />
<ul>
<li>What about now</li>
<li>一千万个可能</li>
<li>Me llamas</li>
</ul>
</div>

这里:

  • 我们给最外层的 div 设置了一个 id,为 app,这个后面会在挂载 vue 的时候用到,先不用管。
  • 在 div 里边,用 h1 定义了一个标题。
  • 在标题的下边,定义了一个 input 搜索框。
  • 在搜索框的下面使用了一个 ul 和一组 li 显示歌曲列表,这里我就简单的写了 3 个虚拟的歌曲,后面我们会利用 Vue 的循环来简化这种批量显示的逻辑。

编写播放列表 CSS

因为这门课的主要内容是关于 Vue 的使用方法,那么就不详细介绍 CSS 了,大体上就是把播放列表容器居中在了页面中间,设置了字体的样式和一些间距、阴影等,感兴趣的同学可以自己去看 CSS 源代码,这里我们直接把 css 代码复制过来。

* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, "PingFang SC", "Microsoft Yahei", sans-serif;
}

body {
background: #ebfafe;
display: grid;
place-items: center;
height: 100vh;
}

#app {
min-width: 375px;
min-height: 500px;
background: #ffffff;
box-shadow: 0px 0px 48px rgba(0, 0, 0, 0.25);
border-radius: 24px;
padding: 28px;
}

#app h1 {
font-size: 16px;
color: #878b91;
font-weight: 500;
}

.search {
width: 100%;
background: #f8f8f8;
border: none;
border-radius: 8px;
padding: 10px;
margin: 24px 0;
font-size: 14px;
outline: none;
}

.search::placeholder {
color: #d5dbe3;
}

#app ul {
color: #425066;
list-style: none;
}

#app ul li {
margin-bottom: 24px;
}

挂载 Vue

现在,我们的静态页面部分就写完了,下一步,就是让 Vue 接管 HTML 元素,让它成为一个 Vue 应用,这样我们就可以用上 Vue 的特性了。

img

我们之前在 html 中定义的 id 为 app 的 div,这个是整个应用的起始元素,那么把 Vue 挂载到它上边,它内部的所有元素就被 Vue 接管了,就可以使用 Vue 的语法和功能来编写应用了。那么,接下来,打开 index.js 文件,我们先在里边创建一个空的对象 Playlist:

const Playlist = {};

然后在它下面,调用 Vue.createApp(Playlist).mount("#app");

Vue.createApp(Playlist).mount("#app");

这行代码是什么意思呢?它的意思就是说,我们把 Playlist 这个对象作为咱们整个应用的配置对象,里边可以给 HTML 提供数据,方法等动态的东西,把它传递给 Vue 的 createApp() 方法,Vue 就会读取它里边的内容,并为我们生成具体的数据,然后再调用 createApp 返回的对象的 mount 方法,传递一个 DOM 选择器进去,它就会把 Vue 挂载到所选择的元素上,这里我们选择了 id 为 app 的 div。这样,我们就把 Vue 初始化并挂载好了。

展示列表

接下来,我们就可以开始使用 Vue 所提供的功能了。我们的播放列表需要展示一系列的歌曲,与其把它们写死在 html 中,我们可以集中在 Vue 里管理数据,然后使用 Vue 的模板语法来渲染这个列表,我们来看一下怎么实现。 首先,在 Playlist 这个对象中,定义一个名为 data() 的函数,然后在里边返回一个对象,对象里边定义一个数组属性 playlist:

const Playlist = {
data() {
return {
playlist: ["What about now", "一千万个可能", "Me llamas"],
};
},
};

这个 data() 函数返回的对象中的属性,可以直接在 HTML 模板中使用,接下来我们在 HTML 模板中展示这个列表。 打开 index.html 文件,这时, HTML 中 id 为 app 的 div 已经不是一个单纯的 HTML 元素了,而是一个 Vue 应用的模板,所以我们在里边可以使用 vue 的模板语法,来循环展示列表元素。我们把 ul 中的代码改成这样:

<ul>
<li v-for="song in playlist">{{ song }}</li>
</ul>

这里:

  • 我们给 li 设置了一个特殊的 v-for 属性,这个是 vue 模板的指令,可以遍历一个数组或对象。
  • 它后面的值为 song in playlist,类似于 JavaScript 的 for...in 循环。
  • in 后面是要遍历的数组,这里是 playlist,也就是之前 data() 函数返回的对象中的 playlist 属性值,data() 函数返回的对象中的所有属性,都可以在模板中直接使用。
  • in 之前则是自定义的变量名,方便我们访问遍历出来的每个数组元素。
  • 然后 li 元素中的文本,使用两对大括号来访问变量的值,否则就是静态写死的值,这里我们访问 v-for 中定义的 song 变量。

这样,播放列表数据就渲染出来了,我们可以在 index.html 文件的空白处右击,选择:Open with Live Server 来预览一下效果。可以看到播放列表成功的渲染了出来。

搜索列表

接下来我们看一下 Vue 更神奇的功能,我们来实现一下搜索功能,让你看看 Vue 是如何让 html 元素与数据进行联动的。 我们在使用原生 JavaScript 处理表单输入的时候,一般需要获取该输入控件的实例,然后通过事件监听,获取它的 value 属性来访问用户输入,但是在 Vue 中不用这样。我们来看一下如何实现。 首先我们打开 index.js 文件,在 Playlist 的 data() 函数所返回的对象中,再添加一个属性 searchTerm,用来保存用户的输入:

return {
playlist: ["What about now", "一千万个可能", "Me llamas"],
searchTerm: "",
};

接着打开 index.html 文件,给 input 输入框设置一个 v-model 指令,值为刚添加的 searchTerm:

<input
type="text"
placeholder="请输入要查找的歌曲名"
class="search"
v-model="searchTerm"
/>

好了,就是这么简单,这样用户在输入内容时,searchTerm 这个属性值就会自动更新,而如果后来在 js 中修改了 searchTerm 的值,也会反应到 input 输入框上来。 现在用户输入的值获取到了,那该怎么过滤列表呢?一般过滤数组我们使用数组的 filter 方法,但是我们需要在每次用户输入时,都要实时更新过滤结果。那么这个时候我们可以使用 computed 计算属性:

  • 它的值是一个对象,和 data() 函数返回的对象类似。
  • 对象的属性名为计算属性的名字,值为一个函数,返回对数据进行一些逻辑计算后的结果。
  • 如果函数里边使用到了 data() 中的属性的话,那么这些属性变化时,computed 计算属性都会重新进行计算。
  • 计算属性在模板中的使用方法和 data() 中的属性一样。

那么这样利用计算属性,我们就可以在用户输入变化的时候,过滤数组列表了。 打开 index.js,在 Playlist 对象中添加一个 computed 属性,值为一个对象:

computed: {},

再在它里边定义个 filteredPlaylist 属性,值为一个函数:

computed: {
filteredPlaylist() {},
},

在它里边,我们需要访问 data 中的 searchTerm,这里可以直接使用 this 来访问,然后根据 searchTerm 的值,去过滤播放列表数组:

  computed: {
filteredPlaylist() {
if (this.searchTerm) {
return this.playlist.filter((song) =>
song.toLowerCase().includes(this.searchTerm.toLowerCase())
);
} else {
return this.playlist;
}
},
},

这里的逻辑是:

  • 如果搜索框中,用户输入了值,那么就根据输入值过滤数组,对于英文还全部转换成了小写再进行比较,这样就不区分大小写了。
  • 如果输入框中没有值,即清空了,那么就显示原来的所有歌曲。

这个 filteredPlaylist 用到了 data 中的 searchTerm 和 playlist,这两个其中任何一个发生变化时,函数都会重新执行。 之后,把模板中,v-for 循环 in 后面的数组,改成 filteredPlaylist 这样就能根据搜索框的内容显示过滤后的列表了:

<ul>
<li v-for="song in filteredPlaylist">{{ song }}</li>
</ul>

现在,我们来测试一下,在搜索框中输入歌曲名,可以看到在输入的过程中,下方的播放列表就开始自动过滤了,如果清空输入框,那么就会显示完整的播放列表。

小结

好了,这个就是我们的第一个 Vue.js 应用,觉得难吗?没关系,这一篇本身就是熟悉一下 Vue 的特性,它里边的所有语法都会在后面讲到,我们回顾一下创建 Vue.js 应用的过程:

  • 先创建普通的 html、js 和 css 文件。
  • 引入 vue 框架的 js 文件。
  • 创建 Vue 应用的配置对象。
  • 调用 Vue.createApp() 传递配置对象。
  • 在 createApp() 返回的对象中,调用 mount() 方法,把 Vue 挂载到一个 html 元素上。
  • 对于挂载了 Vue 的 html 元素,它下边的所有元素都可以使用 Vue 特性了。
  • 后面使用 v-for 渲染了播放列表。
  • 使用两对大括号,在 html 元素的两个标签之间,引用变量。
  • 使用了 v-model 来同步用户输入。
  • 使用 computed 来根据用户输入过滤播放列表。