vue实现页面显示

Vue 实现页面显示的基本方法

使用 Vue.js 实现页面显示通常涉及组件化开发、数据绑定和模板语法。以下是一些关键步骤：

创建 Vue 实例并绑定到 DOM 在 HTML 中定义一个挂载点，通常是一个 div 元素。通过 new Vue() 创建 Vue 实例，并指定 el 选项将其挂载到 DOM 上。

<div id="app"></div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

使用模板语法显示数据

Vue 使用双大括号语法 {{ }} 进行文本插值，可以显示 data 中的属性值。

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

条件渲染

v-if 指令用于条件性地渲染一块内容，只有当指令的表达式返回真值时才被渲染。

<div v-if="showMessage">
  {{ message }}
</div>

列表渲染

v-for 指令基于一个数组来渲染一个列表，需要使用 item in items 形式的特殊语法。

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

绑定 HTML 属性

v-bind 指令用于动态绑定 HTML 属性，可以简写为 :。

<img :src="imageSrc" alt="Vue logo">

处理用户输入

v-on 指令用于监听 DOM 事件，可以简写为 @。

<button @click="reverseMessage">Reverse Message</button>

组件化开发

Vue 组件是可复用的 Vue 实例，可以全局或局部注册。

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

单文件组件

对于更复杂的应用，推荐使用 .vue 单文件组件，包含模板、脚本和样式。

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

使用 Vue Router 实现页面路由

对于多页面应用，需要安装和使用 vue-router 来管理路由。

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')

状态管理

对于大型应用，可以使用 Vuex 进行集中式状态管理。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})