Vue.js 基础入门教程

阅读时长 9 分钟读完

Vue.js 是一个轻量、高效、易学的前端框架,可用于构建交互式用户界面和单页面应用程序。Vue.js 具有声明式渲染、组件化开发和数据绑定等特性,使开发者能够更轻松地构建复杂的应用程序。

准备工作

在使用 Vue.js 开发前端应用之前,需要以下几步准备工作:

下载和引入 Vue.js

使用 Vue.js 需要将其引入到项目中。常见方法有以下两种:

  • 直接通过 CDN 引入

    在 HTML 文件中加入以下代码:

  • 通过 npm 下载并使用

    运行以下命令安装 Vue.js:

    在你的 JavaScript 文件中使用以下代码来导入 Vue.js:

创建一个 Vue 实例

使用 Vue.js 构建前端应用的入口点是创建一个 Vue 实例。可以通过以下代码创建一个简单的 Vue 实例:

以上代码定义了一个 Vue 实例,这个实例被挂载到了 #app 元素上,data 对象中的 message 属性可以在 HTML 模板中使用。

编写 HTML 模板

定义了一个 Vue 实例后,还需要编写 HTML 模板,这样才能通过 Vue 框架将数据渲染到网页中。

以上代码定义了一个 HTML 模板,里面引用了 Vue 实例中定义的数据 message

运行代码

将代码保存为 index.html 文件,并在浏览器中打开该文件即可看到以下效果:

数据绑定

Vue.js 的核心之一是数据绑定。通过数据绑定,当数据发生变化时,对应的视图也会自动更新,避免了手动操作 DOM 的繁琐过程。

插值表达式

插值表达式 ({{}}) 可以用于在模板中插入数据。以下代码演示了如何在模板中插入 Vue 实例中定义的数据:

在运行代码之前,我们可以通过 Vue 的实例来修改这个数据:

当运行以上代码后,网页中会自动更新为:

v-bind 指令

使用 v-bind 指令可以将 Vue 实例中的数据绑定到 HTML 元素的属性上,如 srchreftitle 等等。以下代码演示了如何使用 v-bind 绑定 src 属性:

在 Vue.js 的实例中定义了 imgUrl 属性,并将其绑定到了 img 标签的 src 属性上:

v-model 指令

使用 v-model 指令可以在表单元素和 Vue 实例数据之间建立双向绑定。以下代码演示了如何使用 v-model 绑定一个表单输入框:

在 Vue.js 的实例中定义了 message 属性,并将其绑定到了输入框上。

计算属性

计算属性是由 Vue.js 自动计算得出的属性,可以用于计算经过过滤、格式化后的结果。以下代码演示了如何使用计算属性:

在 Vue.js 的实例中定义了 message 属性,并在 computed 中定义了一个计算属性 reversedMessage

-- -------------------- ---- -------
----- --- - --- -----
  --- -------
  ----- -
    -------- ------- -----
  --
  --------- -
    ---------------- ---------- -
      ------ -----------------------------------------
    -
  -
--

运行以上代码后,网页中会显示以下内容:

组件化开发

Vue.js 可以将页面拆分成若干个组件,每个组件可以独立开发和维护,提高了代码的可复用性和可维护性。

定义组件

Vue.js 中定义组件非常简单,只需使用 Vue.component 方法将组件注册到 Vue 实例中即可。以下是一个简单的组件定义代码:

在以上代码中,使用 Vue.component 方法注册了一个名为 my-component 的组件,同时指定了组件的模板内容。

使用组件

注册好组件之后,就可以在模板中使用该组件了。只需在 HTML 中插入组件的标签即可。以下是一个简单的使用组件的代码:

在 Vue.js 的实例中,注册了 my-component 组件后,就可以在 #app 元素中使用该组件了。

父子组件通信

当有多个组件嵌套时,组件之间需要进行通信。这时,Vue.js 提供了一些方法来实现组件之间的数据传递和方法调用。

父组件向子组件传递数据

使用 props 选项可以将数据传递给子组件。以下是一个父组件向子组件传递数据的代码:

-- -------------------- ---- -------
----------
  -----
    ---------------- --------------- --------------------------
  ------
-----------

--------
  -------------------------------- -
    ------ ------------
    --------- -------- ------- ---------
  --
---------

在以上代码中,父组件通过 message 属性传递数据给子组件。子组件使用 props 属性接收来自父组件的数据,并将 message 插入到组件模板中。

子组件向父组件传递数据

子组件向父组件传递数据比较麻烦。通常的做法是在子组件中触发一个事件,然后在父组件中监听该事件并获取数据。以下是一个触发事件的子组件的代码:

-- -------------------- ---- -------
----------
  -----
    ------- ----------------------------
  ------
-----------

--------
  -------------------------------- -
    -------- -
      -------- ---------- -
        ---------------------------- ------ --- ---- - ----------
      -
    -
  --
---------

在以上代码中,子组件通过 $emit 方法触发了一个名为 update:message 的事件,并传递了一条数据。在父组件中,需要通过 v-on 方法捕获该事件,并在事件响应函数中获取数据:

-- -------------------- ---- -------
----------
  -----
    ---------------- ------------------------------------------------------
  ------
-----------

--------
  -------------------------------- -
    ----- ---------- -
      ------ -
        -------- --
      -
    --
    -------- -
      -------- ---------- -
        ---------------------------- ------ --- ---- - ----------
      -
    -
  --
  
  ----- --- - --- -----
    --- -------
    -------- -
      -------------- ----------------- -
        --------------------
      -
    -
  --
---------

在以上代码中,父组件使用 v-on 指令监听了名为 update:message 的事件,然后在 handleMessage 方法中获取了来自子组件的数据。

生命周期钩子函数

在组件的生命周期中,Vue.js 为组件提供了一些生命周期钩子函数,可以在组件的不同阶段中执行一些代码逻辑。

以下是一些常用的生命周期钩子函数:

  • beforeCreate:组件实例化之前执行的钩子函数
  • created:组件实例化之后执行的钩子函数,可以在这里进行数据初始化、调用异步操作等等
  • beforeMount:组件挂载之前执行的钩子函数
  • mounted:组件挂载之后执行的钩子函数,可以在这里操作 DOM 等
  • beforeUpdate:组件更新之前执行的钩子函数
  • updated:组件更新之后执行的钩子函数
  • beforeDestroy:组件销毁之前执行的钩子函数
  • destroyed:组件销毁之后执行的钩子函数

总结

Vue.js 是一个非常流行的前端框架,具有轻量、高效、易学等优点,可以帮助开发者更轻松地构建复杂的应用程序。本文介绍了 Vue.js 的一些基础知识,包括数据绑定、组件化开发、父子组件通信、生命周期钩子函数等等。希望读者可以通过本文了解 Vue.js 的基本原理,从而更加深入地学习和使用 Vue.js。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/644f9224980a9b385b8fded2

纠错
反馈