Vue2博客项目笔记(第一天)

App.vue 是整个应用的根组件，会被入口文件（如 main.js）导入并挂载到页面上
App.vue 的 export default 作用: 注册子组件

<router-view> 作用: 渲染匹配当前路由规则的组件

<router-view>  
  
</router-view>

选项式API (Options API) 结构

export default {
  // 组件名称（用于调试、递归调用组件等场景）
  name: "MyComponent",

  // props：接收来自父组件传递的参数
  props: {
    title: String
  },

  // data：定义组件内部的响应式数据（状态）
  data() {
    return {
      // count 是一个响应式变量，初始值为 0
      count: 0
    }
  },

  // computed：计算属性，基于响应式数据自动计算结果并缓存
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },

  // watch：侦听器，监听指定数据变化并执行副作用操作
  watch: {
    count(newVal) {
      console.log('count 改变了', newVal)
    }
  },

  // methods：定义组件中的方法
  methods: {
    handleClick() {
      this.count++
    }
  },

  // 生命周期钩子：mounted 表示组件挂载完成（DOM 渲染完成）
  mounted() {
    console.log("组件挂载完成")
    // 这里可以执行一些初始化操作，如访问 DOM、发请求等
  },

  // components：注册当前组件中要使用的子组件
  components: {
    ChildComponent
  }
}

报错原因: <script setup lang="ts"> 是语法糖模式，会自动将组件暴露出去，不需要手写 export default

要保留 export default 把 setup 去掉即可:

transition ，可以给任何下列情形中的元素和组件添加动态效果

• 条件渲染 ( v-if)

• 条件展示 ( v-show)

• 动态组件

• 组件根节点

<i> 标签: 用来显示字体图标（如Element UI 图标）

<!-- 使用 Font Awesome 图标 -->
<i class="fa fa-home"></i> <!-- 显示“首页”图标 -->
<i class="fa fa-search"></i> <!-- 显示“搜索”图标 -->

安装element-ui:

npm i element-ui -S

//回到顶部  
document.body.scrollTop = 0;  
document.documentElement.scrollTop = 0;

props

props 就是组件对外暴露的“参数接口”，用于从父组件接收数据。

this.$router : Vue 实例内置的路由对象，用于编程式导航（跳转页面）

this.$router.push(...): 执行页面跳转操作，相当于 window.location.href = ...，但不会刷新页面

${变量名} 插入变量或表达式

let id = 123
let path = `/view/${id}`  // 等价于 "/view/123"

<ArticleItem v-for="article in articles"  
v-bind:="article"  
:key="article.id"  
>

这一行：v-bind:="article" 是 Vue 中的“对象展开绑定”写法, 作用是把 article 对象中的所有属性，作为 props 传递给子组件 ArticleItem

可以少写很多重复的 :xxx="article.xxx"，代码更简洁

Vue 的全局过滤器（Global Filter）

• 用来格式化或处理模板中展示的数据

• 使用场景：对页面中显示的某些数据统一进行格式化，比如日期格式化、数字格式化、文本处理等