VUE-VUE介绍-CSDN博客

本文链接：https://blog.csdn.net/Today_SEA/article/details/134385646

VUE-VUE介绍

一、简介

Vue.js（通常简称为Vue）
是一套用于构建用户界面的渐进式JavaScript框架；
渐进式：被设计成逐步采用的框架，可以轻松地逐步应用到项目中；

二、特点

1. 声明式渲染

Vue 使用基于HTML的模板语法，将DOM和数据绑定在一起，通过简单的模板语法，你可以轻松地将数据声明式地渲染到DOM中。

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

var app = new Vue({
  el: '#app', // 挂载到页面中的元素，这里是 id 为 'app' 的元素
  data: {
    message: 'Hello Vue!'
  }
});

2. 组件化开发

Vue允许你将应用拆分为小的、独立可复用的组件;
每个组件都包含自己的模板、脚本和样式;

组件化开发提高了代码的可维护性和复用性;

<!-- 定义一个组件，文件名：MyComponent.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'My Component',
      content: 'This is a Vue component.'
    };
  }
};
</script>

使用上述组件：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'; // 导入组件

export default {
  components: {
    'my-component': MyComponent // 注册组件
  }
};
</script>

组件定义为 MyComponent，则可以在模板中使用 <my-component>，Vue.js 会自动进行匹配。

3. 响应式数据绑定

Vue通过双向数据绑定实现了响应式的数据更新。
当数据发生变化时，视图会自动更新，而当用户与视图交互时，数据也会相应地更新。
```
<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>
```
- 输入框的值与 Vue 实例中的 message 数据属性相绑定，由于双向绑定的作用，当输入框的值变化时，这个段落中显示的内容也会随之更新。

4. 生命周期钩子

Vue组件有一系列的生命周期钩子，允许你在组件的不同阶段执行自定义逻辑。
在不同阶段的实例生命周期中执行自定义逻辑。适用于执行一些初始化操作、监听生命周期事件、或清理工作；
生命周期钩子包括：
- beforeCreate: 在实例初始化之后，数据观测 (data observation) 和 event/watcher 事件配置之前被调用。在这个阶段，实例的选项对象中的 data 和 methods 属性被初始化，但实例尚未被挂载到 DOM。
- created: 在实例被创建后调用。在这一步，实例已经完成以下的配置：数据观测 (data observation)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没有开始，$el 属性目前不可见。
- beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
- mounted: el 被新创建的 vm. $e l 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载到了一个文档内的元素上，当 m o u n t e d 被调用时 v m .$ el 将指向文档内的这个元素。
- beforeUpdate: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
- updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
- beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed: 实例销毁后调用。在这一步，Vue 实例的所有指令已经解绑定，所有事件监听器已被移除，所有子实例也已经销毁。

声明生命周期钩子示例：

<template>
  <div>
    <!-- 组件的模板内容 -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from the component!'
    };
  },
  beforeCreate() {
    console.log('Component - Before Create Hook');
  },
  created() {
    console.log('Component - Created Hook');
  },
  mounted() {
    console.log('Component - Mounted Hook');
  },
  beforeDestroy() {
    console.log('Component - Before Destroy Hook');
  },
  destroyed() {
    console.log('Component - Destroyed Hook');
  }
};
</script>

<style>
/* 组件的样式 */
</style>

5. 路由管理

Vue提供了Vue Router来管理单页面应用的路由。

允许你通过路由切换来渲染不同的组件，实现无刷新的单页面应用。

const routes = [ 
  // 定义两个路由：
  // 一个是根路径 / 对应的组件是 Home
  // 另一个是 /about 路径对应的组件是 About
  { path: '/', component: Home },
  { path: '/about', component: About }
];

//创建 VueRouter 实例，这个实例会管理应用程序的路由
const router = new VueRouter({
  routes
});

//创建了一个 Vue 实例，通过 { router } 的方式将之前创建的 VueRouter 实例传递给了 Vue 实例
const app = new Vue({
  router
}).$mount('#app');// $mount('#app') 将 Vue 实例挂载到具有 id 为 'app' 的元素上

6. 状态管理

Vue提供了Vuex来进行状态管理。

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它集中管理应用中所有组件的状态，使得状态的变更更加可追踪和可调试。

//创建了一个 Vuex 的 Store 实例。
//state 属性定义了应用的状态，这里只有一个变量 count。
//mutations 属性定义了一系列修改状态的方法，这里只有一个 increment 方法，用于增加 count 的值。
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

//创建了一个 Vue 实例，并将之前创建的 Vuex Store 实例通过 store 选项传递给了该 Vue 实例。
new Vue({
  store,
  computed: {
    count() {//用于获取 Vuex Store 中的 count 状态值
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {//用于触发 Vuex Store 中的 increment mutation，修改 count 状态
      this.$store.commit('increment');
    }
  }
});