Vue.js 核心知识点总结

 基础指令和数据绑定

v-for 循环渲染

用于遍历数组和对象,是最常用的列表渲染指令。

<template>
  <!-- 遍历数组 -->
  <div v-for="(item, index) in items" :key="index">
    {{ item.name }}
  </div>
​
  <!-- 遍历对象 -->
  <div v-for="(value, key) in object" :key="key">
    {{ key }}: {{ value }}
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      items: [{name: '张三'}, {name: '李四'}],
      object: {
        title: '标题',
        author: '作者'
      }
    }
  }
}
</script>

v-model 双向绑定

实现表单输入和数据的双向绑定。

<template>
  <input v-model="message">
  <p>输入的内容: {{ message }}</p>
</template>
​
<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

样式绑定

动态样式绑定

可以通过对象或数组语法绑定样式。

<template>
  <div :class="{ active: isActive }" 
       :style="{ color: textColor }">
    动态样式
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>

计算属性和方法

计算属性

用于复杂逻辑的数据计算，有缓存特性。

<script>
export default {
  data() {
    return {
      price: 100,
      quantity: 2
    }
  },
  computed: {
    totalPrice() {
      return this.price * this.quantity
    }
  }
}
</script>

DOM操作和定时器

<script>
export default {
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        // 定时器操作
      }, 1000)
    },
    handleDOM() {
      const element = this.$refs.myElement
      // DOM操作
    }
  },
  beforeDestroy() {
    // 清除定时器
    clearInterval(this.timer)
  }
}
</script>

过滤器使用

<template>
  <div>{{ price | formatPrice }}</div>
</template>
​
<script>
export default {
  filters: {
    formatPrice(value) {
      return `￥${value.toFixed(2)}`
    }
  }
}
</script>

组件通信

父子组件通信

<!-- 父组件 -->
<template>
  <child-component 
    :message="parentMsg"
    @update="handleUpdate">
  </child-component>
</template>
​
<!-- 子组件 -->
<script>
export default {
  props: ['message'],
  methods: {
    sendToParent() {
      this.$emit('update', '子组件数据')
    }
  }
}
</script>

路由基础

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
​
const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
​
const router = new VueRouter({
  routes
})

Axios使用

// API调用
import axios from 'axios'
​
export default {
  methods: {
    async getData() {
      try {
        const response = await axios.get('/api/data')
        this.data = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}