Vue.js 基础知识与特性

1. 简单使用总结

1.1 使用 Vue 实例管理 DOM

核心思想：Vue 实例将页面元素和数据联系起来，通过双向绑定机制，使开发者只需关注数据和事件的处理，无需手动修改视图。
DOM 与数据/事件绑定：Vue 提供了简洁的语法来实现数据绑定和事件监听，使得开发更加高效。

1.2 Vue 实例的工作过程

HTML 加载：首先加载 HTML 文件，包括容器（如 <div>）。
Vue 初始化：创建 Vue 实例时，Vue 会解析绑定的容器中的模板，生成处理后的新容器，并替换原有的容器。
模板解析：容器中的代码成为模板，Vue 通过 {{}} 占位符进行插值，类似于 MyBatis 中的 ${} 和 #{}。
容器与实例关系：容器和 Vue 实例是一对一的关系。在真实开发中，通常只会有一个 Vue 实例，并且会配合组件一起使用。

1.3 模板语法

插值：用于插入数据到标签内容中，如 {{ message }}。
指令：用于绑定属性、事件等，所有指令都以 v- 开头，例如 v-bind、v-on。

2. 组件化编程

2.1 组件的本质

组件是 Vue 实例：组件本质上是一个 Vue 实例，因此它可以接收 data、methods、生命周期函数等选项。
无 el 属性：组件不会直接与页面元素绑定，否则无法复用。因此，组件没有 el 属性。
template 属性：组件需要一个 HTML 模板，因此增加了 template 属性，其值为 HTML 模板。

2.2 组件定义

全局组件：定义完毕后，任何 Vue 实例都可以直接在 HTML 中通过组件名称来使用组件。
局部组件：仅在特定的 Vue 实例或父组件中注册和使用。

2.3 数据与方法

data 必须是函数：为了确保每个组件实例都有独立的数据副本，data 必须是一个返回对象的函数，而不是直接的对象。
原型链：组件的构造函数（如 VueComponent）具有 prototype 属性，实例对象（如 vc）则通过 __proto__ 隐式引用构造函数的原型对象。

2.4 示例

<!-- 全局组件 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello Vue!',
      content: 'This is a Vue component.'
    };
  },
  methods: {
    greet() {
      alert('Hello!');
    }
  }
};
</script>

3. 生命周期

3.1 生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程，Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于不同的生命周期阶段时，对应的函数就会被触发调用。

3.2 常见钩子函数

钩子函数	描述
`beforeCreate`	在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
`created`	在实例创建完成后被调用，此时已完成数据观测、属性和方法的运算，但尚未挂载到 DOM。
`beforeMount`	在挂载开始之前被调用，相关的 render 函数首次被调用。
`mounted`	在实例挂载到 DOM 后被调用，此时可以访问到真实的 DOM 节点。
`beforeUpdate`	在数据更新时调用，发生在虚拟 DOM 打补丁之前。
`updated`	在数据更新后，虚拟 DOM 重新渲染并打补丁后调用。
`beforeDestroy`	在实例销毁之前调用，此时实例仍然完全可用。
`destroyed`	在实例销毁后调用，此时所有的事件监听器和子组件都被移除。

3.3 生命周期图示

1	beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

4. 运行流程

4.1 页面加载

进入页面：首先加载 index.html 和 main.js 文件。
导入模块：main.js 导入了 vue、app、router 等模块，并创建 Vue 实例，关联 index.html 页面的元素。
使用路由：main.js 导入了 App 组件，并通过 <router-view> 标签引用该组件。
默认显示：第一次访问时，默认显示 App 组件。App 组件包含一个图片和一个代表路由视图的 <router-view>。由于路由路径默认使用 HASH 模式（/#/），因此会显示 HelloWorld 组件。

4.2 组件跳转

自定义组件：可以尝试自己编写一个组件，并将其加入路由配置中。
点击跳转：通过点击按钮或其他方式，可以触发路由跳转，显示不同的组件。

4.3 示例

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script src="/dist/main.js"></script>
</body>
</html>

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld.vue';
import MyComponent from '@/components/MyComponent.vue';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/', component: HelloWorld },
    { path: '/my-component', component: MyComponent }
  ]
});

<!-- App.vue -->
<template>
  <div>
    <img src="@/assets/logo.png" alt="Logo">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<!-- HelloWorld.vue -->
<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
};
</script>

<!-- MyComponent.vue -->
<template>
  <div>
    <h1>My Custom Component</h1>
    <button @click="goToHome">Go to Home</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    goToHome() {
      this.$router.push('/');
    }
  }
};
</script>