创建第一个 Vue 3.x 应用

2022年7月 · 预计阅读时间： 6 分钟

软件工程师 / B站UP主

我们来开发第一个 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 的特性了。

我们之前在 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 来根据用户输入过滤播放列表。

创建项目​

引入 Vue​

编写播放列表 HTML​

编写播放列表 CSS​

挂载 Vue​

展示列表​

搜索列表​

小结​