记录生活留住美好时刻 ，分享个人学习笔记
在 JavaScript 中，XMLHttpRequest 是客户端的一个 API，它为浏览器与服务器通信提供了一个便捷通道。现代浏览器都支持 XMLHttpRequest API，如 IE 7+、Firefox、Chrome、Safari 和 Opera。创建 XMLHttpRequest 对象XMLHttpRequest 用于在后台与服务器交换数据。创建 XMLHttpRequest 对象的方法如下：var xhr = new XMLHttpRequest (); IE 5.0 版本开始以 ActiveX 组件形式支持 XMLHttpRequest，IE 7.0 版本开始标准化 XMLHttpRequest。不过所有浏览器实现的 XMLHttpRequest 对象都提供相同的接口和用法。 示例下面示例使用工厂模式把定义 XMLHttpRequest 对象进行封装，这样只需要调用 creatXHR() 方法就可以返回一个 XMLHttpRequest 对象。//创建XMLHttpRequest 对象 //参数：无 //返回值：XMLHttpRequest 对象 function cr
毛玻璃背景已被广泛应用于网页设计中，其关键代码是：backdrop-filter: blur(4px);配合内外阴影设置，可达到最佳效果：box-shadow: inset 1px 1px 6px rgba(255,255,255,0.3), 2px 2px 15px rgba(0, 0, 0, 0.5); 本例实现毛玻璃表单特效，结合动画的使用让页面更具动感，下面是html代码部分： <div class="container"> <div class="bg"> <span></span> <span></span> <span></span> </div> <div class="glass"> <div class="text&q
今天在用 wx.navigateTo 跳转页面时遇到一个问题，传参url后面带有参数时，跳转的页面在options.url里接收不到，例如：let url = "https://cn.axxxxxx.com/promotion/accaemployer.html?utm_content=WechatBrand&utm_source=WechatBrand" wx.navigateTo({ url: '/pages/index/webview?url='+url, })在webview.js页面的options.url拿到的却是 https://cn.axxxxxx.com/promotion/accaemployer.html ，后面的参数都没有了，解决办法就是用 encodeURIComponent 和 decodeURIComponentwx.navigateTo({ url: '/pages/index/webview?url='+encodeURIComponent(url), })webview.js页面：let url = decod
在main.ts中引入import zhCn from 'element-plus/dist/locale/zh-cn.mjs'会飘红，解决办法是在上面加一行注释：//@ts-ignore即：//@ts-ignore import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
触发高频事件后n秒内函数只会执行一次，如果在n秒内高频事件再次被触发，则重新计算时间。简单的说也就是一定时间段的无论点击多少次，只会执行最后一次的调用，前面的会被清除。<template> <el-input v-model="text" @input="debounceInput" /> </template> <script> export default { mounted () { this.debounceInput = this.debounce(this.handle, 1000,false) }, data () { return { text: '', debounceInput: () => {}, } }, methods: { handle (value) { console.log(value) },
在项目开发中，需要在父组件中触发函数，自动修改子组件中的data值，来实现子组件的data数据的变化。使用vue的ref参数就可以实现了。父组件代码部分<template> <div> <button @click="changeChildValue">点击改变子组件的data值</button> <children ref="child"></children> </div> </template> <script> import children from "./children" export default { components:{ children }, methods: { changeChildValue() { this.$refs.child.isName= '我是小红';
一、页面TDK（标题、描述、关键词）设置全局设置配置nuxt.config.js文件export default { //... head: { htmlAttrs: { lang: 'en' }, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, //... }在每个页面的配置//首页index.vue export default{ ...//其他代码块 head: { title: "网站标题",
1、将时间戳转换成日期格式：function timestampToTime(timestamp) { // 时间戳为10位需*1000，时间戳为13位不需乘1000 var date = new Date(timestamp * 1000); var Y = date.getFullYear() + "-"; var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-"; var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "; var h = date.getHours() + ":"; var m = date.getMinutes() + ":";
修改nuxt.config.js文件 build: { // 将内嵌CSS样式提取到外部 extractCSS: { allChunks: true }, }
JavaScript中的this在绝大多数情况下，函数的调用方式决定了 this 的值(运行时绑定)。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。如何确认this的值:在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。1.全局执行环境中，指向全局对象(非严格模式、严格模式)2.函数内部，取决于函数被调用的方式 1.直接调用的this值:a.非严格模式：全局对象（window） b.严格模式：undefined2.对象方法调用的this值：调用者 /** * 如何确认this的值 * 1.全局执行环境 * 严格模式，非严格模式:全局对象（window） * 2.函数内部 * 2.1 直接调用 * 严格模式下:undefined * 非严格模式:全局对象（window） * 2.2 对象方法调用 * 严格模式，非严格模式:调用者 * 3.开启严格模式 * 脚本开启: 'use st
1.vue会监视data中所有层次的数据。2.如何监测对象中的数据?通过setter实现监视，且要在new Vue时就传入要监测的数据。(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式，请使用如下API: Vue.set(target，propertyName/index， value) 或 vm.$set(target，propertyName/index， value）3.如何监测数组中的数据?通过包裹数组更新元素的方法实现，本质就是做了两件事: (1).调用原生对应的方法对数组进行更新。 (2).重新解析模板，进而更新页面。4.在Vue修改数组中的某个元素一定要用如下方法: 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() 2.Vue.set() 或 vm.$set()特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性!
深度监视:(1).Vue中的watch默认不监测对象内部值的改变 (一层)。(2).配置deep:true可以监测对象内部值改变 (多层)。备注:(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
铅笔Naruto
前端攻城狮
