3. Vue.js基本概念

3.1 响应式数据绑定

// Vue 3组合式API
import { createApp, ref } from 'vue'

createApp({
  setup() {
    const count = ref(0)
    
    return {
      count
    }
  }
}).mount('#app')

3.2 模板语法

{{ message }}


显示内容
{{ item.name }}
点击按钮


{{ computedProperty }}


{{ watchedProperty }}

3.3 计算属性和监听器

// 计算属性
const computedProperty = computed(() => {
  return count.value * 2
})

// 监听器
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`)
})

4. Vue.js组件

4.1 组件定义

// 定义组件
const HelloWorld = {
  props: {
    msg: String
  },
  setup(props) {
    return {
      props
    }
  },
  template: `
    

      
{{ props.msg }}
    
  `
}

// 使用组件
createApp({
  components: {
    HelloWorld
  }
}).mount('#app')

4.2 组件通信

4.2.1 父组件向子组件传递数据（props）

// 父组件


// 子组件
const ChildComponent = {
  props: {
    message: String
  },
  setup(props) {
    return {
      props
    }
  }
}

4.2.2 子组件向父组件传递数据（emit）

// 子组件
const ChildComponent = {
  emits: ['update'],
  setup(props, { emit }) {
    const handleClick = () => {
      emit('update', 'Hello from child')
    }
    
    return {
      handleClick
    }
  }
}

// 父组件

5. Vue.js状态管理

5.1 组件内状态

import { ref, reactive } from 'vue'

// 使用ref定义响应式数据
const count = ref(0)

// 使用reactive定义响应式对象
const user = reactive({
  name: 'John',
  age: 30
})

// 修改数据
count.value++
user.age = 31

5.2 全局状态管理（Pinia）

// 创建store
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

// 使用store
import { useCounterStore } from './stores/counter'

const store = useCounterStore()
store.increment()
console.log(store.count)
// 1
console.log(store.doubleCount)
// 2

import { onMounted, onUpdated, onUnmounted } from 'vue'

setup() {
  // 组件挂载后调用
  onMounted(() => {
    console.log('Component mounted')
  })
  
  // 组件更新后调用
  onUpdated(() => {
    console.log('Component updated')
  })
  
  // 组件卸载前调用
  onUnmounted(() => {
    console.log('Component unmounted')
  })
}

// 创建路由配置
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 应用路由
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

首页
关于我们


import { useRouter } from 'vue-router'

const router = useRouter()

const goToHome = () => {
  router.push('/')
}

const goToAbout = () => {
  router.push({ name: 'About' })
}