首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

『 Vue 小 Case 』- 别被字面量 Prop 坑了

HTML 中的特性名是大小写不敏感的,所有的大写字母都会被浏览器解释成小写字母。 文档指出在 DOM 中使用模板时,驼峰命名法的 prop 名需要使用对应的短横线分隔命名。...嗯,一番操作下来,正如文档所说,也符合我对于 HTML 文档的认知。但是要注意一点,如果你用的是 Vue 的单文件组件方式来试的话,你可能得不到期望的结果,这是为什么呢?...这两种方式在一般情况下都没有问题。但如果在下面的这种场景下,通过对象字面量来传值就会出现意料之外的问题。 2.1 场景复现 假设我们需要在文章详情页的最下方会展示相关文章的列表。...但如果我们在相关文章列表获取数据的时候加上了 loading 效果,那么大家就一定能够发现了,而这种情况显然是不能够接受的。 每次点击喜欢的时候为什么都会触发更新文章列表呢?...虽然在不发生故障的情况下,影响没有太大,但这终归不是一种好的用法。所以笔者建议在日常的开发中,我们还是尽量通过变量的方式向对象/数组类型的 prop 传值,避免掉坑。

1.1K30

一些开发规则

但是,在面向对象编程中,class中,全部使用字母大小写区分,类名的所有单词首字母大写,并且文件名即类名。...函数 (Function, Methd) 函数声明时需在函数上方加上函数注释,注释应包含函数说明、自变量内容 (自变量类型、自变量英文名称、自变量说明)、 回传值内容 (回传值类型、回传值说明) 类 (...HTML 程序代码编写 禁止在 HTML 使用 、,一律使用外部文件引用方式引用 CSS、JavaScript文件。 HTML 标签需成双成对,有头有尾。...在Js中,通常使用一些方法或者css属性时,有 "-" 的应该改为后面第一个单词字母大写。...其他 目录一律使用小写字母,目录分隔符需考虑Linux与Windows的情况不同而改变。

23810
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WordPress网站js脚本延迟和异步加载教程

    位于页面头部和主体部分内的脚本可能会导致页面加载延迟,因为浏览器甚至在页面内容之前尝试加载和执行这些脚本。 这就是为什么这些脚本被称为渲染阻塞javascripts。...上面的函数会将async属性添加到所有脚本中。...另一种方法是检查网页的HTML源代码,然后使用“查找”(CTRL + F)查找所有.js文件。 步骤2:第二步是找到需要添加延迟或异步属性的所有脚本的脚本名称。...你可以请参阅下面的Google PageSpeed insights分析的截图以进一步了解: 图片 您还可以通过检查网站的HTML源代码来查找脚本名称: 要执行此操作,只需在浏览器中打开博客的页面并检查此页面的...我们首先保存需要在数组中使用延迟和异步的脚本的唯一名称,然后使用foreach循环来运行这些数组。 每次循环运行时,它都会尝试使用strpos(字符串位置)函数在脚本标记中查找唯一文件名的位置。

    2.2K20

    为什么 Python 3 把 print 改为函数?

    在 Python 的世界里,当某些任务在不通过编译器的帮助就无法完成的情况下,语法(syntax)通常会被用作最后的手段。在这种异常情况下,print 并不合适。...如果 print() 是个函数,就可以非常容易地在一个模块内替换它(仅需 def print(*args):…),甚至可以在整个程序内替换(例如放一个不同的方法进 __builtin__.print)。...softspace 功能(当前在文件上的半秘密属性,用于告诉 print 是否要在第一个条目前插入空格)会被删除。...print ("Hello") Hello >>> print ("Hello", "world") Hello world 幸运的是,因为 print 是 Python 2 中的一个语句,所以它可以被通过自动化工具而检测到.../004485.html 版权 本文档已经放置在公共领域。

    64220

    前端构建工具gulpjs的使用介绍及技巧

    至于为什么在全局安装gulp后,还需要在项目中本地安装一次,有兴趣的可以看下stackoverflow上有人做出的回答:why-do-we-need-to-install-gulp-globally-and-locally...新建一个文件名为gulpfile.js的文件,然后放到你的项目目录中。之后要做的事情就是在gulpfile.js文件中定义我们的任务了。...我们可以使用下面这些特殊的字符来匹配我们想要的文件: * 匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分隔符出现在末尾 ** 匹配路径中的0个或多个目录及其子目录,需要单独出现,即它左右不能有其他东西了...()中,gulp.dest()方法则把流中的内容写入到文件中,这里首先需要弄清楚的一点是,我们给gulp.dest()传入的路径参数,只能用来指定要生成的文件的目录,而不能指定生成文件的文件名,它生成文件的文件名使用的是导入到它的文件流自身的文件名...有三种方法可以实现: 第一:在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。

    1.9K30

    XMLHttpRequest用法介绍

    如果登录失败往往是跳转到原网页重新登陆,如果是这种情况话就会造成资源的浪费,因为返回的HTMl网页中大多数元素都是重复的。...次方法需在open方法以后调用 getAllReponseHeader() 返回包含HTTP的所有响应头包括Content-Length,Date,URI等内容 返回值是一个字符串,包含所有头信息,其中每一个键名和键值用冒号分开...四、处理服务器返回的信息       在第二部中我们为XMLHttpRequest指定了响应处理函数,响应处理函数检查XMLHttpRequest对象的readyState属性值的变化,如果readyState...上述四个步骤,就是XMLHttpRequest对象在Ajax程序中的运行周期,即初始化、指定响应函数、发送请求、处理响应。  ...这是因为JQuery中的ajax方法需要Jquery文件的依赖,如果是想要依靠原生的js不想导入JQuery文件的情况下是不能使用的,针对于这些场景所以XMLHttpRequest还是相当受欢迎的。

    2K50

    JavaScrtip之JS最佳实践

    我们将这个函数存入一个外部文件,当需要在某个网页里使用这个函数时,只要导入这个外部文件即可.倒入外部文件后: 1.使用"javascript:"伪协议使用popUp()方法 "真"协议用来在因特网上计算机之间传输数据包...二、JavaScript之JS与Html代码的分离第一点,已经解决在浏览器禁用JS的情况下,JS平稳退化的问题,但是代码任然存在一点瑕疵,上面的代码如果只是少数几个超链接,倒没什么问题,但是如果有很多超链接..."script/c.js"> js"> 推荐的做法是把这四个文件合并到一个脚本中。...而减少请求数量通常都是在性能优化时首先要考虑的!...2.合理的合并脚本固然重要,脚本在html文档中的放置位置同样重要,因为每款浏览器都有他的"并发请求数",意思是同一时间针对同一域名的请求有数量限制,超过限制数目后,其余的请求会被阻止,如果我们将脚本文件放到

    2.1K50

    React Server Component 从理念到原理

    比如,在需要考虑SEO(即需要后端直接输出HTML)时,SSR与SSG可以胜任(都是输出HTML),而RSC则不行(流式输出)。...那么,为什么RCC不像RSC一样直接返回数据,而是返回引用id呢? 主要是因为RCC中可能包含前端交互逻辑,而有些逻辑是不能通过「RSC协议」序列化的(底层是JSON序列化)。...Q:为什么需要区分RSC与RCC(通过文件后缀)?...A:因为RSC需要在后端获取数据后流式传输给前端,而RCC在后端编译时编译成独立文件,前端渲染时再以JSONP的形式请求该文件 Q:为什么RCC中不能import RSC?...想体验RSC的同学,可以使用Next.js并开启App Router: 在这种情况下,组件默认为RSC。

    65230

    Vue隐藏技能:运行时渲染用户写入的组件代码!

    渐进式其实指的在一个已存在的但并未使用 vue 的项目上接入 vue,使用 vue,直到所有的 HTML 渐渐替换为通过 vue 渲染完成,渐进开发,渐进迁移,这种方式在 vue 刚出现那几年比较多,现在或许在一些古老的项目也会出现...本地编译与运行时编译 用户想通过编写template + js + css的方式实现运行时渲染页面,那肯定是不能本地编译的(此处的编译指将 vue 文件编译为 js 资源文件),即不能把用户写的代码像编译源码一样打包成静态资源文件...也是可以的,只需要在 vue.config.js 中打开 runtimeCompiler 开关就行了,详细看文档[4]。...找不到入口点,把用户代码注入到components对象上也无法注册到系统中,无法渲染出来。 就止步于此了吗?该怎么办呢? 想一下为什么要在components中先注册(声明)下组件,然后才能使用?...内置指的是将依赖的资源通过 script,link 标签添加到 html 文件中,随 html 一并加载。

    3.7K10

    金九银十: 50 个JS 必须懂的面试题为你助力

    在JS中,函数是对象,因此,函数可以接受函数作为参数,并且可以由其他函数返回。 问题15:什么是闭包?举个例子 只要在某个内部作用域内访问在当前作用域之外定义的变量,就会创建闭包。...问题26:什么是类型化语言 类型化语言中,值与值关联,而不是与变量关联,它有两种类型: 动态:在这种情况下,变量可以包含多种类型,如在JS中,变量可以取number, string 类型。...静态:在这种情况下,变量只能包含一种类型,就像在Java中声明为string的变量只能包含一组字符,不能包含其他类型。...把它想象成一对双胞胎:他们出生的时候一模一样,但是双胞胎中的老大在战争中失去了一条腿,而老二却没有。 引用传递: 意味着创建原始文件的别名。...函数定义只能有一个引用变量作为其函数名。 问题49:为什么要将JS源文件的全部内容包装在一个函数中 这是一种越来越普遍的做法,被许多流行的JS库所采用。

    6.6K31

    Vue.js 组件编码规范

    Vue 组件命名 组件的命名需遵从以下原则: 有意义的: 不过于具体,也不过于抽象 简短: 2 到 3 个单词 具有可读性: 以便于沟通交流 同时还需要注意: 必须符合自定义元素规范: 使用连字符分隔单词...$refs 可以得到组件或 HTML 元素的上下文。在大多数情况下,通过 this.$refs来访问其它组件的上下文是可以避免的。...README.md 是标准的我们应该首先阅读的文档文件。代码托管网站(GitHub、Bitbucket、Gitlab 等)会默认在仓库中展示该文件作为仓库的介绍。 怎么做?...在模块目录中添加 README.md 文件: range-slider/ ├── range-slider.vue ├── range-slider.less └── README.md 在 README...只在需要时创建组件 为什么? Vue.js 是一个基于组件的框架。

    6.4K20

    谷歌浏览器获取本地json文件跨域问题及JSONP的应用

    最近需要读取本地json文件,找到了原生js方式和ajax方式,都会报跨域的问题。于是研究了下什么是跨域,为什么会跨域,以及JSONP解决方案的运用。 一、我是怎么遇到跨域问题的?...为什么浏览器会报跨域的错? 这是因为浏览器有一个安全机制,叫做 同源策略(CROS),不同域的客户端脚本在无明确授权的情况下,是不能读取对方资源的。...载入json文件后,我们还需要获取到文件里面的json数据,这时候我们可以借用函数调用方式,把json数据作为函数实参,从而在js代码中取到数据。 2....step2: 通过标签引入test.json文件。 step3: test.json文件中,要把json数据作为实参放在函数getJson()中,即调用函数。 不能访问本地文件(利用js跨域原理) 通过截图,很清晰说明了jsonp应用过程。

    4.6K20

    50 个JS 必须懂的面试题为你助力金九银十

    在JS中,函数是对象,因此,函数可以接受函数作为参数,并且可以由其他函数返回。 问题15:什么是闭包?举个例子 只要在某个内部作用域内访问在当前作用域之外定义的变量,就会创建闭包。...问题26:什么是类型化语言 类型化语言中,值与值关联,而不是与变量关联,它有两种类型: 动态:在这种情况下,变量可以包含多种类型,如在JS中,变量可以取number, string 类型。...静态:在这种情况下,变量只能包含一种类型,就像在Java中声明为string的变量只能包含一组字符,不能包含其他类型。...把它想象成一对双胞胎:他们出生的时候一模一样,但是双胞胎中的老大在战争中失去了一条腿,而老二却没有。 引用传递: 意味着创建原始文件的别名。...函数定义只能有一个引用变量作为其函数名。 问题49:为什么要将JS源文件的全部内容包装在一个函数中 这是一种越来越普遍的做法,被许多流行的JS库所采用。

    4.8K30

    前端代码规范

    components/[name]/src 文件夹,在 components/[name]/index.js 引入并外放全局样式放在 themes,全局 js 放在 utils,请求放在 services...,图片放在 asserts静态文件(不参与 webpack 处理的)放在 src 之外的 public项目中尽量不使用外网 CDN,会存在挂链风险,需下载放入本地 public 文件夹主组件为 app.js...或 app.vue,内容主入口为 index.js,启动入口为 main.js(如 electron 或 ssr)HTML 规范尽量不要在 html 中写内联样式input iframe video...ID 选择器和属性选择器尽量不要在 js 中操作 style,可通过变化 className 去实现尽量不要在 CSS 中使用 !...;已有代码可用包装器函数处理入参在链接中传参时,需对可能存在特殊字符的字符串进行 encodeURIComponent,比如 token redirect 等其他规范保存操作的接口统一用 post 请求

    17720

    15个 Vue.js 高级面试题

    为了确保代理并可以从组件中访问它,可以配置 vue.config.js 文件并包含 devServer 部分,如下所示: 在 vue.config.js 文件中: module.exports: {...在更新响应性数据并重新渲染虚拟 DOM 之后,将调用更新的 hook。它可以用于执行与 DOM 相关的操作,但是(默认情况下)不能保证子组件会被渲染,尽管也可以通过在更新函数中使用 this....在 Vue 实例中编写生命周期 hook 或其他 option/propertie 时,为什么不使用箭头函数? 箭头函数自己没有定义 this 上下文,而是绑定到其父函数的上下文中。...keep-alive 元素缓存该组件并从那里获取它,而不是每次都重新渲染它。 14. 在大型 Vue 程序中管理状态的推荐方法是什么?为什么?...在这种情况下,Vue 允许我们在需要时定义从服务器异步加载的组件。在声明或注册组件时,Vue 接受提供 Promise 的工厂函数。然后可以在调用该组件时对其进行“解析”。

    3K20

    从零新建小程序

    AppID:企业级需(小程序申请成功的时候会有这个,个人的不用填写,只是最后不能发布到线上)。...,功能同html .wxss 样式文件,功能同css .js 脚本逻辑,功能同javascript 那么同pages同级的几个文件就不难理解了,为什么里面和外面都有呢?...是不是很奇怪,为什么是view block text button images,这些其实是小程序将我们的html标签封装了之后的标签,来来来翻译一下, view类似我们最熟悉的div没有默认样式,...{{}}如果你之前了解过vue 或者angular 那么对于这种写法就不陌生了,就是js中的数据想要在页面中渲染出来,需要用{{}}这个标示解析一下。...app.globalData.userInfo这个就是在app.js这个全局js文件中定义的变量需要用这方法去取,那么在当前data中的数据怎么取呢,需要这样 this.data.变量名 那么如果想更改

    1.1K90

    JSON格式和Ajax简介

    服务器的响应方式 在传统模式下,服务器端向客户端的主要响应方式是:转发,或重定向。使用这种模式时,通常,服务器端会向客户端响应某个页面,而这种模式是不利于当前的互联网架构的!...JSON的语法格式是: 使用一对大括号{}框住的是JSON对象,整个JSON数据就是1个JSON对象; 在JSON对象中可以配置若干个属性与值的对应关系,各项配置之间使用逗号,分隔; 属性名与值之间使用冒号...服务器端向客户端响应JSON格式的数据 首先,在项目的pom.xml文件中添加jackson-databind依赖: <!...; charset=utf-8 所以,总的来说,如果需要在项目中响应JSON格式的数据,必须先添加jackson框架的依赖,并且,在处理请求的方法中,返回SpringMVC默认并不识别的类型(只要是自定义的数据类型均可...首先,在项目的webapp文件夹下创建注册页面,并在这个文件夹存放jQuery文件。 页面代码示例: <!

    1.1K10
    领券