当前位置：首页 > VUE

用Vue实现

2026-02-09 22:01:50VUE

以下是使用Vue实现功能的具体方法和代码示例：

安装Vue

通过CDN引入或使用npm安装Vue。CDN方式适合快速原型开发：

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

npm方式适合正式项目：

npm install vue

创建Vue应用

在HTML中创建挂载点并初始化Vue应用：

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

const { createApp } = Vue
createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}).mount('#app')

数据绑定

使用双大括号语法或v-bind指令进行数据绑定：

<div v-bind:title="dynamicTitle">悬停查看标题</div>

data() {
  return {
    dynamicTitle: '页面加载于 ' + new Date().toLocaleString()
  }
}

条件渲染

使用v-if和v-else控制元素显示：

<p v-if="seen">现在你看到我了</p>
<p v-else>现在你看不到我了</p>

data() {
  return {
    seen: true
  }
}

列表渲染

使用v-for渲染数组：

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

data() {
  return {
    items: [
      { id: 1, text: '学习 JavaScript' },
      { id: 2, text: '学习 Vue' }
    ]
  }
}

事件处理

使用v-on监听DOM事件：

<button v-on:click="reverseMessage">反转消息</button>

methods: {
  reverseMessage() {
    this.message = this.message.split('').reverse().join('')
  }
}

表单输入绑定

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

<input v-model="message" placeholder="编辑我">
<p>Message is: {{ message }}</p>

组件系统

创建可复用的组件：

const app = createApp({})
app.component('todo-item', {
  template: `<li>这是一个待办项</li>`
})

生命周期钩子

在组件不同生命周期执行代码：

created() {
  console.log('组件已创建')
},
mounted() {
  console.log('组件已挂载')
}

组合式API

使用setup函数组织逻辑：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() {
      count.value++
    }
    onMounted(() => {
      console.log('组件已挂载')
    })
    return {
      count,
      increment
    }
  }
}

用Vue实现