当前位置：首页 > VUE

代码实现vue

2026-03-27 08:26:22VUE

安装 Vue.js

使用 npm 或 yarn 安装 Vue.js：

npm install vue
# 或
yarn add vue

创建 Vue 实例

在 HTML 文件中引入 Vue.js 并创建 Vue 实例：

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

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue

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

使用组件

创建并注册一个 Vue 组件：

const app = createApp({})

app.component('my-component', {
  template: '<div>A custom component!</div>'
})

app.mount('#app')

数据绑定

使用 v-bind 进行数据绑定：

<div id="app">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
  </span>
</div>

<script>
  createApp({
    data() {
      return {
        message: 'You loaded this page on ' + new Date().toLocaleString()
      }
    }
  }).mount('#app')
</script>

条件渲染

使用 v-if 进行条件渲染：

<div id="app">
  <p v-if="seen">Now you see me</p>
</div>

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

列表渲染

使用 v-for 进行列表渲染：

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<script>
  createApp({
    data() {
      return {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    }
  }).mount('#app')
</script>

事件处理

使用 v-on 处理事件：

<div id="app">
  <button v-on:click="reverseMessage">Reverse Message</button>
  <p>{{ message }}</p>
</div>

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

表单输入绑定

使用 v-model 进行双向数据绑定：

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

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

计算属性

使用计算属性处理复杂逻辑：

<div id="app">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

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

生命周期钩子

使用生命周期钩子执行特定阶段的代码：

代码实现vue

createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  created() {
    console.log('Component is created')
  },
  mounted() {
    console.log('Component is mounted to the DOM')
  }
}).mount('#app')