白桃味稠鱼烧-CSDN博客

原创 ref属性

可以看到，在refs 中存在三个属性，分别是我们在DOM 节点上定义的三个 ref，且这三个ref 对应的就是我们需要的 DOM节点，以及组件实例对象。至于为什么组件上添加 ref 属性之后，获取的是组件实例对象而不是单纯的 DOM 节点，这是因为我们在后续的开发过程中，可能会用到组件实例对象中的某些属性，方法，或其他的数据，这就是ref 的优势所在。diiv 和 button 两个DOM 元素展示都是正常的，但是 School 组件可以看到，展示的是 School 组件内部的元素结构，

2023-11-16 11:24:01 262

原创 main.js 中的 render函数

至于为啥脚手架会引入一个运行时的 Vue 而不是使用一个完整版的Vue，这是因为，当我们开发完毕之后，通过webpack打包之后，生成的都是可以直接让浏览器识别的 html、js、css文件，不需要模板编译器这玩意，在打包的时候也可以节省一点 Vue 包的体积。说成大白话就是，我们现在使用的 Vue 是阉割版的，不包含模板编译器，这是因为 vue-cli 在搭建项目的时候，用的就是不带编译模板的Vue.js。在同一个目录下，找到 Vue.js 这个就是最完整的 Vue，包含了Vue 的所有功能。

2023-11-16 09:50:44 783

原创 Vue 插槽 slot

template> 标签中通过 v-slot='slotProps' 接收了这个 slotProps，这个名字是随便定义的，对应的就是组件中中绑定的 games 数据。在 App 组件中报了这个错，games 不存在，肯定不存在啊，我的 games 数据是存在组件中的啊，在组件中随便你怎么使用都没毛病。那么这个默认插槽在被使用时，v-slot 指令，可以直接作用在组件标签上，可以简写为。

2023-08-09 14:33:39 540 2

原创关键字 new 创建对象的内部步骤

工厂模式创建对象function creatPerson(name, age, job) { let obj = new Object(); obj.name = name; obj.age = age; obj.job = job; obj.sayName = function () { alert(this.name); }; return obj;}let person1 = creatPerson('al',26,'Doctor')let per.

2023-08-04 17:44:17 213

原创 Vue 全局事件总线 Event-Bus

3、在 Vue 原型对象，以及组件实例对象上都是不存在这个东西的，但是我们又需要使用 Vue 实例对象上的 $on、$emit、$off 等方法，所以这玩意应该继承了 Vue 原型对象，或者组件实例对象。两个兄弟组件之间没有任何关联，但是现在需要 School 子组件获取到 Student 子组件传递的数据，这个时候，我们的事件总线就起到作用了。相当于是独立于所有组件之外的旁观者，不参与组件内的任何逻辑，只负责调用 Vue 实例对象上的方法，且所有组件都能访问到它。定义 Student 子组件。

2023-08-03 17:28:22 710

原创 Vue 自定义事件绑定与解绑

8 、注意：通过 this.$refs.xxx.$on( 'xxx' , callback )，绑定自定义事件时，callback 回调要么配置在 mtenods 中，要么使用箭头函数，否则 this 指向存在问题( 因为 callback 函数接收的参数都是从子组件中传递的，包括 this也是，如果使用 function () {} 函数，则该函数内部 this 指向子组件 )该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

2023-08-02 15:59:56 946

原创 Vue事件

Vue事件处理在jq中的事件处理，我们都很熟悉了，模式类似于下面这样，通过DOM节点，执行click事件$("button").click(function () { $("p").hide();});但是在Vue中，我们触发事件，并不是这样的。首先，绑定方式不一样，在Vue中绑定事件使用的是 v-on：，当然肯定也是存在简写的，那就是 @ ，例如：绑定按钮事件<button v-on:click='showInfo'>点击打印信息</button&...

2023-07-28 11:28:35 80

原创 Vue style中的 scoped 属性

用来隔离样式 -- Scoped CSS一个是在编译之后，直接在 DOM 节点上给类名增加一个hash后缀，不会在节点上增加自定义属性用来隔离样式，且DOM节点与样式文件展示类名一致 -- CSS Modules。这样一对比，发现 CSS Modules 是更好用一点哈。所以在。

2023-07-26 16:54:44 2962

原创 Vue mixin 混入

创建一个 mixin 混入对象是很简单的，只是我们需要注意的是，配置的键值对，只能是创建组件时传入的配置项，如果，你传了一个其他不存在的属性，组件接收之后，是不会对其解析的，就相当于你在组件内部，定义了一个不存在属性，Vue 底层是不会管这个玩意的。这就看出来很多余了。其次、我们创建的 mixin 对象，在组件中引用的时候，mixin 对象中的键值对会混入该组件的配置详项中，至于是怎么混入的，下面在讲。创建了一个 mixin 对象之后，组件需要使用的时候，就和引入公共组件和公共方法一样。

2023-07-25 16:16:26 344

原创 new Vue () 中的 render 函数与 templete 模板

如果我们引入了完整版的 vue.js ，那么在我们webpack 打包编译的时候，生成的包就会变大，就会增加浏览器的加载时间。文档上说的是，可以是 HTML 标签名称，可以是组件，那也就是说，我的 App 组件，直接放进去当做参数，有问题没，那必须是没问题的啊。在官网上存在这么一个例子，说的比较清楚，按照之前的理解，我使用 templete 模板是没有问题的，但是因为脚手架生成的项目，引入的 Vue 文件，是不带 templete 模板编译器的运行时文件，所以导致出现了这个问题。

2023-07-21 14:34:52 1232

原创 Vue与VueComponent的内置关系

构造函数 VueComponent 的原型对象也是一个对象，也存在 __proto__ 属性，按理来说是 VueComponent .prototype.__proto__ 指向的同样是是 Object。6、通过注册组件之后应用，Vue 自动帮我们使用 New VueComponent() 生成了一个实例对象，这里叫他vc，以便于后续操作。这里只需要理解一个点，那就是构造函数的prototype 属性(显式原型属性) === 实例对象的 __proto__属性(隐式原型属性)，注意，

2022-12-28 18:29:29 381 1

原创 Vue-extend和VueComponent

在一个非单文件组件中(一个文件中包含n个组件，最常见的就是单个html文件中存在多个组件)，如果我们需要在这个文件中创建n个组件，然后再页面上展示，这时候我们就需要先定义组件，然后注册组件，最后使用组件。原则上，默认一个非单文件组件中只存在一个 new Vue() 定义的根组件，可以有无数个 Vue.extend() 定义的子组件，这是因为，如果所有组件都用 new Vue() 定义，那么如果存在组件包裹的情况，子组件内部双向绑定的数据不会生效。，因为是通过函数返回的。.........

2022-08-10 20:53:35 1889

原创 Vue2-生命周期

之前说完了Vue的基础知识，说了语法、数据代理、数据监听、计算属性、指令、过滤器等等，但是没有涉及到Vue的声明周期，其实之所以把生命周期放在后面讲，是因为，如果最开始讲生命周期，里面涉及到的概念性东西比较多，初学者不容易理解，只能死记硬背。但是在理解了前面的这些基础知识之后，回过头来理解生命周期，就会很方便了。这就是 Vue 官网上的生命周期图，在这里对每个生命周期以及每个模块都标注了tips，可以根据这些图例来辅助理解Vue的生命周期。源起 new Vue()当我们通过 new V

2022-06-23 14:37:51 9144 1

原创 Vue-自定义指令

上面说完了 Vue 的内置指令，了解了这些内置指令的使用及原理，接下来我们来说说 Vue 的自定义指令。自定义指令定义v-show ：Vue 的内置指令，通过这个指令能展示和隐藏节点，其实也就是Vue底层控制了该节点的 display 属性。自定义指令：在构建项目过程中，虽然我们都是使用的组件形式，但是在某些情况下，我们仍然需要对普通DOM元素进行底层操作，这个时候就会用到自定义指令。自定义指令既可以像 v-show 一样，不搭配属性值，也可以像 v-text配置属性值来实现特殊效果

2022-01-24 16:44:51 6356

原创 Vue-内置指令

之前用到过的 v-bind、v-model等等都是属于Vue 的内置指令，是Vue给我们定义好的，我们可以直接使用，接下来我们来说一说之前没有用到过的其他的内置指令v-text指令：向所在节点中渲染文本内容初始化一个 Vue ，在data内部添加 name 属性，分别通过插值语法、v-text 指令来绑定到不同的标签上进行展示<div id='root'> <div>你好，{{name}}</div> <div v-text='name'

2022-01-18 18:08:02 518

原创 Vue-过滤器

数组过滤( filter )我们都不陌生，就是对数组的每一项做一些处理之后，返回一个新的数组。那么Vue的过滤器又是个啥玩意呢？我们现在有一个需求，就是将当前时间戳转为为正常时间展示出来，我们可以有很多种方法来实现首先，引入 dayjs，这是一个类似于Moment.js de 处理时间和日期的 js库，但是更为轻量。computed实现<body> <div id='root'>  <h2&g.

2022-01-17 15:21:21 435

原创 Vue-数据监听-数组监听

说完了对象的监听和后期添加对象的操作，接下来，我们来说一说针对于数组的监听。1、首先还是定义一组数据用于展示，hobbys 为字符串数组，friends 为对象数组const vm = new Vue({ el: '#root', data() { return { hobbys: ['抽烟', '喝酒', '烫头'], firends: [ { name: 'al', age: 20 }, { name: 'hj', age

2022-01-12 17:42:55 16031

原创 Vue-Vue.set() 的原理及使用

上面刚刚讲完 Vue 监听对象的改变，接下来本应该说说数组的监听过程，但是在这里需要插播一节 Vue.set() ，这是因为 Vue.set() 与对象的连接较为紧密，所以串联在一起方便理解。1、首先，定义一批数据用来渲染到页面上展示<body> <div id="root"> <h2>姓名：{{student.name}}</h2> <h2>年龄：真实{{student.age.realAge}} 虚拟{{stude

2022-01-11 20:01:55 18058 7

原创 Vue-数据监听-对象监听

之前说到了Object.defineProperty() 用来监听 data 的数据改变，从而实现响应式，但是在回顾definePropety方法博客中，出现了一个问题，那就是我在改变数据，调用 set() 函数的时候，出现了堆栈溢出的问题，这是因为出现了递归的情况。在这里我们就来看看Vue是怎么解决这个问题的。首先，我们来实现一个简单的数据监听效果，以此来深入理解一下，Vue的数据监听是怎么做到的。1、新建一个html文件，不需要引入Vue ，然后定义一个对象<script&...

2022-01-11 10:08:58 3292 1

原创 Vue-v-for列表渲染中的key

在上一章讲到 v-for 列表渲染的博文中，只是说到了 v-for 的基本使用，并没有对其内部进行更深层次的解读，其实在 v-for 这个指令下，有一个及其关键的连带属性 key。这个 key 才是 Vue 或者是是 MVVM 框架的最精髓的东西。key的使用方式：以数组为例<ul> <li v-for='(person,index) of personArr' :key='index'> {{person.name}} </li&gt...

2021-12-06 16:27:31 984

原创 Vue-v-for列表渲染

列表渲染这个东西，在远古时期( 或者说是在没有这种Vue、React等这种便捷工具时期 )，我们的渲染都是手工写出来的。例如以前的使用 jq 写列表页的时候，我们都是先写出静态页面，然后根据返回的数组数据，通过forEach 循环，然后 append 到父节点内部，从而完成展示。但是这样的缺陷其实很大，因为如果数据很多的话，一旦返回的数组数据中，有某一条数据发生了，会导致所有的数据全部重写渲染一遍，造成了极大的性能开销。但是在新的 Vue 工具中，为我们提供了简单方便的渲染方法：v-for

2021-11-26 15:29:20 1908

原创 Vue-条件渲染if与show的区别

v-show：当绑定的值( 或表达式的值 ) 为 true 时，在页面上展示当绑定的值、绑定的表达式分别为 true 和 false 时<div id="root"> <div id="root"> <h3 v-show="true">{{name}}</h3> <h3 v-show="1 === 1">{{name}}</h3> <h3 v-show="false">{{name}}&l..

2021-11-24 16:34:42 1195

原创 vue-绑定class样式

css样式<style> .basic { padding: 20px; background: #ddd; } .red { border: 1px solid red; } .radius { border-radius: 5px; }</style>绑定单个的class类名绑定单个class类名，且能动态切换<!-- 绑定class样式--字符串写法，适用于：样式类名不确定，需要动态..

2021-11-22 17:41:56 525

原创 Vue-watch与computed对比

以姓名案例为版本，使用 watch 实现<div id="root"> <div>姓：<input type="text" v-model='firstName'></div> <div>名：<input type="text" v-model='lastName'></div> <div>全名：{{fullName}}</div></div><script&

2021-11-08 17:07:28 200

原创 Vue-watch-deep 深度监听

首先明确一个概念，Vue 是可以监听到多层级数据改变的，且可以在页面上做出对应展示。但是 Vue 提供的 watch 方法，默认是不提供深度监听的( deep 默认为 false，也就是不开启深度监听)举例这是例子的html 片段：点击对应按钮之后，a 或 b 分别自增1<div id="root"> {{numbers.a}} <button @click='numbers.a++'>a++</button> <br>&lt

2021-11-04 17:54:28 36250

原创 Vue-watch 侦听器

定义在官方文档里面是这么定义的就是说当属性变化的时候，我们能通过 watch 来监听到属性的变化，从而来执行异步操作或者是耗费性能的操作常见使用1、首先，侦听器也是一个配置对象，可以监听多个属性的改变。2、键就是需要监听的属性，值也同时是一个对象，既可以是data中的属性，也可以是计算属性。3、对象内部存在几个常用的属性和方法( handler () {} 、deep、immediate)4、handler () {} ：就是监听函数，能接收两个参数，一个是 newV...

2021-11-01 20:51:31 578

原创 vue-computed计算属性

什么是计算属性在 Vue中是这样定义计算属性的：简而言之就是，如果我们有比较复杂的逻辑，我们都可以使用计算属性来实现ps：这里用的是可以，而不是必须，需要注意computed的正确使用在上面的例子中我们可能看的不是很明显，所以新建了一个例子<div id="root"><div>姓：<input type="text" v-model='firstName'></div><div>姓：<inp...

2021-10-31 16:35:22 1350

原创 Vue中的数据代理

何为数据代理数据代理：通过一个对象去代理对另外一个对象中属性的操作(读/写)<script> // 最基本最简单的数据代理 // 有两个对象分别是obj1{ x: 100 } 和obj2{ y: 200 } ， // 我想通过obj2访问 obj1的 x 属性，且还能通过 obj2 去修改 obj1的x属性 let obj1 = { x: 100 } let obj2 = { y: 200 } Object.defineProperty(obj2, '..

2021-10-08 11:33:58 546

原创回顾definePropety方法

definePropety顾名思义，这个方法就是给对象添加属性的方法，属于es6的知识点。默认情况下，使用Object.defineProperty()添加的属性值是不可修改（immutable）的。这个方法传递三个参数，分别是给哪个对象添加哪个属性，且这个属性需要做什么配置。配置项存在四个属性，分别是 value，enumerable，writable，configurablevalue：该属性对应的值。可以是任何有效的 JavaScript 值（数...

2021-10-05 20:18:30 832

原创 el与data的两种写法

Vue实例使用一个变量来接收由 Vue() z这个构造函数生成的 Vue实例对象，我们看看实例对象上有什么const vm = new Vue({ el: '#root', // 用于指定当前Vue实例为那个容器服务，通常为css选择器,也可以使用class data: { // 用于存储数据，供el所指定的容器去使用值，我们先写成一个对象 value: '1234', }})console.log(vm, 'vm')从上图可以看出，我将其中的属性分为了..

2021-10-04 17:17:38 461

原创 Vue数据绑定

单向绑定模式 v-bind：之前说的指令语法只是说了一个 v-bind：及其简写模式：，但是 v-bind：是一个单向绑定模式，只能将data中的数据解析到页面上，但是在页面上做的更改不会同步更新data中的数据<div id="root"> <h1>数据绑定</h1> <div> <span>单项数据绑定：</span> <input type="text" v-bind:value='value'&...

2021-10-04 14:51:53 468

原创 Vue指令语法

除了插值语法(解析标签体的内容)之外，还有指令语法(解析标签：包括标签属性，标签体内容，绑定事件等等)，这两者一起构成了Vue的模板语法指令语法标签中的属性，我们一般使用的都是指令语法进行数据绑定，例如a标签中的 href 属性包括其他的自定义标签属性写在标签中写死的href属性<h1>指令语法</h1><a href="https://www.baidu.com/">跳转到百度1</a>通过插值语...

2021-10-01 18:22:05 244

原创搭建开发环境

搭建开发环境可以分为两种：第一种是项目非常简单，可能简单到只有一两个页面就可以搞定，这时候我们就直接新建一个html页面进行开发就行第二种则是项目较为复杂，这时候，我们就需要使用cli脚手架生成项目，因为脚手架以及帮我们配置了很多东西，我们只需要改动一点，然后更多的可以专注于开发单HTML页面项目：1、直接新建html文件，然后根据文档说明，引入vue.js文件，此时引入的vue.js文件存在两种模式，所以我们在开发的时候，一般使用的都是开发版本，此时可以...

2021-10-01 15:50:37 241

原创 Vue插值语法

Vue的插值语法：{{}}chacao中需要写 js 表达式，且能够自动读取到data中定义的属性<div id="root"> <h1>hello,{{name}}</h1> <h1>我的年龄是,{{age}}</h1> <h1>1+1的和,{{1+1}}</h1> <h1>当前时间：{{ new Date().getTime()}}&lt..

2021-09-30 15:31:07 1698

原创模板与实例的关系

首先确定一个问题：实例与模板只能一一对应，不存在一对多的关系一个容器对应多个实例一个容器只能对应一个实例，若是多个实例接管了同一个容器，只有第一个实例中的数据渲染，且容器中用到的其他实例中的数据不会展示，控制台也会输出错误<div id="root"> <h1>hello,{{name}}</h1> <h1>我的年龄是,{{age}}</h1></div>&l..

2021-09-29 18:07:34 206

原创初识Vue

上一节搭建了vue的简单项目的开发环境，这一节来说说Vue的基本使用初识Vue：想让程序运行，必须要创建一个Vue实例，且传入配置对象（el） root容器（命名可以更改，class也行）中的代码符合html规范，只是混入了Vue语法 root容器中的代码被称为【Vue模板】1、创建容器这是一个容器，通过id区分，里面的al和22分别是姓名和年龄数据，这样看来其实就这样就行了，但是如果数据发生了动态变化，那我们怎么做动态展示呢&...

2021-09-29 17:21:45 86

原创 Math对象--确定最大最小值

Math 对象存在两个方法来确定最大最小值，分别是 max 和 min ，但是这两个方法，接收的参数，只能是逗号分隔的数字，或者是数字字符串，数字字符串在比较的时候，会自动转为数字类似下面这样let max1 = Math.max("1", "2", "3");console.log(max1); // 3let max1 = Math.max(1, 2, 3);console.log(max1); // 3但是如果需要处理的是一个数组，那又该怎么办，如果直接把数组传递进..

2020-12-03 23:18:52 890

原创开放浏览器跨域

Macopen -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/mac/Desktop/chromeProxy

2020-11-24 09:42:02 98

原创前端监控--通过钉钉自定义机器人发送告警消息

上一版本发布的只是单纯通过友盟租的监控，但是出现了错误我们也不会马上知道，毕竟友盟也没有即刻通知的功能，如果项目上线了，在测试没有覆盖到的场景下出现了线上bug，那我们开发人员也是不知道的，所以可以通过自定义一个钉钉机器人，来向群里发送报警消息，一旦项目出现了错误，直接上报到钉钉群，以便于更好的解决错误先上报警图，然后再讲解怎么操作这个是js错误报警，和上一篇的友盟报警类似，可以放在同一个地方进行上报，接口错误也是同理这是接口错误报警话不都说，直接开始第一步：新建钉钉机器人，这个

2020-11-13 11:37:32 1523 2

原创前端监控--vue项目中使用友盟统计监控

在项目的使用过程中，不可避免的会出现各种奇奇怪怪的报错，有的可能会导致项目程序崩溃无法运行，但是我们作为开发人员是不会立刻知道这种突发情况的，所以我们需要搜集程序的报错信息，及时解决错误，提高项目的稳定性。友盟就是这样的一款第三方监控平台，具体使用方法我就不多赘述了，官方文档里面写的比较清楚，而且使用起来并不复杂。友盟既可以做项目的流量监控，也可以做项目的稳定监控，下面我就来说一说这两种情况在Vue项目中的使用情况，其实react也应该是类似的，因为都是类似的思想以及相同的模式。前置条件：通过在

2020-11-13 10:49:23 1542 2

config.zip

空空如也