VueJS 入门指南：轻松打造交互式 web 应用

前端

2023-11-13 07:29:09

探索 VueJS：打造交互式 Web 应用的强大框架

什么是 VueJS？

VueJS 是一款备受推崇的前端框架，以其简洁的语法和丰富的功能而闻名。它采用组件化开发，将复杂界面分解成可复用的部分，提升了代码的可维护性和可扩展性。VueJS 采用数据驱动方式，通过响应式系统实现数据与视图的无缝绑定。

VueJS 入门

1. 安装

通过 CDN 或 NPM 包管理器安装 VueJS。

2. 创建 Vue 实例

new Vue() 创建 Vue 实例，它是应用的核心，负责管理数据和视图。

3. 数据绑定

使用 Vue 的数据绑定将数据与视图元素关联，实现动态更新。

4. 指令

Vue 提供了内置指令，如 v-if 和 v-for，可轻松操作 DOM 元素和处理用户交互。

5. 过滤器

Vue 的过滤器允许对数据进行格式化和转换，以在视图中更清晰地显示。

VueJS 指令和过滤器

VueJS 提供了一系列有用的指令和过滤器：

指令：

v-if: 控制元素的显示/隐藏。
v-for: 遍历数组/列表。
v-model: 实现双向数据绑定。
v-on: 监听事件。
v-bind: 动态绑定属性。

过滤器：

uppercase: 将字符串转换为大写。
lowercase: 将字符串转换为小写。
capitalize: 将字符串首字母转换为大写。
currency: 将数字格式化为货币形式。
date: 将日期格式化为指定格式。

品牌列表案例

考虑一个品牌列表示例，使用 VueJS 实现动态显示和交互：

const app = new Vue({
  el: '#app',
  data: {
    brands: [
      { name: 'Apple', logo: 'apple.png' },
      { name: 'Google', logo: 'google.png' },
      { name: 'Microsoft', logo: 'microsoft.png' }
    ]
  }
});

<div id="app">
  <h1>品牌列表</h1>
  <ul>
    <li v-for="brand in brands">
      {{ brand.name }}
      <img :src="brand.logo" alt="{{ brand.name }}">
    </li>
  </ul>
</div>