当前位置：首页 > VUE

实现简单vue

2026-03-28 00:00:19VUE

实现简单的 Vue 应用

创建一个简单的 Vue 应用需要引入 Vue 库，并编写基本的模板、数据绑定和逻辑。以下是具体实现步骤：

1. 引入 Vue 库
通过 CDN 或本地文件引入 Vue。以下示例使用 CDN：

实现简单vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2. 创建 Vue 实例
在 HTML 中定义挂载点，并通过 Vue.createApp 初始化应用：

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

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  });
  app.mount('#app');
</script>

3. 数据绑定与事件处理
使用 v-model 实现双向数据绑定，v-on 或 @ 绑定事件：

实现简单vue

<div id="app">
  <input v-model="message">
  <button @click="reverseMessage">反转消息</button>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    },
    methods: {
      reverseMessage() {
        this.message = this.message.split('').reverse().join('');
      }
    }
  });
  app.mount('#app');
</script>

4. 条件与列表渲染
使用 v-if 和 v-for 控制显示和循环：

<div id="app">
  <p v-if="showText">这段文字可以切换显示</p>
  <button @click="toggleText">切换文字</button>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        showText: true,
        items: ['项目1', '项目2', '项目3']
      }
    },
    methods: {
      toggleText() {
        this.showText = !this.showText;
      }
    }
  });
  app.mount('#app');
</script>

5. 使用计算属性
通过 computed 定义依赖数据的计算逻辑：

<div id="app">
  <p>原始消息: {{ message }}</p>
  <p>计算反转消息: {{ reversedMessage }}</p>
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  });
  app.mount('#app');
</script>