Vue基础补充简绍

Vue基础补充简绍

一.Vue的简绍

Vue（读音为"view"）是一个用于构建用户界面的渐进式JavaScript框架。它被设计为易于上手，灵活且高效，使开发者能够快速构建交互性强、可复用和可维护的Web应用程序。

Vue的核心思想是通过数据驱动视图，并使用声明式的语法来构建组件化的用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，将业务逻辑和视图分离，使开发者能够更好地组织和管理代码。

Vue的特点包括：

1.简单易学：Vue的API简洁明了，学习曲线较低，使初学者能够快速上手。

2.组件化开发：Vue提供了组件化开发的能力，使开发者能够将一个页面拆分为多个独立的组件，提高代码的可复用性和可维护性。

3.响应式数据绑定：Vue使用了双向数据绑定的机制，通过响应式的数据绑定，开发者可以很方便地将数据和视图进行关联，使页面的状态与数据保持同步。

4.轻量高效：Vue的体积较小，加载速度快，同时也具有高性能的特点。

5.生态系统丰富：Vue拥有庞大的生态系统，包括丰富的插件、工具和第三方库，使开发者能够更好地构建和扩展应用程序。

二.侦听器

你可以在组件的watch选项中定义属性的侦听器。watch选项可以是一个对象，键是要侦听的属性，值是一个回调函数。

export default {
  data() {
    return {
      message: 'Hello, world!'
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`属性发生变化：${oldValue} => ${newValue}`);
    }
  }
}

我们在组件的watch选项中定义了一个message属性的侦听器。当message属性发生变化时，回调函数会被执行。

三.生命周期函数

生命周期顾名思义就一个对象不同阶段时会自动触发的函数。
1.beforeCreate：在实例初始化之后，数据观测和事件配置之前调用。

2.created：在实例创建完成后立即调用。此时，实例已经完成数据观测，可以访问到数据、计算属性、方法等，并可以进行DOM操作。

3.beforeMount：在挂载开始之前调用。此时，模板编译已经完成，但尚未将模板渲染到真实的DOM中。

4.mounted：在挂载完成后调用。此时，组件已经被渲染到真实的DOM中，可以进行DOM操作。

5.beforeUpdate：在响应式数据发生改变导致重新渲染之前调用。在此钩子函数中，可以访问到更新前的状态，但不能直接修改数据。

6.updated：在响应式数据发生改变导致重新渲染之后调用。在此钩子函数中，可以访问到更新后的状态，可以进行DOM操作。

7.beforeUnmount：在卸载组件之前调用。可以用于清理定时器、取消订阅等操作。

8.unmounted：在卸载完组件后调用。此时，组件已经从DOM中移除，可以进行一些清理工作。

四.自定义指令

定义指令可以用于在DOM元素上添加特定的行为或交互。通过自定义指令，可以扩展Vue的功能，实现一些特定的需求。
通过在Vue实例中的directives选项中注册指令。

directives:{
					hqyj:{
						//钩子
						mounted(el){
							// console.log(el,"6666666666666666")
							el.style.color="#"+Math.random().toString().slice(2,8)
						}
					},
					hot:{
						mounted(el){
							el.innerHTML+="hot"
						}
					},
					size:{
						mounted(el,bind){
							// console.log(el,bind.value)
							bind.value||(bind.value=15)
							el.style.fontSize=bind.value+"px"
						}
					},
					focus:{
						mounted(el){
							el.focus()
						}
					}
				},

五.组件基础

在components中可以定义组件，在template可以定义组件的模板，可以说组件化开发是Vue的核心思想之一。

components: {
					box,
					myhead,
					box2: {
						template: `<div class="box2">
						      <p>box2组件</p>
							  <p :class="x">{{msg}}</p>
							  <button @click="fn">btn</button>		
						 </div>`,
						 data(){
							 return {
								 msg:"hello box2的data"
							 }
						 },
						 methods:{
							 fn(){
								 console.log(66666,this)
							 }
						 },
						 mounted(){
							 console.log(666666,"box2")
						 }
					}
				},

组件可以看作一个另一个相对独立的html文件，拥有自己的方法，数据源，计算属性等。

六.全局指令和全局组件

当牵扯到组件时，就会有局部作用域和全局作用域的说法，在组件外部不可以使用组件数据和方法等等。在组件内部可以使用全局作用域下的数据和方法等等。
全局指令注册：

mport { createApp } from 'vue';

const app = createApp();

// 注册全局指令
app.directive('myDirective', {
  // 指令的生命周期钩子
  mounted(el, binding, vnode) {
    // 指令绑定到元素上时执行的逻辑
  },
  updated(el, binding, vnode, prevVnode) {
    // 元素更新时执行的逻辑
  },
  unmounted(el, binding, vnode) {
    // 指令从元素上解绑时执行的逻辑
  }
});

app.mount('#app');

全局组件注册：

import { createApp } from 'vue';
import MyComponent from './MyComponent.vue';

const app = createApp();

// 注册全局组件
app.component('my-component', MyComponent);

app.mount('#app');