当前位置：首页 > VUE

Vue语法实现

2026-02-10 01:23:25VUE

Vue 语法实现

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。以下是 Vue 的核心语法实现方式。

模板语法

Vue 使用基于 HTML 的模板语法，允许开发者声明式地将数据绑定到 DOM。

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

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

指令

指令是带有 v- 前缀的特殊属性，用于在表达式的值改变时响应式地更新 DOM。

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

new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

计算属性

计算属性用于处理复杂逻辑，避免在模板中直接写入过多逻辑。

Vue语法实现

new Vue({
  el: '#app',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

方法

方法可以在模板中调用，适合处理事件或需要复用的逻辑。

<button v-on:click="greet">Greet</button>

new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  methods: {
    greet: function() {
      alert('Hello ' + this.name + '!')
    }
  }
})

组件

组件是 Vue 的核心概念之一，允许开发者将 UI 拆分为独立可复用的模块。

Vue语法实现

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

new Vue({
  el: '#app',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

生命周期钩子

Vue 实例在创建时会经历一系列初始化过程，开发者可以在不同阶段添加自己的代码。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created: function() {
    console.log('Instance created')
  },
  mounted: function() {
    console.log('Instance mounted')
  }
})

响应式原理

Vue 使用数据劫持结合发布者-订阅者模式，通过 Object.defineProperty() 实现数据响应式。

var data = { message: 'Hello' }
Object.defineProperty(data, 'message', {
  get: function() {
    return this._message
  },
  set: function(newValue) {
    this._message = newValue
    console.log('message changed to: ' + newValue)
  }
})

单文件组件

Vue 单文件组件 (.vue 文件) 将模板、脚本和样式封装在一个文件中。

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

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

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