Vue.js 制作留言板及相关技术-JavaScript中文网-JavaScript教程资源分享门户

前言

Vue.js 是一款轻量级的 JavaScript 框架，它采用数据驱动、组件化的思想，可以帮助我们快速构建交互性强、性能优秀的 Web 应用。本文将介绍使用 Vue.js 制作一个简单的留言板，并探讨相关的技术。

准备工作

在使用 Vue.js 之前，我们需要引入 Vue.js 库文件。可以通过 CDN 引入，也可以下载到本地使用。这里我们以 CDN 引入为例：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

制作留言板

HTML 结构

首先，我们需要构建留言板的 HTML 结构，包括留言区域和表单区域。这里我们使用 Bootstrap 框架来美化页面，同时使用 Vue.js 的模板语法来动态渲染页面。

// javascriptcn.com 代码示例
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <h2>留言板</h2>
      <ul class="list-group">
        <li class="list-group-item" v-for="(message, index) in messages">
          {{ message }}
          <button class="btn btn-danger btn-sm float-right" @click="removeMessage(index)">删除</button>
        </li>
      </ul>
    </div>
    <div class="col-md-4">
      <h2>添加留言</h2>
      <form @submit.prevent="addMessage">
        <div class="form-group">
          <label for="name">姓名：</label>
          <input type="text" class="form-control" id="name" v-model="name" required>
        </div>
        <div class="form-group">
          <label for="content">内容：</label>
          <textarea class="form-control" id="content" rows="3" v-model="content" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
      </form>
    </div>
  </div>
</div>

Vue.js 实例

接下来，我们需要创建一个 Vue.js 实例，来操作留言板的数据和方法。

// javascriptcn.com 代码示例
var app = new Vue({
  el: '#app',
  data: {
    name: '',
    content: '',
    messages: []
  },
  methods: {
    addMessage: function() {
      this.messages.push(this.name + '：' + this.content);
      this.name = '';
      this.content = '';
    },
    removeMessage: function(index) {
      this.messages.splice(index, 1);
    }
  }
});

在这个实例中，我们定义了三个数据属性：name、content 和 messages。name 和 content 分别表示表单中输入的姓名和内容，messages 是一个数组，用来存储留言板中所有的留言。我们还定义了两个方法：addMessage 和 removeMessage。addMessage 方法会将表单中输入的姓名和内容拼接成一条留言，并添加到 messages 数组中；removeMessage 方法会根据传入的索引值，从 messages 数组中删除对应的留言。

效果展示

最后，我们来看一下留言板的效果：

相关技术

Vue.js 模板语法

在上面的示例中，我们使用了 Vue.js 的模板语法来动态渲染页面。Vue.js 的模板语法类似于 AngularJS 和 React，它采用双花括号 {{ }} 来绑定数据，同时支持指令和表达式。

例如，在上面的 HTML 结构中，我们使用了 v-for 指令来遍历 messages 数组，并使用 {{ message }} 表达式来显示每一条留言。另外，我们还使用了 v-model 指令来实现表单数据的双向绑定。

Vue.js 组件化开发

Vue.js 的另一个重要特性是组件化开发。组件化开发可以将页面拆分成多个组件，每个组件都有自己的数据和方法，可以独立维护和复用。在上面的示例中，我们可以将留言板和表单分别封装成两个组件，提高代码的可读性和可维护性。

// javascriptcn.com 代码示例
Vue.component('message-list', {
  props: ['messages'],
  template: `
    <ul class="list-group">
      <li class="list-group-item" v-for="(message, index) in messages">
        {{ message }}
        <button class="btn btn-danger btn-sm float-right" @click="$emit('remove', index)">删除</button>
      </li>
    </ul>
  `
});

Vue.component('message-form', {
  data: function() {
    return {
      name: '',
      content: ''
    };
  },
  template: `
    <form @submit.prevent="$emit('add', { name: name, content: content })">
      <div class="form-group">
        <label for="name">姓名：</label>
        <input type="text" class="form-control" id="name" v-model="name" required>
      </div>
      <div class="form-group">
        <label for="content">内容：</label>
        <textarea class="form-control" id="content" rows="3" v-model="content" required></textarea>
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  `
});

var app = new Vue({
  el: '#app',
  data: {
    messages: []
  },
  methods: {
    addMessage: function(message) {
      this.messages.push(message.name + '：' + message.content);
    },
    removeMessage: function(index) {
      this.messages.splice(index, 1);
    }
  }
});

在这个示例中，我们定义了两个组件：message-list 和 message-form。message-list 组件接收一个 messages 属性，用来渲染留言板中的留言；message-form 组件没有接收任何属性，它内部维护了一个 name 和 content 数据属性，用来处理表单数据。

在 Vue.js 中，父组件可以通过 v-bind 指令将数据传递给子组件，子组件可以通过 props 属性接收父组件传递的数据。子组件可以通过 $emit 方法向父组件传递事件和数据。

在上面的示例中，我们将 messages 数组传递给了 message-list 组件，同时在 message-list 组件中定义了一个 remove 事件，用来向父组件传递删除留言的请求。在 message-form 组件中，我们定义了一个 add 事件，用来向父组件传递添加留言的请求，并传递了一个对象，包含了表单中输入的姓名和内容。

Vue.js 生命周期钩子

Vue.js 的生命周期钩子是一组特殊的方法，可以在组件的不同阶段执行一些操作。生命周期钩子包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed 八个阶段。

在开发中，我们可以利用生命周期钩子来执行一些初始化操作、异步请求、DOM 操作等。

例如，在上面的示例中，我们可以在 mounted 钩子中调用 fetchMessages 方法，从服务器获取留言板的数据：

// javascriptcn.com 代码示例
var app = new Vue({
  el: '#app',
  data: {
    messages: []
  },
  mounted: function() {
    this.fetchMessages();
  },
  methods: {
    fetchMessages: function() {
      axios.get('/api/messages')
        .then(response => {
          this.messages = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    addMessage: function(message) {
      axios.post('/api/messages', message)
        .then(response => {
          this.messages.push(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    },
    removeMessage: function(index) {
      var id = this.messages[index].id;
      axios.delete('/api/messages/' + id)
        .then(response => {
          this.messages.splice(index, 1);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

在这个示例中，我们使用了 axios 库来发送 HTTP 请求。在 mounted 钩子中调用 fetchMessages 方法，从服务器获取留言板的数据；在 addMessage 方法中，调用 axios.post 方法，向服务器发送添加留言的请求；在 removeMessage 方法中，调用 axios.delete 方法，向服务器发送删除留言的请求。

总结

本文介绍了使用 Vue.js 制作留言板的方法，并探讨了相关的技术，包括 Vue.js 的模板语法、组件化开发和生命周期钩子。Vue.js 是一款非常强大的 JavaScript 框架，可以帮助我们快速构建交互性强、性能优秀的 Web 应用。希望本文对初学者有所帮助，也欢迎大家多多交流、探讨。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6563ea61d2f5e1655dd5a162