第三章【vue】基础（超详细）

eslint

安装

npm install eslint -D

初始化

npx eslint --init

vueUse 的应用

安装

npm i @vueuse/core

vueuse 官方文档(opens new window)

获取滚动距离

import { useScroll } from "@vueuse/core";
const { y } = useScroll(window);

监听元素进入视口

import { useIntersectionObserver } from "@vueuse/core";
// el:要监听的元素
//  isIntersecting：元素是否进入视口 布尔值
// stop：停止监听方法
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
  console.log("元素进入视口", isIntersecting);
  if (isIntersecting) {
    el.src = binding.value;
    //图片加载完毕后停止监听
    stop();
  }
});

获取鼠标相对位置

import { useMouseInElement } from "@vueuse/core";
//el:相对的元素 默认为相对屏幕
//elementX 元素相对的左边left值
//elementY 元素相对的顶部top值
//isOutside 鼠标是否在元素外 布尔值
const { elementX, elementY, isOutside } = useMouseInElement(el);

Vue中的css

组件作用域 CSS

当 

插槽选择器

默认情况下，作用域样式不会影响到  渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以明确地将插槽内容作为选择器的目标：

全局选择器

如果想让其中一个样式规则应用到全局，比起另外创建一个 

CSS Modules

一个 

自定义注入名称

你可以通过给 module attribute 一个值来自定义注入 class 对象的属性名：

与组合式 API 一同使用(useCssModule)

可以通过 useCssModule API 在 setup() 和 

CSS 中的 v-bind()

单文件组件的 

这个语法同样也适用于 

实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。

自定义指令封装

v-once 指令

只渲染一次元素和组件，并且跳过以后的更新。

在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

使用自定义指令实现图片懒加载

自定义指令一般位于 main.js 中进行配置

//获取app实例
import {createApp} from "vue";

const app = createApp(App);
app.directive("img-lazy", {
    //mounted 自定义指令绑定元素挂载完毕时触发
    mounted(el, binding) {
        //el 组件实例 自定义指令绑定的那个元素 img
        //binding: 等于号指令表达式后面的值
        console.log("自定义指令", el, binding.value);
        // 使用vueuse提供的useIntersectionObserver方法判断当前绑定自定义指令的元素是否进入视口
        useIntersectionObserver(el, ([{isIntersecting}]) => {
            //isIntersecting 元素是否进入视口 布尔值
            console.log("元素进入视口", isIntersecting);
            //img标签在绑定src属性时会立即发送图片请求
            if (isIntersecting) el.src = binding.value;
        });
    },
});

封装图片懒加载插件

• 在上述操作中，图片懒加载代码放在 main.js 入口函数中，而入口函数只是负责页面初始化，不因该包含太多逻辑代码
• 可以通过插件的方法把懒加载指令封装为插件，main.js 入口函数只需要负责注册插件即可

1. 项目 src 文件夹下新建directives插件文件夹 在此文件夹中存放插件
2. 编写懒加载插件

//引入vueuse中监听元素进入视口的方法
import {useIntersectionObserver} from "@vueuse/core";
//定义懒加载插件
export const lazyPlugin = {
    //install函数 固定写法 参数为app实例
    install(app) {
        //懒加载指令逻辑
        //自定义指令
        app.directive("img-lazy", {
            mounted(el, binding) {
                //el 组件实例 自定义指令绑定的那个元素 img
                //binding: 等于号指令表达式后面的值

                const {stop} = useIntersectionObserver(el, ([{isIntersecting}]) => {
                    console.log("元素进入视口", isIntersecting);
                    if (isIntersecting) {
                        el.src = binding.value;
                        //图片加载完毕后停止监听
                        stop();
                    }
                });
            },
        });
    },
};

1. 在 main.js 中注册插件

//引入懒加载指令并注册
import {lazyPlugin} from "@/directives";

app.use(lazyPlugin);

1. 自定义指令的使用

监听元素宽高变化

//监听元素宽高变化
//创建元素数组
const map = new WeakMap()
//创建观察者
const ob = new ResizeObserver((entries) => {
    for (const entry of entries) {
        const handle = map.get(entry.target)
        const box = entry.borderBoxSize[0]
        if (handle) handle({width: box.inlineSize, height: box.blockSize})
    }
})

export const resizePlugin = {
    install(app) {
        app.directive('resize', {
            mounted(el, binding) {
                //监听元素尺寸变化
                ob.observe(el)
                map.set(el, binding.value)
            },
            unmounted(el) {
                ob.unobserve(el)
            }
        })
    }
}

使用

组件

组件默认激活类名配置

组件默认支持激活样式显示的类名，只需要给active-class属性设置对应的类名即可

组件的全局注册（插件方式）

//把computed中的组件都进行全局注册
//通过插件的方式
import ImageView from "@/components/ImageView/index.vue";
import XtxSku from "@/components/XtxSku/index.vue";

export const componentsPlugin = {
    install(app) {
        //