摘要：一、键盘修饰符 在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名： enter：回车键 tab：制表键 delete：含delete和
阅读全文
posted @ 2024-01-28 12:01
01 2024 档案
摘要：一、事件处理 如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中。 在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有： sto
阅读全文
posted @ 2024-01-28 12:00
摘要：一、v-on事件绑定 v-on指令用于绑定事件 v-on用法 转=>最底层的技术渣 -- Vue基础语法之v-on 转=>一瓶怡宝矿泉水 -- v-on指令 直接绑定事件： 注意： 绑定的事件是对应的方法不是定义在data里面，而是定义在vue实例的methods里 绑定的函数可直接绑定函数名——f
阅读全文
posted @ 2024-01-28 11:59
摘要：双向数据绑定 单向数据绑定是什么？ 数据模型（Module）和视图（View）之间的单向绑定。 需要我们先写好模板，然后把模板和数据（可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。 简单的来说就是DOM操作html元素。 单向数据绑定的缺点：一旦HTML代码生成好
阅读全文
posted @ 2024-01-28 11:57
摘要：一、数据响应式 如何理解响应式 html5中的响应式：屏幕尺寸的变化导致样式的变化 数据的响应式：数据的变化导致页面内容的变化 什么是数据绑定 数据绑定：将数据填充到标签中 v-once只编译一次 显示内容之后不再具有响应式功能 二、v-once指令 v-once 应用场景 如果显示的信息后续不需要
阅读全文
posted @ 2024-01-28 11:56
摘要：一、数据绑定指令 v-text 填充纯文本 相比插值表达式更加简洁 v-html 填充HTML片段 存在安全问题 本网站内部数据可以使用，来自第三方的数据不可以用 v-pre 填充原始信息 显示原始信息，跳过编译过程（分析编译过程） 二、v-text 填充纯文本 v-text用法 在需填充的标签中添
阅读全文
posted @ 2024-01-28 11:55
摘要：一、什么是指令 指令的本质就是自定义属性 指令的格式：以v-开始，比如：v-cloak 二、v-cloak指令用法 插值表达式存在的问题：“闪动” 如何解决该问题：使用v-cloak指令 解决该问题原理：先隐藏，替换好值后再显示最终的值 三、v-cloak指令的用法 提供样式 [v-cloak]{
阅读全文
posted @ 2024-01-28 11:51
摘要：核心实现类 Observer : 它的作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新 Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例（里面 subs 是 Watcher 实例数组）,当数据有变更时,会通过 dep.not
阅读全文
posted @ 2024-01-28 11:31
摘要：1、 es6 symbol ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。 let sy = Symbol("key1"); let syObject = {}; syObject[sy] = "kk"; console.log(syOb
阅读全文
posted @ 2024-01-28 11:27
摘要：1、 css水平、垂直居中 水平居中 1) 行内元素: text-align: center 2) 块级元素: margin: 0 auto 3) position:absolute +left:50%+ transform:translateX(-50%) 4) display:flex just
阅读全文
posted @ 2024-01-28 11:26
摘要：1、 js函数声明的两种方式 直接声明：函数可以在声明函数的作用域内任一地方调用。函数解析阶段赋值给标识符 f . function f (){ console.log(2); } 函数表达式：函数只能在声明之后调用。函数运行的阶段才赋值给变量 f 的。 var f = function() { c
阅读全文
posted @ 2024-01-28 11:25
摘要：1、 export和export default的区别 export default xxx import xxx from './' export xxx import {xxx} from './' 在一个文件或模块中，export、import可以有多个，export default仅有一个通
阅读全文
posted @ 2024-01-28 11:20
摘要：1、 性能优化 （1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。 （2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请
阅读全文
posted @ 2024-01-28 11:17
摘要：插槽使用场景 - 该组件被多个地方使用 - 每个父组件中对该组件的内部有一部分需要特殊定制 - slot可以让我们更好的复用组件的同时并对其定制化处理 - 可以理解为父组件想子组件传递了一段 html 文本 要求: 1.子组件模板包含至少一个 插槽 <slot></slot> 2.父组件整个内容片段
阅读全文
posted @ 2024-01-28 11:15
摘要：Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式。 什么时候使用Mixins 1. 页面的风格不用，但是执行的方法和需要的数据类似，我们是选择每个都写呢还是提取出公共部分呢？ 基础实例 我们有一对不同的组件，它们的作用是切换一个状态布尔值，一个模态框和一个提示框。这些提示框和模态框除
阅读全文
posted @ 2024-01-28 11:12
摘要：一、响应性原理 数据模型 是被代理的 JavaScript 对象。而当你修改它们时，视图会进行更新。这让状态管理非常简单直观。 理解其工作原理同样重要，这样可以避开一些常见的问题。 1 什么是响应性？ 响应性是 一种允许我们以声明式的方式去适应变化的一种编程范例。如excell。 js如何实现响应性
阅读全文
posted @ 2024-01-28 11:06
摘要：vm.$watch 观察vue实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。 //写法一： this.$watch('a.b.c', function (newVal, oldVal) {})//键路径vm.$wat
阅读全文
posted @ 2024-01-28 10:58
摘要：概述： lodash是一套JS工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数。 lodash的所有函数都不会在原有的数据上进行操作，而是复制出一个新的数据而不改变原有数据。类似immutable.js的理念去处理。 官方中文地址 安装： 浏览器环境： <script src="lo
阅读全文
posted @ 2024-01-28 10:55