前端（vue）草稿

1. VUE->js 中条件表达式什么情况下才为true呢，经过测试，如下

if (obj) {
}

1、对象， 只要这个对象不为null，就会被计算为 true
2、Undefined， 也会被计算为 false
3、null ，会被计算为 false
4、布尔值， 被计算为布尔的值
5、数字， 如果是 +0，-0， NaN，则会被计算为 false ，否则为 true
6、字符串， 如果是空字符串 ”“ ，为 false，否则为 true

2. VUE->this 的指向问题

官方文档说明：
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this自动绑定为 Vue 实例。

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。
理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，
this.a 将是 undefined。

意思就是：() => {} ，箭头代表的函数没有this

3. VUE->let 与 const 的区别

let声明的变量可以改变，值和类型都可以改变，没有限制。
const声明的变量不可改变，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

let ：
	let i ；不报错 此时为 underfind
	let i = 1 ； 不报错
	i = 2 ；不报错，此时 i 为2
const：
	const j； 报错，必须初始化
	const j = 1 ；不报错
	j = 2 ；报错

4. VUE-><template #prefix>让图标在输入框的前面

<a-input size="large" type="text" >
<template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
</a-input>

image

5. VUE->native、stop、prevent 的使用

native：

<router-link @click.native = "method"></router-link>
router-link会阻止click事件,如果不加 native，不会触发 method 方法
<input @dbclick.native="method"></input>
native阻止之前的双击效果（聚焦输入框），触发method方法

stop：

点击子组件时，想调用子组件上的footClick方法，实际上调用了父组件上的方法

<view class="footer-box" @click="clickCard">
<view @click="footerClick('评论')"><text class="footer-box__item">评论</text>
</view>
--- 调整之后，就没问题了
<view class="footer-box" @click="clickCard">
<view @click.stop="footerClick('评论')"><text class="footer-box__item">评论</text>
</view>

prevent：

禁止使用原有的click方法，使用自己定义的方法

-- 会执行 notLink 方法，不会跳转到百度页面
<a href="http://www.baidu.com"  @click.prevent='notLink'>百度</a>

6. VUE->父组件向子组件传多个值（props）

image

7. VUE->el-row 与 el-col 布局

<el-row> 会将行平均分为24份，<el-col> 表示每列所占的份数
image

其中，返回按钮占 6 份，其他按钮占 13 份,并向右偏移 5 份（查看代码）（6+13+5=24） 
<el-row :gutter="20"> -- gutter单元格之间间隔多少px，20px
    <el-col :span="6"> -- span，此单元格占比 6/24
        <el-button @click="back"><el-icon><Back /></el-icon>{{ $t('user.login.back') }}</el-button>
    </el-col>
    <el-col :span="13" :offset="5"> -- span，此单元格占比 13/24的宽度，offset，栅格左侧的间隔格数 5/24的宽度
        <el-button type="primary" @click="this.isShow = true">{{$t('user.login.tab-login-mobile')}}</el-button>
        <el-button type="info" @click="resetLoginForm">{{ $t('user.login.reset') }}</el-button>
    </el-col>
</el-row>

8. CSS->css 渲染顺序

image
使用!important可以修改优先级，且优先级最高

.outStyle {
width: 300px;
height: 200px;
background: orange !important;
}

9. VUE-> scoped

<style scoped> </style>

scoped 作用：为了避免外部引入的css样式 污染 到本地的css样式
使用后：

  1. 父子任意一方使用,其一方的样式都不会渗透到另一方。但，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
  2. import 引入的全局css 文件，不会影响不本地化css的样式。本地化的权重更高。
  3. sccoped 默认是局部的，且不会影响到插槽标签()的内容，但，我调整。

原理：

  • 将style表中渲染的标签都添加一个唯一标识（data-v-hash），以至于其他文件的css，由于没有找到对应的标签而无法进行渲染
    image

官网文档：https://cn.vuejs.org/api/sfc-css-features.html#scoped-css

Scoped 穿透： 通过穿透功能，可以修改深层的样式。比如，修改ElementUI的样式

参考文章：vue---style scoped属性的作用和原理、scoped穿透

10. VUE->插槽 solt

插槽作用：父组件去 定义 子组件显示的地方

单独插槽使用

image

循环插槽使用

image

11. CSS->HTML 单位

单位 说明
px 相对长度单位。像素px是相对于显示器屏幕分辨率。
em 根据其父元素的font-size来计算，默认1em=16px,特点是1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
rem 只是rem相对于根元素html。这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推。
vh 相对于视窗口的高度。1vh 等于1/100的视窗口高度。
vw 相对于视窗口的宽度。1vw 等于1/100的视窗口宽度。
vm 根据可视区宽度和高度最小的计算，1vm=1%可视区大小

12. CSS -> position

position有几种:

  1. static(默认属性)，当没有给元素设置position时默认为static
  2. absolute（绝对定位），相对于父级第一个设置了position属性进行定位（没有则相对于body，static除外），top，left，bottom，right均是相对于这个父元素的偏移量
  3. relative（相对定位），在元素原来的位置上进行定位，top，left，bottom，right的值相当于原来位置的偏移量
  4. fixed（固定定位），相对于浏览器视口的定位，不会随着滚动条的滚动而滚动，top，left，bottom，right的值相当于浏览器窗口的定位

relative 与 absolute区别

  • absolute和relative都会使元素脱离文档流，但不同的是，absolute脱离文档流后不会占用原来的位置，而relative会在原来的位置上留下一个副本占用原来文档流的位置
  • absolute的父元素设有position时，其top,left,bottom,right会忽略父级元素的padding值，即始终与父级元素的左上角进行定位，且其层级会始终比父级高，无论父级设置多大的z-index，但relative的定位会受父元素padding值影响
  • absolute是以第一个设置了position的父元素或祖先元素进行定位，而relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

注：absolute 的作用就是以 某个父元素或祖先元素进行定位。

13. CSS->CSS 选择器

image

√ CSS 选择器参考手册：https://www.w3school.com.cn/cssref/css_selectors.asp

14. VUE->Pinia 持久化插件（persist）

pinia-plugin-persist 服务于 pinia 功能，用于数据持久化。最初用于处理刷新后pinia数据重置的问题。
其中，enabled代表用不用，
而strategies不写的话，会将state中的所有值进行存储，存储方式为sessionStorage。
如果只是paths不写也是默认将所有state进行存储

strategies 字段说明

属性 描述
key 自定义存储的 key，默认是 store.$id
storage 可以指定任何 extends Storage 的实例，默认是 sessionStorage
paths state 中的字段名，按组打包储存。就是指定字段进行存储
persist的使用 
import { defineStore } from 'pinia'

export const useStore = defineStore('useInfo', {//需要注意的是，defineStore返回的是一个回调方法。useStore 是该状态管理的唯一标识
    // 存储状态
    state: () => {
        return {
            LoginInfo: {},
            collapseIcon: true,
            menuTabs: ['首页'],
            activeIndexTab: '首页'
        }
    },getters: {
    },actions: {
    },persist: {
        enabled: true,
        strategies: [{
            key: "collapseIcon",
            storage: sessionStorage,
            paths: ["collapseIcon"]
        }]
    }
})

测试结果图：
image

参考文档：https://www.jianshu.com/p/c2990fc831ca

原文链接：https://blog.csdn.net/weixin_45541388/article/details/125367823

什么是cookie

1、储存在用户本地终端上的数据，是网站为了识别用户和跟踪会话而存储在用户本地终端中的文本数据。
2、Cookie是保存在客户端的纯文本文件。比如txt文件。所谓的客户端就是我们自己的本地电脑。

什么是sessionstorage

1、sessionStorage用于本地存储一个会话(session)当中的数据。
2、这些数据只有在同一个会话当中的页面才可以访问，并且当会话结束之后数据也会跟着销毁。
3、sessionStorage在页面会话结束时会被清除，也就是讲一个页面上的sessionStorage在页面刷新或者恢复页面的时候都不会丢失或者被清空。

什么是 localstorage

1、localStorage用于持久化的本地存储。除非是你主动删除数据，否则的话，数据是永远也不会过期的。

Cookie 、Sessionstorage 、Localstorage三者的区别

  1. 存储空间：cookie存储空间最小只有4kb、但是http请求中可以携带cookie，loacalstorage、sessionstorage存储空间5m或更大
  2. 有效期：cookie不设置时间、关闭游览器销毁，sessionstorage关闭游览器（窗口或者标签页）销毁，loacalstorage不手动清除一直保留
  3. 作用域：sessionstorage不在不同游览器窗口（标签页）共享、即使同源，cookie、loacalstorage在所有同源窗口之间共享
  4. 其他：
    • sessionstorage属性允许你访问一个 session Storage 对象。它与 localStorage 相似。
    • 不同之处在于loacalstorage里面存储的数据没有过期时间设置，而存储在sessionstorage里面的数据在页面会话结束时会被清除。
    • sessionStorage在页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
    • 不同tab之间就算相同url，sessionstorage也是不会共享的。sessionstorage只存在于当前会话中。
    • 使用window.open或者点击链接跳转的页面，新页面的sessionstorage会拷贝老页面的。但两者之间并无关联，还是两个会话。

16. JS->=== 与 ==

对于string、number等基础类型来讲，和=有很大的区别：

  1. 不同类型：== 是比较转化为同一类型后的值，看是否相同。=== 如果类型不同，它的结果就是不等。
  2. 同类型比较：两者直接进行值比较，结果一样。

对于Array和Object等高级类型来讲，== 和 === 没有区别，同为“指针地址”比较。

17. CSS->Html隐藏多余的文字

在写table的td时，发现写入大量汉字后，单元格的高度变大了，自动换行且自适应高度。死丑~~

td {
    white-space: nowrap;
    word-break:keep-all;
    overflow:hidden;
    text-overflow:ellipsis;
｝

参考文章： https://blog.csdn.net/lm1259032699/article/details/80820165

18. CSS->padding 四方渲染顺序

padding的顺序是顺时针方向，上-->右-->下-->左

padding:10px;                   四个内边距都是10px
padding:5px 10px;   　          上下5px　左右10px
padding:5px 10px 15px;          上5px　右10px　下15px   左因为缺省与右相等，则为10px
padding:5px 10px 15px 20px;     上5px　右10px　下15px 　左20px

image

19. VUE->父子组件生命周期执行顺

vue中父子组件挂载执行顺序为：

//加载渲染过程
父组件 beforeCreate ： Vue实例完全被创建出来之前，会执行它，当beforeCreate，data和methods数据还未初始化
父组件 created ：实例创建之后调用，执行时挂载阶段还没有开始，模版还没有渲染成html，所以无法获取元素。created钩子函数主要用来初始化数据。
父组件 beforeMount ：实例对象挂载之前，模板已经在内存中编辑完成，但还没有渲染到页面
	子组件 beforeCreate
	子组件 created
	子组件 beforeMount
	子组件 mounted
父组件 mounted ：实例对象挂载之后，将内存中编译好的模板替换到浏览器页面中，用户可以看到渲染好的页面了，这时候，Vue组件已经创建完毕。钩子函数一般用来向后端发起请求，拿到数据后做一些业务处理。该函数在模版渲染完成后才被调用。DOM操作一般是在mounted钩子函数中进行。

//更新过程
父组件 beforeUpdate ：界面还没有被更新，但是数据更新了
	子组件 beforeUpdate
	子组件 updated
父组件 updated ：事件执行的时候，界面和data数据保持同步了（最新）

//销毁过程
父组件 beforeDestroy ：Vue实例已经从运行阶段进入到了销毁阶段，组件中的数据、方法仍然可用
	子组件 beforeDestroy
	子组件 destroyed
父组件 destroyed ：Vue实例完全被销毁了，组件中的数据、方法都不可用了

20. VUE->生命周期执行顺

很漂亮的一篇文章：Vue2.0 Vue生命周期 挂载的流程

  1. Vue的初始化阶段：

    1. beforeCreate（此时无法 通过vm访问到data数据、methods的方法。Vue实例对象根本还没收到，而且vm身上没有vm.n与add()方法，大多数属性值为null或者undefined）
    2. created（此时，有了add()方法,有了n,有了_data,并且n的get、set方法都出现了。可以通过vm访问到data的数据、methods的配置方法）此阶段会解析模板（1.有没有el配置项 2. 有没有template标签）,生成虚拟DOM(内存中),页面还不能显示解析好的内容

  2. Vue的实例挂载阶段：

    1. beforeMount（此时，页面呈现的是未经Vue编译的DOM结构，所有对真实DOM的操作,最终都不奏效。）此阶段会将内存中的虚拟DOM转为真实DOM插入页面
    2. mounted（此时，页面中呈现的是经过Vue编译的DOM,对DOM的操作均有效(尽可能避免)）至此初始化过程结束，一般在此进行:开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。

  3. Vue的数据更新阶段：

    1. beforeUpdate（此时的数据已经是最新数据，但是界面还是旧数据） 在两个钩子之间根据新数据生成新的虚拟DOM，与旧的虚拟DOM进行对比最终完成页面更新
    2. Update（数据更新完成，此时data数据和界面数据都是最新数据。并且完成页面的渲染）

  4. Vue的销毁阶段：

    1. beforeDestroy（销毁前收尾工作，取消订阅消息、关闭定时器、解绑自定义事件）
    2. destroyed（实例销毁完成，此时与视图已经解绑）

21. VUE->this.$nextTick的用法

测试代码 
<template>
    <!-- 滑动验证码 -->
    <div ref="dragDiv" class="drag" >
        <div class="drag_text" ref="worda">{{ confirmWords }}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                confirmWords: '拖动滑块验证', /* 滑块文字 */
            }
        },
        mounted() {
            this.confirmWords = '测试验证'
            // nextTick指定的结点会在Dom更新之后执行
            console.log('11', this.$refs.worda.innerText)

            this.$nextTick(function () {
                console.log('22', this.$refs.worda.innerText)
            })
            console.log('33', this.$refs.worda.innerText)
        }
    }
</script>

测试结果
image

简单说：this.$nextTick(function () {......｝内的代码会被稍后执行。
官方说辞：this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。（可以做到二次修改）官方说辞：this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。（可以做到二次修改）

简单描述原理：

  • 在dom更新，你修改了data的某一个值，并不会立即反应到该el中。vue将你对data的更改放到watcher的一个对列中（异步），只有在当前任务空闲时才会去执行watcher队列任务。这就有一个延迟时间了。
  • 当执行到nextTick的时候，这是一个异步事件，他也会把这个事件放到一个队列当中，异步事件是不会立即执行的代码，会被js处理器放到一个队列里，按照队列的顺序优先级等一个个按次序执行，新添加的事件都会放在队列末尾。所以，当第一个也就是data的修改执行渲染在页面之后，这个时候执行nextTick的时候，这是一个异步事件，他也会把这个事件放到一个队列当中，异步事件是不会立即执行的代码，会被js处理器放到一个队列里，按照队列的顺序优先级等一个个按次序执行，新添加的事件都会放在队列末尾。所以，当第一个也就是data的修改执行渲染在页面之后，这个时候执行nextTick的时候，这是一个异步事件，他也会把这个事件放到一个队列当中，异步事件是不会立即执行的代码，会被js处理器放到一个队列里，按照队列的顺序优先级等一个个按次序执行，新添加的事件都会放在队列末尾。所以，当第一个也就是data的修改执行渲染在页面之后，这个时候执行nextTick，就肯定能获取dom的东西了。
  • 同理也是，创建一个setTimeout，他也会放到队列中，当上一个事件执行完之后，才会这个他这个事件，才会执行他里面的回调，也就能成功获取啦。

22. VUE-> setup 语法糖

参考文章：Vue3.2单文件组件setup的语法糖总结

非常棒的文章，可以让小白知道怎么使用。♥ ♥

23. VUE-> Mixin

Mixin不是Vue专属的，是一种思想，意思是混到一起，在很多开发框架中都实现了Mixin(混入)，可以视为一个可重复使用的公共文件。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。

我们看一下mixin文件内容：

// 可以视为对象
//export const mixins = {
export default {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};

须知：

  1. 在引入Mixin文件后，生命周期会先走Mixin文件中对应的钩子，再走组件中对应的钩子。 实际在使用时，存在名称相同的情况，组件钩子内容会覆盖Mixin文件中的内容。
  2. 不同组件中的MiXin是相互独立的。不同组件在调用同一个MiXin文件，若存在修改动作，不会影响到其他组件的调用。
  3. 局部引入 与 全局引入效果相同。不过VUE官方不建议全局引入。

24. VUE-> process.env

process
process 是 nodejs 下的一个全局变量，它存储着 nodejs 中进程有关的信息。
process.env
env 是 environment 的简称，process.env 属性返回一个包含用户环境的对象。
console.log(process.env) 输出内容
image

dotenv
Dotenv 是一个零依赖的模块，它能将 .env 文件加载到 process.env 中，也就是加载到环境变量中。换句话说，自定义 process.env 内容。
一般VUE CLI脚手架中，默认都引入了Dotenv，可以在 package-lock.log中查看引入版本。

脚手架的script与process.env.NODE_ENV也有进行对应。

  • vue-cli service serve ，默认模式为 development 。可以自行创建 .env.development 文件后，手动修改该模式的 NODE_ENV。
  • vue-cli service build ，默认模式为 production 。可以自行创建 .env.production 文件后，手动修改该模式的 NODE_ENV。

使用参考文档：解析vue中的process.env

25. VUE -> SCSS

-- xxxx.module.scss 文件内容

// <style> 标签中实际引入这个
$menuBg:#304156;

// <sceipt> 标签中实际引入这个
// the :export -> js中引入 scss 文件需要使用
:export {
  menuBg: $menuBg;
}

CSS引入
image

JS引入
image

26. VUE -> computed 与 watch

computed 代码用例 
<body>
    <div id="app">
        姓： <input type="text" v-model=firstName> 名：
        <input type="text" v-model=lastName> 姓名：
        <span>{{fullname}}</span>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'z',
            lastName: 's'
        },
        computed: {
            fullname() {
                return this.firstName + this.lastName
            }
        }
    })
</script>

image

wath 代码用例 
<body>
    <div id="app">
        姓： <input type="text" v-model=firstName> 名：
        <input type="text" v-model=lastName> 姓名：
        <span>{{fullname}}</span>
    </div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            firstName: 'z',
            lastName: 's',
            fullname: 'zs'
        },
        watch: {
            firstName(newval) {
                this.fullname = newval + this.lastName
            },
            lastName(newval) {
                this.fullname = this.firstName + newval
            }
        }
    })
</script>

image

27. CSSS -> margin，background-color，background-image，padding，content，border

background-color：背景颜色
background-image：背景图片
padding：层的边框到层的内容之间的空白 
border：边框 
content：内容

image

27. VUE -> Route中path的关系

由 / 判断页面请求路径
image

26. VUE -> keep-alive

<keep-alive/>标签是 VUE内置标签，能够在组件切换过程中能将状态保存到内存中，防止重新渲染DOM

// 这样写防止页面在切换过程中重新加载页面
	<keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>

keep-alive有两个属性，include 与 exclude ，且 exclude 的优先级大于 include
image
Õ
我们熟知的router中也包含这个属性功能
调用方式： this.$route.meta.keep-alive = true
配置方式：

const routes = [
	{ /*首页 重定向*/
	path: '/',
	component: UserLayout,
	meta: {
	requiresAuth: false,// 是否需要权限认证才能登录
	keepAlive: true
	}
	}]

26. JS -> a 标签 herf

  1. <a href="javascript:;" οnclick="javascript:alert('链接不会跳转.');">提交</a>
    把 javascript:; 加在超级链接上可以防止链接跳转从而执行 onclick 方法，并且返回的也是空或者false。

  2. <a href="javascript:void(0)" οnclick="javascript:alert('链接不会跳转.');">一个没用的链接</a>
    void(0) 表述方法无方法。也是说，不走链接，不走方法，仅仅是保留样式。IE中使用存在bug。

  3. <a href="#" οnclick="javascript:alert('链接不会跳转.');">提交</a>
    会刷新页面，也会传递参数，不会跳转链接。
    会出现的问题：

    1. 滚动条自动上滚至页面顶部
    2. 页面路径中出现 # 号
      οnclick="javascript:方法;return false;"可解决上面问题。****

27. JS-> console

写法 输出结果
console.log('%c输出内容', 样式) %c 是动态调整的样式
console.log('输出内容%o', 对象) %o — 对象
console.log('输出字符串%s', 字符串) %s — 字符串
console.log('输出数字%d', 数字) %d — 数字
console.dir(obj) 将 obj 强制按照json方式输出，感觉还是用 console.log 方便
console.count() 显示console.count()执行的次数
console.assert(number/%2 === 0 ，{number：number，errorMsg: '断言失败'} ) 断言
console.trace() 打印此时的调用栈，在打印辅助调试信息时非常有用
console.time(this);二者之间是执行的代码；console.timeEnd(this)； 一对脚本，打印代码执行时间，性能优化和监控场景比较常见。this 是确定标识
console.clear( ) 清空控制台输出
posted @ 2023-02-07 11:21  之士咖啡  阅读(77)  评论(0)  编辑  收藏  举报