vue

• • 补缺
  • • placeholder
    • 排序方法
    • • `sort()`
      • `filter()`
      • `indexOf()`
      • `map()`：
      • `reduce()`：
      • `forEach()`：
      • `slice()`：
      • `splice()`：
      • `unshift()`
      • 字符串转为数组
    • ``
    • todo 使用
  • 前端学习文档推荐
• Vue
• • Vue核心
  • • 初始vue
    • 模板语法
    • 数据绑定
    • el&&data两种写法
    • mvvm
    • 数据代理
    • • Object.defineproperty方法
      • vue代理
    • 绑定事件
    • • 事件修改符
      • • 常用的修饰符
      • 键盘事件
      • • 事件常用的别名
    • 计算属性
    • • 小案例
    • watch监视属性
    • • 小案例
      • 深度监视
      • computed&&watch区别
    • 绑定样式
    • • class样式&&style样式
    • 条件渲染
    • • v-show
      • v-if
    • 列表渲染
    • • key的原理
      • 列表过滤
      • 列表排序
      • vue数据更新的原理
    • 收集表单数据
    • • v-model修饰符
    • 过滤器
    • 自指定指令
    • • 局部指令
      • 全局指令
      • 配置对象常用三个参数
    • 生命周期
    • • 常用的生命周期钩子
  • 组件化编程
  • • 概述
    • • 模块
      • 组件
      • 模块化与组件化
    • 非单文件组件
    • • 创建组件
      • 注意点
      • 组件的嵌套
      • Vuecomponent
      • 一个内置的关系

补缺

placeholder

placeholder=“” 占位符

排序方法

在前端中，sort、filter 和 indexOf 是常用的数组方法。

sort()

方法用于对数组进行排序，默认情况下按照 Unicode 码点进行排序。可以传入一个比较函数用于自定义排序规则。例如：

javascript复制代码let arr = [2, 5, 3, 1, 4];
arr.sort((a, b) => a - b); // 正序排序
arr.sort((a, b) => b - a); // 倒序排序

filter()

方法用于创建一个新数组，其中包含通过指定函数测试的所有元素。例如：

javascript复制代码let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter((item) => item % 2 === 0); // 过滤出所有偶数

indexOf()

方法用于查找数组中指定元素的位置，如果找到了则返回该元素的索引，否则返回 -1。例如：

javascript复制代码let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3); // 返回 2

map()：

对数组中每个元素执行给定的函数，并返回一个新数组，其包含函数的返回值。

javascript复制代码let arr = [1, 2, 3];
let newArr = arr.map((item) => item * 2); // [2, 4, 6]

reduce()：

对数组中的所有元素执行给定的 reducer 函数，并将结果累积到一个单独的返回值中。

javascript复制代码let arr = [1, 2, 3];
let sum = arr.reduce((prev, curr) => prev + curr); // 6

forEach()：

对数组中的每个元素执行一次给定的函数。

javascript复制代码let arr = [1, 2, 3];
arr.forEach((item) => console.log(item));
// 输出：
// 1
// 2
// 3

slice()：

返回一个新数组，其中包含原始数组中指定开始索引到结束索引之间的元素。

javascript复制代码let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 3); // [2, 3]

splice()：

通过删除或替换现有元素或添加新元素来更改一个数组的内容。

javascript复制代码
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, 6, 7); // 删除索引为 1 和 2 的元素，插入 6 和 7
// arr 变为 [1, 6, 7, 4, 5]
`

unshift()

是一个数组方法，用于在数组开头插入一个或多个新元素，并且返回新的数组长度。unshift() 的语法是：

javascript复制代码array.unshift(element1, element2, ..., elementN)

其中 element1 到 elementN 是要插入到数组开头的元素，可以有多个参数，顺序从左至右插入。unshift() 方法会改变调用它的数组，而不是创建一个新的数组。

下面是一个示例代码：

javascript复制代码let arr = [1, 2, 3];
let len = arr.unshift(4, 5);console.log(arr); // [4, 5, 1, 2, 3]
console.log(len); // 5

以上代码中，将 4 和 5 插入到数组开头，得到新的数组 [4, 5, 1, 2, 3]，并将新的数组长度 5 赋值给变量 len。

需要注意的是，unshift() 方法不适用于字符串、类似数组（比如 arguments），或其他非数组对象。同时，unshift() 方法可能会导致性能问题，因为它会更改数组的索引，使它必须重新分配内存。因此，在大型数组上使用 unshift() 方法会比在末尾使用 push() 方法慢得多。

字符串转为数组

在前端中，可以使用split()方法将字符串转为数组，然后使用sort()方法对数组进行排序，最后使用join()方法将排序好的数组转为字符串。例如：

javascript复制代码let str = "cba";
let sortedStr = str.split("").sort().join(""); // "abc"

上面的代码中，首先使用split()方法将字符串转为数组，然后使用sort()方法对数组进行排序，最后使用join()方法将排序好的数组转为字符串。

需要注意的是，默认情况下，sort()方法会将每个字符按照 Unicode 码点进行排序。如果想要按照自定义规则进行排序，可以传入一个比较函数，例如：

javascript复制代码let str = "dcba";
let sortedStr = str.split("").sort((a, b) => {if (a < b) {return -1;} else if (a > b) {return 1;} else {return 0;}
}).join(""); // "abcd"

上面的代码中，传入了一个比较函数用于按照字母表顺序进行排序。

元素通常用于标识表单元素（比如输入框、单选框、复选框等）的名称。它有两个主要作用：

1. 为表单元素创建关联：将 元素的 for 属性设置为相关表单元素的 id 值，可以实现为该表单元素创建一个与其相关联的标签。用户点击 元素时，就会触发关联的表单元素。

   html复制代码"username">用户名：
   "text" id="username" name="username">
   

   在上面的例子中， 元素使用 for 属性关联了 id="username" 的输入框元素。当用户点击 “用户名：” 标签时，就会激活相关联的输入框。

2. 提高可访问性：使用 元素不仅使得表单更易于使用和阅读，而且还提高了Web网页的可访问性。使用 元素时，屏幕阅读器会自动读出表单项的描述信息，使得视觉或者身体上有障碍的用户也能够更好的访问表单。

todo 使用

前端学习文档推荐

Vue

Vue核心

初始vue

使用：

1. 创建vue实例对象 且要传入一个配置对象
2. row容器里面的代码依然符合html规范 只不过加入了一些vue语法
3. row容器里代码被称为【vue容器】
4. vue实例和容器是一一对应的
5. 真是开发环境中只有一个vue实例 会配合中间件一起使用
6. 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新;

模板语法

1. vm可以直接使用vue中的语法

vue模板中语法的两大类：

1. 插值语法：
   1. 功能 用于解析标签的内容
   2. 写入 {{xxx}} xxx式js表达式 且可以直接读取到data中的属性
2. 指令语法
   1. 功能 用于解析标签 {标签属性和 标签内容 绑定事件
   2. v-bind：herf=’xxx’ xxx也是js中的表达式 可以读取到data中所有属性的
   3. vue中有许多指令 v-bind只是其中的一个

​

数据绑定

1. Vue中有2种数据绑定的方式
   1. 单项绑定 v-bind
      1. 数据只能从data中流向页面
   2. 双向绑定 v-model
      1. 数据不仅可以从流向页面 还可以从页面中流向data
      2. 双向绑定一般用表单元素中 input select等
      3. v-mdel：value 可以简写成v-mdel 默认数据就是value值
2. 

el&&data两种写法

1. el有2种写法
   1. ​ (1).new Vue时候配置el属性。
   2. (2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。
2. data有2种写法
   1. 对象式
   2. 函数式
   3. vue管理的函数不要写箭头函数 写了箭头函数this就不再是vue实例了
3. 

mvvm

1. mvvm模型

   1. m ：模型（mo del ）data中的数据
   2. v：视图 （view） 模板代码
   3. vm：视图模型（viewmodel） vue实例

2. 注意点

   1. data中所有的属性 最后都会到vm身上
   2. vm身上去的属性饥vue原形的属性 vue模板的都可以直接使用

3. 你好 {{name}}
   2 {{a+a}}
   2 {{$listeners}}
   2 {{$slots}}
   

数据代理

Object.defineproperty方法

Object.defineProperty是JavaScript中的一个方法，用于定义新属性或修改已有属性的特性（attributes）。该方法接受三个参数：

1. obj：要在其上定义或修改属性的对象。
2. prop：要定义或修改的属性名称。
3. descriptor：要定义或修改的属性的特性描述符。

其中，descriptor是一个对象，用于描述属性的特性。它可以包含以下属性（部分属性仅在数据属性或访问器属性中有效）：

• value：属性的值（仅在数据属性中有效）。
• writable：是否可写（仅在数据属性中有效，默认为false）。
• enumerable：是否可枚举（默认为false）。
• configurable：是否可配置，即是否可使用 delete 删除该属性、改变属性特性或将该属性修改为访问器属性（默认为false）。
• get：获取函数，用于读取属性值（仅在访问器属性中有效）。
• set：设置函数，用于设置属性值（仅在访问器属性中有效）。

vue代理

1. vue中的数据代理
   1. 通过vm对象来代理data对象的属性操作读写
2. vue中数据代理好处
   1. 会更加方便操作data的数据
3. 基本原理
   1. 通过object.defineproperty()把data对象添加到vm上 为每一个添加vm是上的属性 都直接一个getter/setter 在getter/setter 内部操作 杜读写data对应的数据
4. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-otuAmtrt-1683123631996)(assets/image-20230411220441273.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z969V7lG-1683123631996)(assets/代理.png)]

绑定事件

绑定事件使用methods方法在里面输入你绑定事件的函数

1. 使用v-on：click或者@click绑定事件
2. 事件需要配置在methods里面
3. mothods不能使用箭头函数 否则this就不是vm里面的this
4. mothods中的函数都是被vue所管理的函数 this指向的是vm和组件的实例对象
5. @click=‘demo’ @click='demo($event,66) 效果一致但是后面的可以传参

点我提示信息2

事件修改符

修饰符可以连写 如：@click.prevent.stop=‘info’ 即组织了冒泡 又组织了默认行为

常用的修饰符

1. prevent 阻止默认事件
2. stop 阻止冒泡
3. once 事件只能触发一次
4. cupture 使用事件的捕获模式
5. self 只有使用event.target才会触发
6. passsive 事件默认行为立即开始 无需等待事件回调结束

键盘事件

事件常用的别名

1. 使用键盘的事件的两种方法 keydown keyup
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3. 系统修饰键（用法特殊）
   1. ctrl、alt、shift、meta 都是特殊的
   2. 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
   3. 配合keydown使用：正常触发事件。
   4. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

$$回车：enter删掉：delete退出esc空格space特殊的：tab必须使用keydown上：up下down左：left右：right$$

计算属性

使用computed计算属性

定义的属性不存在，要通过已有的计算属性来

原理：借用了object.definproperty方法 提供的getter和setter

get什么时候执行函执行：

1. 初次读取的时候会执行一次
2. 当依赖的数据发生改变会再次调用

优势：与methods实现相比时 内存有缓存机制 效率更高 调用方便

计算属性最终会出现vm身上，直接读取即可

计算属性要被修改 必须要使用setter函数去响应 却set中要引起计算时以来的数据发生改变

小案例

watch监视属性

使用watch监视：

1. 当监视属性发生变化时，回调函数自动调用 进行相关操作

2. 监视的属性必须存在，才能进行监视

3. 监视属性的两种写法

   1. new Vue的时传入watch配置
   2. 通过vm $watch监视

4. 监视属性的配置

   1. handler 当监视属性发生变化的时候 才会调用

      1. handler(newv,oldv) //handler里面右两个参数 新的值 旧的值

   2. inmediate:true 初始化的时候会调用

   3. 可以直接配置

      watch：{
      info（newval,oldval）{
      }
      }
      

小案例

深度监视

1. ​ vue中的wacth默认不监视内部值得改变 （一层）
2. 配置deep ：true 可以监视对象内部得值改变（多层）
3. 注意点：
   1. vue自身可以监视对象内部得值改变 但vue提高的watch默认不可以
   2. 使用watch时可以更具的具体结构 决定是否采用深度监视

computed&&watch区别

1. couputer能完成的功能 watch都能完成
2. wathc 能完成的功能 couputer不一定能实现 类似watch中的可以进行异步操作
3. 注意点：
   1. 所有被vue管理的额函数 做好写成普通函数 这样this的指向才会时vm或者组件实例对象
   2. 所有不被vue管理的函数 （定时器的回调画数、ajax的回调国数等、Fromise的回调函数）最写成箭头函数 这样this的指向才会使vm或者实例对象

绑定样式

class样式&&style样式

class样式：

1. 写法：class=‘xxx’ xxx可以是字符串 数组 对象
2. 字符串写法适用于 类名不确定 许多要动态获取
3. 对象写法适用于绑定多个样式 个数不确定 名字不确定
4. 数组适用于 要绑定多个样式 个数不确定 名字不确定 但不确定用不用

style样式

1. style[fontSize：xxx] xxx时动态值
2. style[a，b] a b 是样式对象

条件渲染

v-show

1. 写法 v-show=‘表达式’
2. 适用于条件频率较高的场景
3. show隐藏页面上不能看见结构 dom元素为被移除 z

v-if

1. 写法 v-if=‘表达式’

2. 写法 v-else-if=‘表达式’

3. 写法 v-else=‘表达式’

4. v-if template

5. 适用于条件频率较底的场景

6. 不展示dom元素直接被移除

7. 注意点：v-else-if v-if一起使用 但是要求结构不能被打断 中间不能出现与if无关的

列表渲染

v-for指令：

1. 用于展示列表数据
2. 语法：v-for（item，index） in xxx ：‘key’
3. 遍历数组: v-for / index 遍历对象: v-for / key
4. 可遍历数组 对象 字符串 指定次数
   

key的原理

面试题: react、wua申的key有什么作用? (key的内部原理)

1. 虚拟DW中key的作用
   1. key是虚拟dom对象的标识 但数据发生变化时 vue会根据新数据生成新的虚拟得dom
   2. 随后vue进行 新的dom与虚拟dom的差异进行比较
2. 比较规则
   1. 就虚拟的dom找到了新虚拟dom相同dekey
      1. 若虚拟的dom内容没有变化 直接使用之前正实的dom
      2. 若虚拟dom发生了变化 则会生成真实的dom 替换页面之前生成的真实dom
   2. 旧虚拟dom未找到与新虚拟dom相同的key
      1. 创建新的真实的dom 随后渲染到页面中
3. 用index作为key可能会引发的问题
   1. 若数据进行逆序添加 逆序删掉等破坏顺序的操作
      1. 会产生没有必要真实dom的更新 页面效果没有问题 但是效率底
   2. 如果结构中还包含了输入类的dom
      1. 会产生错误dom的更新 页面有问题
4. 开发中如何使用key
   1. 最好使用每条数据的唯一属性 身份证号 手机号 学号等
   2. 如果不存在对象数据的逆序添加 删掉等破坏顺序的操作 仅用于渲染看列表展示 使用index实没有问题的

列表过滤

列表排序

vue数据更新的原理

1. vue会监视data所有层次的数据

2. 如何检测对象的数据

   1. 通过setter实现监视 且要在new vue 时要传入要检测的数据

   2. 对象中后追加得属性和 vue默认不做响应式处理

   3. 如果要给后添加的数据添加响应式的 使用下面的api

      1. vue set（traget，propertyName/index，value）
      2. vm .$set(traget，propertyName/index，value)

   4. Vue.set(this.student,'sex','男')
      this.$set(this.student,'sex','男')					
      

3. 如何监测数组中的数据

   1. 通过包裹更新元素怒的方法实现 本质就是做了两件事
      1. 调用原生对应的方法对数组进行更新
      2. 重新解析模板 进行页面更新

4. 在vue修改数组中的某一个元素与一定要使用下的方法

   1. 使用这几个api：push pop unshift splice sort revers
   2. vue.set vm.$set
   3. 注意点： vue.set vm.$set 不能给vm，vm的根对象添加属性 $$data$

收集表单数据

1. ​ 若

2. 若

   1. 女
      
      

3. 若

   1. 没有配置input 中的value属性 则收集的就是checked 是布尔值

   2. 配置input 的value属性

      1. v-model初始值是非数组 那么收集的就是checked 是否为布尔值

      2. v-model初始值是数组 那么收集的就是value组成的数组

      3. 打游戏
         
         

v-model修饰符

1. lazy 失去焦点在收集数据
2. number 输入的字符串转化成有效数字
3. trim 输入首尾空格过滤

过滤器

对要显示的数据讲行特定格式化后再品示 (话用干一些简单逻辑的外理

1. 注册过滤器： vue.firter（name,callback)或者new Vue{friters:{}}
2. 使用过滤器 {{xxx|过滤器名字}} 或者 v-bind:属性=’xxx‘ |过滤器名
3. 注意点：
   1. 过滤器可以接收额外参数 可以串联多个过滤器

自指定指令

v-big就是自定义指令 big也行

局部指令

new vue ({directives:{

指令命：{配置对象} 或者 directives {指令名：回调函数}

}})

全局指令

vue.directive（指令名.配置对象）或者 vue.directive{指令命 ：回调函数}

配置对象常用三个参数

1. bind：绑定元素成功是调用
2. inserted：指令所在元素插入页面时调用
3. updata：指令所在结构模板重新解析调用
4. 注意点：
   1. 指令定义时不加 v- 但是使用加上v-
   2. 指令名如果有多个回调单词，要使用key-case命名 不能用 keycass

生命周期

1. mounted挂载
2. 生命周期 ===生命周期回到函数 生命周期函数 生命周期钩子
3. 是什么：vue在关键时刻帮我们调用的一些特殊的名称函数
4. 生命周期函数所在的名称不能更改 但是函数内容具体可以需要要编写
5. 生命周期函数中this指向时vm胡总和组件实例对象

示例图

常用的生命周期钩子

1. mounted：发送ajax请求 启动定时器 绑定自定义事件
2. beforDestroy ：清除定时器 解绑自定义事件 取消订阅信息等

销毁vue实例

1. 销毁后借助vue开发者看不到信息

2. 销毁后自定义事件会失效 但原生dom还是有用

3. 一般不会再beforDestroy 操作数据 因为操作数据 也不会触发会更新流程

组件化编程

概述

传统编写应用的方式：

组件化编程

模块

1. 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
2. 为什么：js 文件很多很复杂
3. 作用：复用 js，简化 js 的编写，提高 js 运行效率

组件

1. 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件
2. 为什么：js 文件很多很复杂
3. 作用：复用 js，简化 js 的编写，提高 js 运行效率

模块化与组件化

​ 当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用；当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

非单文件组件

创建组件

Vue中创建组件有三大步骤

1. 创建一个组件

2. 注册组件

3. 使用组件（写组件标签）

4. 如何创建一个组件

   1. 使用vue.extend创建组件 其中options与new Vue(options)时传入时options几乎一样 但是也有区别
      1. el ：‘xxx’ 不能写 最终所有的组件都要经过vm的管理 由vm的el决定那个容器
      2. data必选要写成函数 ------ 避免组件倍复用时 数据存在引用的关系
      3. 使用templace可以配置组件结构
   2. 如何组件组件
      1. 局部注册 靠new Vue时传入components选项
      2. 全剧注册 靠Vue.component(‘组件名’,组件)
   3. 编写组件标签
   4. 

注意点

1. 关于组件名
   1. 一个单词的写法
      1. 第一钟写法 首字母小写 school
      2. 第二钟写法 首字母大写 School
   2. 多个单词组成
      1. 第一种写法 (key-case) my-school
      2. 第二种写法 (KeyCase) MyCchool $需要vue脚手架支持$
   3. 组件化命名尽量回避使用html中原有的标签 h1 H1都不行
   4. 可以使用使用name配置指定组件载开发者工具呈现的名字
2. 关于组件标签
   1. 第一种写法
   2. 第二种写法 定有多个school后面只会渲染一个
3. 简写方式
   1. const school = Vue.extend(options) 可简写为：const school = options

组件的嵌套

Vuecomponent

1. school 组件本质为vuecomponent的构造函数 且便是程序员自己定义的

2. 我们只需要写 && vue会帮我们解析school的实例对象 即new vuecomponent(options)

3. 我们每一次调用vue.extend 解析时返回的都是一个新的vuecomponent

4. this的指向

   1. 组件配置中

      1. data函数 methods中的函数 wathc computed 函数 他们的this均是[vuecomponent实例对象]

   2. new vue(options)配置中

      1. data methods wathc computed函数 他的this指向都是vue的实例对象

   3. vuecomponent的实例对象 简称vc 也称之为实例对象

   4. vm与vc不同 vc不能指定el 必须data函数

一个内置的关系

1.一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype

​ 2.为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！