Vue框架demo

原创

你懂个der 2023-09-10 11:13:58 ©著作权

©著作权归作者所有：来自51CTO博客作者你懂个der的原创作品，请联系作者获取转载授权，否则将追究法律责任

首先，需要安装Vue：

npm install vue

然后，创建一个名为App.vue的文件，用于定义应用程序的主要内容。

<template>
  <div>
    <h1>{{ message }}</h1>
    <input type="text" v-model="inputText" />
    <button @click="addMessage">Add Message</button>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Welcome to My Blog',
      inputText: '',
      messages: [],
    };
  },
  methods: {
    addMessage() {
      if (this.inputText) {
        this.messages.push(this.inputText);
        this.inputText = '';
      }
    },
  },
};
</script>

接下来，在一个名为main.js的文件中，创建Vue实例并挂载到#app元素上。

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

最后，在一个HTML文件中引入构建好的脚本，并添加一个具有唯一ID的<div>元素，用于挂载Vue应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/build.js"></script>
</body>
</html>

接下来，可以运行Vue应用程序：