- 博客(8)
- 收藏
- 关注
RSS订阅原创 输入一个URL到渲染页面发生了什么
1.输入URL，浏览器查找当前URL是否存在缓存，并比较缓存是否过期2.DNS解析域名成IP地址3.根据IP地址向对应的服务器发送网络请求 (建立TCP连接三次握手）4.服务器处理请求，返回对应的文件（通常是返回index.html, 解析过程需要加载对应的css，js文件再去请求返回）5.浏览器解析文件并渲染页面 渲染过程（1）HTML Parse模块解析HTML文件，生成DOM Tree（2）解析过程如果碰到script标签，会停止解析HTML，执行完JS再去...
2022-03-08 19:05:52
540
1
原创 JavaScript this指向
JavaScript的this指向问题JS在创建函数时，每个函数都分配有自己的this，而this指向是根据运行时的上下文来确定的。举个例子：let obj = { test() { console.log(this) }}obj.test() //objlet test = obj.testtest() //window上述代码很好的说明了这个问题，当我们通过obj.test()调用test方法输出的this是obj，而当我们用一个变量来接受ob
2021-09-25 23:43:38
103
原创 V-model的双向绑定原理
V-model的原理在学习v-model的过程中手贱自己用原生JS实现了一遍v-model的双向绑定。。。首先，v-model只是个语法糖，实际上原理给表单元素用绑定值和input或change事件，举个例子：<input v-model="value" />//实际上等于<input v-bind:value="value" @input="value = $event.target.value" />至于表单元素的用法可以自行查看Vue官网文档。简单阐述一下，i
2021-09-17 22:44:24
9101
原创 Vue事件处理以及和原生事件处理的联系
Vue事件处理是通过v-on:eventName(handler)的方式进行事件处理，并提供了6个事件修饰符。@eventName //@eventName v-on:eventName的简写形式@eventName.once(handler) //handler只触发一次，触发之后移除事件监听器@eventName.prevent(handler) //阻止浏览器的默认行为@eventName.stop(handler) //阻止事件的进一步传播（冒泡）@eventName.passive(
2021-09-16 12:17:46
358
原创 Vue动态参数
动态参数，就是可以为一个HTML元素的属性绑定动态值，例如v-bind:[attributeName] = "value" <div id="app"> <input :type="type" :[attributeName]="value"/> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
2021-09-16 09:38:05
862
原创 Vue插槽slot
Vue slot的基本使用（v-slot代替了slot和slot-scope）（如果没有在子组件中定义slot，则父组件中的结构会被抛弃）默认插槽(父组件使用子组件时可以自定义一些内容插入子组件的指定位置） //子组件<template id="test"> <div> <h2>test</h2> //插槽可以有默认值，当父组件没有写内容时使用默认值 //<slot><div.
2021-09-16 00:05:35
93
原创 VueComponent
VueComponent动态组件切换时候的一个坑<div id="app"> <button type="button" @click="currentCompoent = $options.components.test1" >test1</button> <button type="button" @click="currentCompoent = $options.components.te
2021-09-15 22:52:27
162
原创 JavaScript ‘use strict‘ 严格模式
'use strict' 'use strict'可以出现在JS脚本的顶部或函数体的顶部，两者的区别是，在脚本顶部使用'use strict'整个脚本都处于严格模式，在函数体顶部使用则在该函数体内开启严格模式。！！！注意，必须在代码顶部使用'use strict'，否则命令会被忽略，而且一旦进入严格模式之后就不能再回到默认模式。//在脚本开启严格模式'use strict' ... your code//在函数中开启严格模式function fun(...arg...
2021-09-15 11:56:51
168
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人