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

<script>
export default {
  data() {
    return {
      message: 'Hello Vue2'
    }
  },
  beforeCreate() {
    console.log('beforeCreate：', this.message) // undefined（数据未初始化）
  },
  created() {
    console.log('created：', this.message) // Hello Vue2（数据已初始化）
    // 发起异步请求
    // this.fetchData()
  },
  mounted() {
    console.log('mounted：', document.getElementById('app').innerText) // Hello Vue2（DOM 已渲染）
  },
  beforeDestroy() {
    console.log('beforeDestroy：实例即将销毁')
    // 清除定时器
    // clearInterval(this.timer)
  }
}
</script>

<template>
  <div>
    <!-- 渲染普通数据 -->
    <p>{{ name }}</p>
    <!-- 支持简单表达式（算术、三元运算等，不支持语句） -->
    <p>{{ age + 1 }}</p>
    <p>{{ isShow ? '显示' : '隐藏' }}</p>
    <!-- 渲染对象属性 -->
    <p>{{ user.username }}</p>
    <!-- 不渲染 HTML 标签（会原样输出） -->
    <p>{{ htmlStr }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vue2 学习手册',
      age: 18,
      isShow: true,
      user: { username: 'zhangsan' },
      htmlStr: '<h1>这是一段HTML</h1>'
    }
  }
}
</script>

<template>
  <div>
    <!-- v-bind 简写 -->
    <a :href="link">Vue 官网</a>
    <!-- v-on 简写 & 传递参数 -->
    <button @click="handleBtnClick('参数1')">点击按钮</button>
    <!-- v-for 遍历数组 -->
    <ul>
      <li v-for="(item, index) in fruitList" :key="item.id">
        {{ index + 1 }} - {{ item.name }}
      </li>
    </ul>
    <!-- v-model 双向绑定 -->
    <input v-model="inputValue" placeholder="请输入内容">
    <p>输入的内容：{{ inputValue }}</p>
    <!-- v-show 与 v-if 区别 -->
    <div v-show="isShow" style="background: red;">v-show 切换</div>
    <div v-if="isShow" style="background: blue;">v-if 切换</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      link: 'https://v2.vuejs.org/',
      fruitList: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ],
      inputValue: '',
      isShow: true
    }
  },
  methods: {
    handleBtnClick(params) {
      console.log('按钮被点击', params)
      this.isShow = !this.isShow // 切换显示状态
    }
  }
}
</script>

<style>
/* 解决 v-cloak 闪烁问题 */
[v-cloak] {
  display: none;
}
</style>

<template>
  <div>
    <p>姓：<input v-model="firstName"></p>
    <p>名：<input v-model="lastName"></p>
    <p>全名：{{ fullName }}</p>
    <p>全名（方法）：{{ getFullName() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  // 计算属性
  computed: {
    // 只读计算属性（常用）
    fullName() {
      // 依赖 firstName 和 lastName，只有两者变化时，才会重新计算
      return this.firstName + this.lastName
    },
    // 可读写计算属性（极少使用）
    // fullName: {
    //   get() {
    //     return this.firstName + this.lastName
    //   },
    //   set(value) {
    //     this.firstName = value[0]
    //     this.lastName = value.slice(1)
    //   }
    // }
  },
  methods: {
    // 方法：每次调用都会重新执行，无缓存
    getFullName() {
      return this.firstName + this.lastName
    }
  }
}
</script>

<template>
  <div>
    <p>输入框：<input v-model="searchValue"></p>
    <p>搜索结果：{{ searchResult }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',
      searchResult: ''
    }
  },
  // 侦听器
  watch: {
    // 基础监听（监听简单数据类型）
    searchValue(newVal, oldVal) {
      console.log('新值：', newVal, '旧值：', oldVal)
      // 模拟异步搜索（如接口请求）
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.searchResult = `模拟搜索结果：${newVal}`
      }, 500) // 防抖：500ms 内输入不触发，避免频繁请求
    },
    // 深度监听（监听对象/数组内部属性变化）
    // user: {
    //   deep: true, // 开启深度监听
    //   handler(newVal, oldVal) {
    //     console.log('用户信息变化：', newVal)
    //   }
    // },
    // 立即执行（组件创建时立即触发一次监听）
    // searchValue: {
    //   handler(newVal) {
    //     this.searchResult = `模拟搜索结果：${newVal}`
    //   },
    //   immediate: true
    // }
  },
  beforeDestroy() {
    // 清除定时器
    clearTimeout(this.timer)
  }
}
</script>

<!-- 父组件 App.vue -->
<template>
  <div>
    <!-- 使用局部组件 -->
    <MyCard></MyCard>
  </div>
</template>

<script>
// 导入局部组件
import MyCard from './components/MyCard.vue'

export default {
  // 注册局部组件
  components: {
    MyCard // 等价于 MyCard: MyCard（ES6 简写）
  }
}
</script>

<!-- components/MyButton.vue -->
<template>
  <!-- 组件模板必须有且只有一个根元素 -->
  <button class="my-button" @click="handleClick">
    {{ buttonText }}
  </button>
</template>

<script>
export default {
  // 组件名称（推荐 PascalCase 命名，使用时可 kebab-case）
  name: 'MyButton',
  // 组件数据：必须是函数（避免多实例共享数据）
  data() {
    return {
      buttonText: '自定义按钮'
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击')
      // 触发自定义事件
      this.$emit('btn-click')
    }
  }
}
</script>

<style scoped>
/* scoped：样式仅作用于当前组件，避免样式污染 */
.my-button {
  padding: 8px 16px;
  background: #42b983;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <!-- 传递静态数据 -->
    <MyChild title="父组件传递的静态标题"></MyChild>
    <!-- 传递动态数据（v-bind 简写 :） -->
    <MyChild :msg="parentMsg" :user="parentUser"></MyChild>
  </div>
</template>

<script>
import MyChild from './MyChild.vue'
export default {
  components: { MyChild },
  data() {
    return {
      parentMsg: '父组件的动态消息',
      parentUser: { id: 1, name: 'zhangsan' }
    }
  }
}
</script>

<!-- 子组件 MyChild.vue -->
<template>
  <div>
    <p>{{ title }}</p>
    <p>{{ msg }}</p>
    <p>{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyChild',
  // 方式1：简单数组形式（不推荐，无校验）
  // props: ['title', 'msg', 'user']

  // 方式2：对象形式（推荐，支持类型校验、默认值、必传项）
  props: {
    title: {
      type: String, // 数据类型
      default: '默认标题' // 默认值
    },
    msg: {
      type: String,
      required: true // 必传项
    },
    user: {
      type: Object,
      default: () => ({}) // 对象/数组默认值必须是函数
    }
  }
}
</script>

<!-- 子组件 MyChild.vue -->
<template>
  <button @click="handleSendData">向父组件传递数据</button>
</template>

<script>
export default {
  data() {
    return {
      childData: '子组件的内部数据'
    }
  },
  methods: {
    handleSendData() {
      // 触发自定义事件，并传递参数
      this.$emit('child-send', this.childData, '额外参数')
    }
  }
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <MyChild @child-send="handleChildSend"></MyChild>
    <p>接收子组件数据：{{ childMsg }}</p>
  </div>
</template>

<script>
import MyChild from './MyChild.vue'
export default {
  components: { MyChild },
  data() {
    return {
      childMsg: ''
    }
  },
  methods: {
    // 接收子组件传递的参数
    handleChildSend(data, extraData) {
      console.log('额外参数：', extraData)
      this.childMsg = data
    }
  }
}
</script>

<!-- 兄弟组件 A：发送数据 -->
<template>
  <button @click="sendMsgToB">向兄弟组件 B 发消息</button>
</template>

<script>
import bus from '../utils/bus'
export default {
  data() {
    return {
      brotherAMsg: '来自组件 A 的消息'
    }
  },
  methods: {
    sendMsgToB() {
      // 通过事件总线触发自定义事件
      bus.$emit('brother-msg', this.brotherAMsg)
    }
  }
}
</script>

<!-- 兄弟组件 B：接收数据 -->
<template>
  <p>接收组件 A 的消息：{{ msgFromA }}</p>
</template>

<script>
import bus from '../utils/bus'
export default {
  data() {
    return {
      msgFromA: ''
    }
  },
  mounted() {
    // 通过事件总线监听自定义事件
    this.busListener = bus.$on('brother-msg', (data) => {
      this.msgFromA = data
    })
  },
  beforeDestroy() {
    // 销毁事件监听，避免内存泄漏
    bus.$off('brother-msg', this.busListener)
  }
}
</script>

<!-- 子组件 MySlot.vue -->
<template>
  <div class="slot-container">
    <h3>子组件标题</h3>
    <!-- 默认插槽：父组件插入的内容会显示在这里 -->
    <slot></slot>
  </div>
</template>

<!-- 父组件使用 -->
<template>
  <MySlot>
    <!-- 插入自定义内容 -->
    <p>这是父组件插入到默认插槽的内容</p>
  </MySlot>
</template>

<!-- 子组件 MyNamedSlot.vue -->
<template>
  <div class="named-slot-container">
    <header>
      <!-- 具名插槽：name 为 header -->
      <slot name="header"></slot>
    </header>
    <main>
      <!-- 默认插槽（name 为 default） -->
      <slot></slot>
    </main>
    <footer>
      <!-- 具名插槽：name 为 footer -->
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!-- 父组件使用 -->
<template>
  <MyNamedSlot>
    <!-- 具名插槽：v-slot:header 简写 #header -->
    <template #header>
      <h1>父组件插入的头部内容</h1>
    </template>

    <!-- 默认插槽：无需指定名称 -->
    <p>父组件插入的主体内容</p>

    <!-- 具名插槽：v-slot:footer 简写 #footer -->
    <template #footer>
      <p>父组件插入的底部内容</p>
    </template>
  </MyNamedSlot>
</template>

<!-- 子组件 MyScopeSlot.vue -->
<template>
  <div class="scope-slot-container">
    <h3>作用域插槽</h3>
    <!-- 子组件通过属性向插槽传递数据 -->
    <slot :user="user" :list="fruitList"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { id: 1, name: 'zhangsan' },
      fruitList: ['苹果', '香蕉', '橙子']
    }
  }
}
</script>

<!-- 父组件使用 -->
<template>
  <MyScopeSlot>
    <!-- 接收子组件插槽传递的数据：v-slot="slotProps" -->
    <template #default="slotProps">
      <p>用户名：{{ slotProps.user.name }}</p>
      <p>水果列表：{{ slotProps.list.join(', ') }}</p>
    </template>

    <!-- 解构赋值简化写法（推荐） -->
    <!-- <template #default="{ user, list }">
      <p>用户名：{{ user.name }}</p>
      <p>水果列表：{{ list.join(', ') }}</p>
    </template> -->
  </MyScopeSlot>
</template>

<!-- App.vue（根组件） -->
<template>
  <div id="app">
    <!-- 路由导航：<router-link> 替代 a 标签，无刷新跳转 -->
    <div class="nav">
      <router-link to="/home">首页</router-link>
      <router-link to="/about">关于我们</router-link>
    </div>
    <!-- 路由出口：匹配的路由组件会渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<style>
/* 路由激活状态样式（默认类名：router-link-active） */
.router-link-active {
  color: #42b983;
  text-decoration: none;
  font-weight: bold;
}
</style>

<!-- User.vue 接收动态参数 -->
<template>
  <div>
    <h3>用户详情页</h3>
    <p>用户ID：{{ $route.params.id }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 也可通过 this.$route.params 获取动态参数
    console.log('用户ID：', this.$route.params.id)
  }
}
</script>

<!-- Home.vue 中添加子路由出口 -->
<template>
  <div>
    <h3>首页</h3>
    <!-- 子路由导航 -->
    <div class="sub-nav">
      <router-link to="/home/news">新闻</router-link>
      <router-link to="/home/product">产品</router-link>
    </div>
    <!-- 子路由出口：子路由组件渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

<template>
  <div>
    <p>用户名称：{{ userName }}</p>
    <p>计数器：{{ count }}</p>
    <p>计数器翻倍：{{ doubleCount }}</p>
  </div>
</template>

<script>
export default {
  // 方式1：通过 this.$store 直接访问
  mounted() {
    console.log('用户信息：', this.$store.state.userInfo)
    console.log('计数器翻倍：', this.$store.getters.doubleCount)
  },

  // 方式2：通过 mapState、mapGetters 辅助函数（推荐，简化代码）
  computed: {
    // 映射 State
    ...Vuex.mapState(['count', 'userInfo']),
    // 映射 Getter
    ...Vuex.mapGetters(['userName', 'doubleCount'])
  }
}
</script>

<template>
  <div>
    <button @click="handleIncrement">增加计数器</button>
    <button @click="handleDecrement">减少计数器</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex' // 导入辅助函数

export default {
  methods: {
    // 方式1：通过 this.$store.commit 触发
    handleIncrement() {
      this.$store.commit('INCREMENT', 2) // 传递参数
    },
    handleDecrement() {
      this.$store.commit('DECREMENT')
    },

    // 方式2：通过 mapMutations 辅助函数
    ...mapMutations(['INCREMENT', 'DECREMENT']),
    // 调用：this.INCREMENT(2)、this.DECREMENT()
  }
}
</script>

<template>
  <div>
    <button @click="handleLogin">模拟登录</button>
    <button @click="handleIncrementAsync">异步增加计数器</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex' // 导入辅助函数

export default {
  methods: {
    // 方式1：通过 this.$store.dispatch 触发
    async handleLogin() {
      const res = await this.$store.dispatch('login', { name: 'zhangsan', age: 18 })
      if (res) {
        console.log('登录成功')
      }
    },
    async handleIncrementAsync() {
      await this.$store.dispatch('incrementAsync', 3)
    },

    // 方式2：通过 mapActions 辅助函数
    ...mapActions(['login', 'incrementAsync']),
    // 调用：this.login(userData)、this.incrementAsync(num)
  }
}
</script>

<!-- 局部自定义指令 -->
<template>
  <div>
    <!-- 使用自定义指令 -->
    <input v-focus type="text">
    <input v-color="'red'" type="text">
  </div>
</template>

<script>
export default {
  // 局部自定义指令
  directives: {
    color: {
      // el：指令绑定的 DOM 元素
      // binding：指令相关信息（value：指令值）
      inserted(el, binding) {
        el.style.color = binding.value
      }
    }
  }
}
</script>

<!-- 组件中使用局部混入 -->
<template>
  <div>{{ mixinMsg }}</div>
</template>

<script>
import commonMixin from '../mixins/commonMixin'

export default {
  // 局部混入（数组形式，可多个）
  mixins: [commonMixin],
  mounted() {
    this.mixinMethod() // 调用混入的方法
    console.log('组件自身的 mounted 钩子')
  }
}
</script>

<!-- 局部过滤器 -->
<template>
  <div>
    <!-- 使用全局过滤器 -->
    <p>格式化日期：{{ time | formatDate }}</p>
    <!-- 使用局部过滤器 -->
    <p>字符串大写：{{ str | toUpper }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: new Date(),
      str: 'vue2'
    }
  },
  // 局部过滤器
  filters: {
    toUpper(value) {
      if (!value) return ''
      return value.toUpperCase()
    }
  }
}
</script>