【自上而下】Vue入门！

Phantomlsh
1,206 阅读5分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

“你可听说过一招从天而降的剑法？”

本文与大部分Vue教程都截然不同。我认为Vue 3以来，Vue已经不只是一个JS框架，而是可以被当作一门新的语言来学习。（事实上Github很早就将其归类为语言了）

本教程将通过一系列例子来对Vue做一个简单的入门介绍，有希望进一步学习的同学可以参考官网vuejs.org/教程自下而上地仔细学一遍。在这里，我们将Vue所有的语法糖全部带上，用最简单的方式来开始Vue这一门“新语言”。

创建项目

简单起见，我们用一个模板来创建新项目，这个模板中包含了一切我们需要用到的东西：github.com/yzITI/templ…

此处使用的是Vite + Vue 3 + Composition API + setup语法糖 + ref语法糖

首先你需要安装Nodejs和Git。随后，你可以根据模板上的指示创建一个自己的代码仓库，也可以直接克隆这个模板到本地，作为一个项目的开始。无论何种方式，下载到本地后都需要在项目目录下运行以下命令来安装依赖库：

npm i

随后你可以运行下面的命令，在本地预览代码效果：

npm run dev

打开浏览器访问http://localhost:5173/即可查看预览效果。此预览效果会热更新（随着代码文件变化而自动更新）。

组件

此处描述的是Vue SFC(Single File Component)

Vue是组件化的，整个页面是由若干个组件嵌套、排列而成的。每个组件都是一个后缀名为.vue的文件，它描述了组件需要的全部信息，例如变量与函数方法(JS)、内容(HTML)、样式(CSS)等等。

一般来说，一个Vue组件代码的基本格式如下：

<script setup>
// here is script
// model & interaction
</script>

<template>
  <!-- HTML here -->
  <!-- content -->
</template>

<style scoped>
/* here is CSS */
</style>

特别注意：style中的CSS样式默认会作用在整个项目下，因此加入scoped关键字限制其中的样式只作用于当前组件。script标签上的setup关键字是语法糖，本文不做讨论。

接下来我们来看几个例子，在理解代码的同时学习如何使用Vue来轻松完成组件。在模板项目中，你可以通过修改/src/views/Home.vue中的代码来实践操作。

最简单的例子

<script setup>
const msg = 'Hello, Vue!'
function print () {
  console.log(msg)
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <button @click="print">Click Me</button>
</template>

在这个例子中，我们学到两个最简单的使用方法：

  1. 在script部分定义的变量，可以在template当中使用{{ }}的方式直接显示为HTML的元素内容。
  2. 在script部分定义的方法，可以在template当中使用@关键字绑定到事件（此处是点击事件click）上直接调用。

现在，我们已经可以让页面显示变量的内容，并监听页面事件了。但是，当变量发生变化的时候，页面内容并不会自动更新。其实，Vue比这强大的多，它可以追踪变量的变化并自动更新对应的视图内容，让我们看下一个例子。

响应式变量

这个例子是模板项目的默认代码

<script setup>
let cot = $ref(0)
function inc () {
  cot++
}
</script>

<template>
  <p>cot: {{ cot }}</p>
  <button @click="inc">Click Me</button>
</template>

在这里使用$ref语法糖声明了一个响应式变量cot，这个变量使用起来与正常的变量一样，但它会被Vue框架追踪。简单来讲，在声明变量的时候使用函数$ref()，就是告诉Vue框架：“这儿有个变量你看着点！”

于是，当cot变量值发生变化的时候，相对应的页面内容也就会重新渲染。

高级数据绑定

<script setup>
let search = $ref('')
let upper = $computed(() => search.toUpperCase())
</script>

<template>
  <p>Your input: {{ search }}</p>
  <p :class="upper === search ? 'green' : 'red'">
    Upper Case: {{ upper }}
  </p>
  <input v-model="search">
  <button @click="search = ''">Clear</button>
</template>

<style scoped>
input { background: #eee; }
.green { color: green; }
.red { color: red; }
</style>

首先我们定义了一个会被自动追踪的变量search，并使用{{ }}在页面上显示出来（第七行）。

第三行使用$computed()定义的upper变量是一个计算属性，定义时传入计算函数，当计算函数使用到的响应式变量发生变化时，计算函数会被重新运行并自动更新计算属性的值。所以，无论search变量变成什么，upper都会变成它的大写版本。

第八行的p元素使用了属性绑定:。使用冒号修饰的元素属性内容可以是JS脚本表达式，并且可以在其中使用定义好的变量。此处根据search和upper的值自动计算元素的类名。

随后我们在input元素上使用双向绑定v-model。所谓双向，是指用户的输入会自动改变search变量的值，改变search变量的值也会改变用户的输入。

最后，我们发现按钮的点击事件也不一定要绑定一个函数，也可以直接使用简单的JS语句，例如此处的赋值语句。当我们点击按钮时，search变量会被赋值为空字符串。由于它被定义的时候使用了$ref，Vue会自动追踪它的变化，更新页面的显示内容和用户的输入框内容，同时自动重算upper的值，并引起涉及到upper的页面更新。这一切都发生在一瞬间！

控制结构

这一块就有一些复杂了，各位同学可以玩耍一下。

<script setup>
let content = $ref(''), list = $ref([])
</script>

<template>
  <p v-if="content">Your input: {{ content }}</p>
  <p v-else>You don't have any input</p>
  <input v-model="content">
  <button @click="list.push(content)">Add</button>
  <p v-for="item in list">{{ item }}</p>
</template>

<style scoped>
input { background: #eee; }
</style>

首先我们定义两个响应式变量，一个空字符串一个空数组。在第六、七行，我们看到通过v-if和v-else可以简单的根据一个表达式（content）的真假来控制元素的显示情况。

在点击Add按钮以后，当前输入框的内容content就会被添加到数组的尾部。此时，页面上的v-for就会行动起来了！它会自动循环list中的内容，并对每一个项目生成一个v-for所在的HTML元素（包括它的内容）。在每个项目的元素中，我们可以读取item作为当前循环的项目值。

组件引用

一个Vue组件写好了以后，我们可以在另一个组件中调用它，甚至用v-for生成很多独立的小组件。假设我们将上一个例子中的代码保存为List.vue放在Home.vue旁边，接下来在Home.vue中：

<script setup>
import List from './List.vue'
</script>

<template>
  <List v-for="i in 3"></list>
</template>

就直接使用import关键字，通过相对路径引入组件，然后就可以直接用在template中啦！

为了区分组件与原生HTML标签，通常约定引入的组件命名为Pascal命名法，在template中使用时，也直接使用Pascal命名法，例如，<EasyEditList>。

组件名称不能与HTML自带的元素名称重名！

同时，这里演示了v-for的另一种小用法，我们可以直接在被循环的位置写一个数字n，表示循环n次。

特别注意，List组件会被渲染三次，但是这三个组件并不共享数据。他们的输入框变量content和列表变量list都是独立的！

更进一步

至此，你已经简单地体验了一下Vue的神奇和强大了！针对这些功能和语法，你可以在官网进一步学习，充实自己对这个框架的理解。

特别推荐学习下列内容：

  • watch：监听数据变化
  • defineProps和defineEmits：用于在组件之间传递信息和事件
  • Lifecycle：一个组件的生命历程，可以帮你更好地控制组件行为
  • 其他写法和功能：本文只是冰山一角，如果你想要深入了解，请仔细学习各种不同的写法和语法糖，并尽可能了解Vue的细节和原理。
  • Vite：我们的项目是基于Vite开发和调试的，它将我们的Vue代码改写成浏览器能够明白的样子。
  • 其他Vue生态（例如VueRouter和Pinia）：Vue有庞大的生态系统支持，帮助你实现页面跳转、状态管理等等

Have fun!

avatar
文章
阅读
粉丝