vue基本语法总结大全

在Vue中，主要的基础语法可以概括为以下几点：

1. 数据绑定：使用双大括号 {{ }} 进行文本插值，或使用 v-bind 指令绑定属性。

<template>
  <div>{{ message }}</div>
  <div v-bind:id="dynamicId">...</div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      dynamicId: 'unique-id'
    };
  }
};
</script>

2. 指令：以 v- 开头的特殊属性，提供声明式的方法来将数据绑定到DOM。

<template>
  <div v-if="condition">...</div>
  <div v-for="item in items" :key="item.id">{{ item.text }}</div>
  <button v-on:click="doSomething">Click me</button>
</template>

3. 计算属性和侦听器：使用 computed 创建依赖于其他数据的复杂表达式，使用 watch 侦听数据变化。

<template>
  <div>{{ reversedMessage }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

4. 组件化：通过 Vue.component 或单文件组件（.vue 文件）创建可复用的组件。

// 注册组件
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});
 
// 或者在单文件组件中
<template>
  <div>A custom component!</div>
</template>

5. 样式绑定：使用 v-bind:style 或 :style 绑定内联样式。

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">...</div>
</template>
 
<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 30
    };
  }
};
</script>

6. 条件渲染：使用 v-if, v-else-if, v-else 和 v-show 控制元素的显示和隐藏。

<template>
  <div v-if="condition">...</div>
  <div v-else>...</div>
  <div v-show="isVisible">...</div>
</template>

7. 事件处理：使用 v-on:event 或 @event 监听DOM事件。

<template>
  <button @click="doSomething">Click me</button>
</template>
 
<script>
export default {
  methods: {
    doSomething() {
      // Event handling logic
    }
  }
};
</script>

8. 双向数据绑定：使用 v-model 实现表单输入和数据之间的双向绑定。

<template>
  <input v-model="message" />
</template>
 
<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

9. 插槽和作用域插槽：使用 slot 和 scoped slot 创建可复用的组件接口。

<!-- 父组件 -->
<template>
  <my-component>
    <template scope="props">
      {{ props.text }}