Vue.js 演示其基础用法-CSDN博客

Vue.js 示例来演示其基础用法，包括 数据绑定、事件处理、组件化 等功能。

示例目标

创建一个简单的 Vue 应用。
展示如何使用 数据绑定 和 事件处理。
使用组件来组织和复用代码。

1. Vue.js 基础应用示例

假设我们想要创建一个简单的 Vue 应用，包含一个输入框和一个按钮。当用户输入内容并点击按钮时，页面会显示用户输入的内容。

代码结构：

HTML
Vue 实例
JavaScript（Vue 应用逻辑）

HTML 和 Vue.js 集成

首先，你需要一个 HTML 文件，并在其中引入 Vue.js 的 CDN。

html

复制编辑

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js Demo</title>  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app">  <h1>{{ message }}</h1>  <input v-model="userInput" placeholder="输入一些文本" />  <button @click="updateMessage">更新消息</button>  <p>用户输入的是：{{ userInput }}</p> </div> <script> // 创建 Vue 实例 new Vue({ el: '#app', data: { message: '欢迎使用 Vue.js!', userInput: '' }, methods: { updateMessage() { // 更新 message 字段 this.message = `你输入的是: ${this.userInput}`; } } }); </script> </body> </html>

代码解析

<h1>{{ message }}</h1>：使用 Mustache 语法（双大括号）绑定 Vue 实例中的 message 数据。这个值会自动更新到 DOM。
<input v-model="userInput" />：Vue 的 双向数据绑定 功能，v-model 将输入框的值与 userInput 数据属性绑定。每当用户在输入框中输入内容时，userInput 会被自动更新。
<button @click="updateMessage">更新消息</button>：使用 Vue 的 事件绑定，@click 等价于 v-on:click，当按钮被点击时，执行 updateMessage 方法。
<p>用户输入的是：{{ userInput }}</p>：展示用户输入的实时数据。
Vue 实例：通过 new Vue({...}) 创建一个 Vue 实例。我们将 Vue 实例挂载到 #app 元素上，并在其中定义了一个 data 对象，包含了我们需要的 message 和 userInput。
方法 (methods)：updateMessage 方法更新 message 数据，这样页面上的内容会自动更新。

2. Vue 组件化示例

在 Vue 中，组件化是一个非常重要的概念。你可以将应用拆分成多个独立的组件，然后在父组件中组合它们。

组件化代码示例

html

复制编辑

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js 组件化 Demo</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app">  <greeting></greeting> </div> <script> // 定义一个新的组件 Vue.component('greeting', { template: ` <div> <h1>{{ greetingMessage }}</h1> <p>{{ description }}</p> </div> `, data() { return { greetingMessage: 'Hello, Vue.js!', description: 'Vue.js 是一个渐进式框架，用于构建用户界面。' } } }); // 创建 Vue 实例 new Vue({ el: '#app', }); </script> </body> </html>

代码解析

定义组件：使用 Vue.component 定义一个新的组件，名字是 greeting。这个组件的模板包含一个 <h1> 和一个 <p>，用来展示欢迎信息和描述。
组件的 data：组件中的 data 方法返回一个对象，这个对象中的数据会被绑定到模板中。
父组件使用子组件：在 #app 元素中，我们使用了 <greeting></greeting> 来引用子组件。在 Vue 中，组件化使得我们可以将视图拆分成多个小块，提升了代码的可维护性和复用性。

3. Vue.js 动态绑定和事件处理

动态类绑定和事件处理

html

复制编辑

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js 动态绑定示例</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <button :class="buttonClass" @click="toggleClass">点击切换样式</button> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: '这是一条消息', isActive: false }, computed: { buttonClass() { return { 'btn-active': this.isActive, 'btn-inactive': !this.isActive }; } }, methods: { toggleClass() { this.isActive = !this.isActive; this.message = this.isActive ? '按钮激活' : '按钮未激活'; } } }); </script> <style> .btn-active { background-color: green; color: white; } .btn-inactive { background-color: gray; color: white; } </style> </body> </html>

代码解析

动态类绑定：buttonClass 计算属性根据 isActive 的值返回不同的类 btn-active 或 btn-inactive。这将动态地为按钮添加或删除样式。
事件处理：通过 @click 监听按钮点击事件，点击按钮会调用 toggleClass 方法切换 isActive 的值。
样式绑定：通过动态添加 CSS 类，可以根据状态切换按钮的背景颜色
通过上述演示，我们展示了 Vue.js 的基本用法，包括：
数据绑定：在模板中插入动态数据。
事件处理：通过点击事件更新数据。
组件化：将页面拆分为多个组件，提高可维护性。
动态绑定和样式切换：根据数据动态修改样式和内容。