当前位置：首页 > VUE

vue实现的页面

2026-01-08 12:54:23VUE

Vue 实现的页面示例

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是一个简单的 Vue 页面实现示例，包含基本的结构和功能。

安装 Vue

通过 CDN 引入 Vue：

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>

或通过 npm 安装：

npm install vue

基本页面结构

一个 Vue 页面通常包含以下部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Page</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    const { createApp } = Vue;

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

数据绑定

Vue 使用双大括号语法进行文本插值：

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

指令

Vue 提供了多种指令，如 v-if、v-for、v-on 等：

<div id="app">
  <p v-if="showMessage">{{ message }}</p>
  <button v-on:click="toggleMessage">Toggle</button>
</div>

<script>
  createApp({
    data() {
      return {
        message: 'Hello Vue!',
        showMessage: true
      };
    },
    methods: {
      toggleMessage() {
        this.showMessage = !this.showMessage;
      }
    }
  }).mount('#app');
</script>

组件化

Vue 支持组件化开发，可以创建可复用的组件：

<div id="app">
  <my-component></my-component>
</div>

<script>
  const { createApp } = Vue;

  const MyComponent = {
    template: `<p>This is a component</p>`
  };

  createApp({
    components: {
      MyComponent
    }
  }).mount('#app');
</script>

路由

使用 Vue Router 实现页面路由：

npm install vue-router@4

<div id="app">
  <router-view></router-view>
</div>

<script>
  const { createApp } = Vue;
  const { createRouter, createWebHistory } = VueRouter;

  const Home = { template: '<div>Home</div>' };
  const About = { template: '<div>About</div>' };

  const router = createRouter({
    history: createWebHistory(),
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  });

  createApp({}).use(router).mount('#app');
</script>

状态管理

使用 Vuex 进行状态管理：

npm install vuex@next

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment">Increment</button>
</div>

<script>
  const { createApp } = Vue;
  const { createStore } = Vuex;

  const store = createStore({
    state() {
      return {
        count: 0
      };
    },
    mutations: {
      increment(state) {
        state.count++;
      }
    }
  });

  const app = createApp({
    computed: {
      count() {
        return store.state.count;
      }
    },
    methods: {
      increment() {
        store.commit('increment');
      }
    }
  });

  app.use(store).mount('#app');
</script>

生命周期钩子

Vue 组件有多个生命周期钩子，如 created、mounted：

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

<script>
  createApp({
    data() {
      return {
        message: ''
      };
    },
    created() {
      this.message = 'Component created';
    },
    mounted() {
      this.message = 'Component mounted';
    }
  }).mount('#app');
</script>

样式绑定

Vue 支持动态绑定样式和类：

<div id="app">
  <p :class="{ active: isActive }">Styled text</p>
  <p :style="{ color: textColor }">Colored text</p>
</div>

<script>
  createApp({
    data() {
      return {
        isActive: true,
        textColor: 'red'
      };
    }
  }).mount('#app');
</script>

表单输入绑定

使用 v-model 实现表单双向绑定：

vue实现的页面

<div id="app">
  <input v-model="message" placeholder="Edit me">
  <p>Message is: {{ message }}</p>
</div>

<script>
  createApp({
    data() {
      return {
        message: ''
      };
    }
  }).mount('#app');
</script>

以上示例展示了 Vue 页面的基本实现方式，可以根据需求扩展和组合这些功能。