当前位置：首页 > VUE

vue实现例子

2026-02-10 14:16:21VUE

Vue 实现示例

以下是一个简单的 Vue 实现示例，展示如何创建一个基础的 Vue 应用。

安装 Vue

通过 CDN 引入 Vue：

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

或使用 npm 安装：

npm install vue

基础示例

创建一个简单的 Vue 实例：

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

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

组件示例

创建一个 Vue 组件：

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

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

  new Vue({
    el: '#app'
  })
</script>

响应式数据绑定

展示 Vue 的响应式特性：

<div id="app">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })
</script>

条件渲染

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

<div id="app">
  <p v-if="seen">Now you see me</p>
  <button @click="toggleSeen">Toggle</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      seen: true
    },
    methods: {
      toggleSeen: function () {
        this.seen = !this.seen
      }
    }
  })
</script>

列表渲染

使用 v-for 渲染列表：

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

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  })
</script>

表单输入绑定

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

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

<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  })
</script>

计算属性

使用计算属性：

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

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

生命周期钩子

展示生命周期钩子的使用：

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

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    created: function () {
      console.log('Vue instance created')
    },
    mounted: function () {
      console.log('Vue instance mounted')
    }
  })
</script>

这些示例展示了 Vue 的核心功能，包括数据绑定、组件化、条件渲染、列表渲染、表单绑定、计算属性和生命周期钩子。可以根据需要进一步扩展和组合这些功能。

vue实现例子