Welcome to {{ name }}

My age is {{ age }}
My friend is {{ person.name }}, {{ person.age }} years old
除了直接声明变量，Vue还支持计算属性，通过计算属性可以根据已有的变量值来动态计算出新的值。
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  adult() {
    return this.age >= 18;
有时候我们希望监听变量的变化，然后执行一些特定的操作，Vue提供了watch属性来监听变量的变化。
watch: {
  age(newValue, oldValue) {
    console.log('Age changed from ' + oldValue + ' to ' + newValue);
总之，在Vue中，变量是指用来存储和管理数据的容器，我们可以利用变量来动态地展示和操作数据。通过数据声明、数据绑定、数据计算和数据监听等方式，我们可以灵活地使用变量来实现复杂的交互逻辑。
            在Vue中，变量指的是Vue实例中的数据。Vue中的变量可以通过Vue实例的data属性进行定义和管理。在data属性中定义的变量可以在Vue实例的模板中进行使用和展示。
以下是关于Vue中变量的一些重要概念和用法：
数据绑定：Vue中的变量可以与模板中的DOM元素进行双向绑定，实现数据的动态展示和更新。通过在模板中使用双花括号语法（{{}}）或v-bind指令，将Vue实例的变量与DOM元素进行绑定。当Vue实例的变量值发生变化时，绑定的DOM元素会自动更新。
计算属性：除了直接使用变量，Vue还提供了计算属性来处理复杂的数据逻辑。计算属性是依赖于Vue实例变量而动态计算得出的值，可以通过定义一个带有get和set方法的计算属性来实现具体的计算逻辑。计算属性会根据Vue实例的变量的变化自动更新。
监听器：对于一些需要在Vue实例变量发生改变时执行特定逻辑的情况，可以使用watch属性。watch属性可以监听指定的Vue实例变量，并在变量值发生变化时触发回调函数。通过监听器，可以对变量的改变进行处理，如发送Ajax请求、调用方法等。
过滤器：Vue中的过滤器可以对Vue实例的变量进行格式化和处理。过滤器可以在模板中使用，通过管道符（|）进行链式调用。过滤器可以用于对变量的字符串进行截取、格式化日期、转换大小写等操作。
响应式原理：Vue的响应式原理是Vue实现数据绑定的核心机制。Vue通过使用依赖追踪和触发器来监测变量的变化，并更新相关的视图。当Vue实例的变量被修改时，Vue会立即通知相关的视图进行更新。这个响应式的过程是自动完成的，无需手动进行操作。
data变量：
data变量是每个Vue组件私有的数据，用于存储该组件内部使用的数据。我们可以在组件的data属性中定义这些变量。例如：
export default {
  data() {
    return {
      message: 'Hello Vue!',
      count: 0,
在上面的组件中，我们定义了两个data变量，分别是message和count。这些变量可以在组件的模板中使用，也可以在组件的方法中更新和操作。
props变量：
props变量是由父组件传递给子组件的属性值。父组件通过props属性将数据传递给子组件，在子组件中可以通过props属性接收这些数据。例如：
// 父组件
<template>
  <ChildComponent :message="greeting" :count="5" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  data() {
    return {
      greeting: 'Hello',
  components: {
    ChildComponent,
</script>
// 子组件
<template>
    <p>{{ message }}</p>
    <button @click="increment">{{ count }}</button>
</template>
<script>
export default {
  props: {
    message: String,
    count: Number,
  methods: {
    increment() {
      this.count++;
</script>
在上面的例子中，父组件通过props属性将greeting和5两个值传递给了子组件ChildComponent。在子组件的props属性中定义了message和count两个变量，分别接收父组件传递过来的值。子组件可以直接在模板中使用message和count变量，也可以在子组件的方法中使用和操作这些变量。
总结起来，变量是Vue中用于存储和管理数据的属性。在组件中，我们可以定义data变量来表示该组件内部的私有数据，也可以通过props变量来接收父组件传递过来的属性值。通过对变量的操作和更新，我们可以实现数据的动态显示和交互。