vue.js 教程阮一峰-CFANZ编程社区

Vue.js 教程

Vue.js 是一款用于构建用户界面的渐进式 JavaScript 框架。它易于学习，功能强大，广泛应用于创建单页面应用程序和复杂的前端应用。

本文将介绍 Vue.js 的基本概念和常用功能，并通过代码示例演示其用法。

简介

Vue.js 是由尤雨溪开发的一款轻量级 JavaScript 框架。它采用 MVVM（Model-View-ViewModel）架构模式，通过双向数据绑定和组件化来构建用户界面。Vue.js 的特点包括：

响应式数据绑定：Vue.js 提供了简洁的语法来实现数据和视图的双向绑定，当数据发生变化时，视图会自动更新。
组件化开发：Vue.js 允许将页面拆分成多个组件，每个组件都可以维护自己的状态和逻辑，大大提高了开发效率和代码的可维护性。
虚拟 DOM：Vue.js 通过虚拟 DOM 提高了渲染性能，只更新需要变化的部分，避免了全量更新页面。

安装和使用

安装 Vue.js 可以通过 CDN 引入或使用 npm 安装。以下是使用 CDN 引入的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js Demo</title>
  <script src="
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue.js!'
      }
    })
  </script>
</body>
</html>

在上述示例中，我们通过 <script> 标签引入了 Vue.js，在 <div id="app"> 中使用了双括号语法 {{ message }}，实现了将 message 数据绑定到视图中。

基本语法

Vue.js 提供了丰富的指令和语法，用于处理数据绑定、条件渲染、循环遍历等功能。以下是一些常用的语法示例：

数据绑定

Vue.js 使用双括号语法 {{ }} 进行数据绑定。例如：

<div id="app">
  {{ message }}
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue.js!'
    }
  })
</script>

条件渲染

Vue.js 提供了 v-if 和 v-show 指令来实现条件渲染。例如：

<div id="app">
  <p v-if="showMessage">Hello, Vue.js!</p>
  <p v-show="showMessage">Hello, Vue.js!</p>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      showMessage: true
    }
  })
</script>

循环遍历

Vue.js 使用 v-for 指令来实现循环遍历。例如：

<ul id="app">
  <li v-for="item in items">{{ item }}</li>
</ul>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  })
</script>