this.$refs更改classname

2024-11-06

vue里ref ($refs)用法

ref 有三种用法: 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法. 3.如何利用 v-for 和 ref 获取一组数组或者dom 节点注意: 1.ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成.比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用. 2.如果ref 是循环出

vue的ref与$refs

一. ref使用在父组件上父组件html: <information ref='information'></information> import information from './information' components:{information,bill,means}, 在父组件上使用子组件的值,js :this.$refs.information.isAdd; isAdd是information组件的data的属性. 二.ref使用在元素上例如本组件ht

vue父子组件传值加例子

例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是一样的效果: 子传父:1,用ref ,父中通过this.$refs["***"].属性可以得到子组件的data属性值,共享,能进行更改操作: 2, 用eventBus 监听事件与触发事件: vue父子组件传值加例子父组件: <template><div> <

css性能优化

1.前端 1.1.减少http请求次数: 1.1.1先了解下HTTP对性能的影响,HTTP是浏览器和服务器通过Interet进行相互通信的协议.HTTP是一种客服端/服务器协议,有请求和响应构成. 浏览器向一个特定的URL发送HTTP请求,URL对应的宿主服务器发回HTTP响应. 1.1.2css Sprites将多幅图片合并为单独一张图片,如果需要在页面中为背景.按钮.导航栏.链接等提供大量图片,css Sprites绝对是一种优秀的解决方案--干净的标签.很少的图片和很短的时间. 1.1.

dojo/dom-class源码学习

dom-class模块是dojo中对于一个元素class特性的操作(特性与属性的区别),主要方法有: contains 判断元素是否包含某个css class add 为元素添加某个css class remove 移除某个css class replace 用某个css class取代另一个css class toggle 开关某个css class 对于支持classList的浏览器可以使用calssList提供的方法,但支持这个属性的浏览器很少,貌似只有firefox和chrome支持.d

对JavaScript优化及规范的一些感想

变量...... 1.一个变量只存一种类型的数据,2.尽量减少对隐式转换的依赖,这样可增强程序的可读性,日后修改程序时不至于混乱,3.使用匈牙利命名法,4.使用局部变量时记得加 var 进行声明,不然会与全局变量冲突, 网站性能优化方面 1.在对当前DOM进行操作之前,尽可能多的做一些准备工作,保证N次创建,1次写入. 2.在对DOM操作之前,把要操作的元素,先从当前DOM结构中删除: 通过removeChild()或者replaceChild()实现真正意义上的删除. 设置该元素的displa

JS性能优化笔记搜索整理

通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x=x+1;在不影响功能的情况下可以简写为x++; 二. 变量名方法名尽量在不影响语意的情况下简单.(可以选择首字母命名) eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength. 三. 关于JS的循环,循环是一种常用的流程控制. JS提供了三种循环:for(;;).while

仿百度自动补全jquery

新建index.html文件,直接复制下面代码到新建的文件index.html里面,用浏览器访问,仅用于参考: <!doctype html><html><meta charset="utf-8"><style>body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}.auto_hidden { width:204px;border-

input模糊搜索功能

<!doctype html> <meta charset="utf-8"> <style type="text/css"> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .auto_hidden { width: 204px; border-top: 1px solid #333; border-bottom:

仿Google首页搜索自动补全

仿Google自动补全,实现细节: 后台是简单的servlet(其实就是负责后台处理数据交互的,没必要非跌用个struts...什么的) 传输介质:xml 使用jQuery js框架功能实现: 如果在缓冲300ms内只输入一个字母,则开始与后台交互. 弹出检索匹配单词的层.可以通过方向键上下选择选项,被选择的高亮显示,颜色和Google的一模一样,并且键盘选择过程中文本框动态赋值高亮单词,回车提交,ESC隐藏显示层,删除文本框中内容. 被鼠标选择的单词高亮显示,点击鼠标可以替换文本框内容,层

Vue 项目实战系列（三）

我们继续前两节的开发.本节教程实现的效果如下: 效果很简单,但是实现起来却要用到Vue的很多知识,下面我们将一步一步的实现这个效果. 首先这些城市的信息都是从后台的server里面获取的,所以我们需要一个后台,后台的代码可以从 https://github.com/EzrealDeng/Taopiaopiao里面的server 文件夹获取,这个server端具体怎么实现的我们暂时不用关心,只需要知道这是一个可以返回我们需要的数据的后台服务即可. 下载完后进入文件夹执行: npm run star

项目开发中如何规范自己的CSS

1.CSS规范 - 分类方法 CSS文件的分类和引用顺序通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型样式”,并以此顺序引用(按需求决定是否添加版本号). 公共型样式:包括了以下几个部分:“标签的重置和设置默认值”.“统一调用背景图和清除浮动或其他需统一处理的长样式”.“网站通用布局”.“通用模块和其扩展”.“元件和其扩展”.“功能类样式”.“皮肤类样式”. 特殊型样式

Web表现层

目录 Web表现层调用过程... 2 延迟... 3 什么是延迟... 3 延迟的构成... 3 最基本的优化思路:... 4 Web表现层性能优化... 4 Web性能的基本指标... 4 Web性能测试的常见工具... 5 连接网络并发送请求部分的优化手段... 5 对DNS查找的优化思路... 5 对连接网络并发送请求的优化思路... 5 使用浏览器缓存... 5 可以考虑使用本地存储... 6 尽量减少Http请求... 6 尽量使用长连接,也就是KeepAlive. 6 合理使用内联.

Vue初始

一 .安装 https://cn.vuejs.org/ 官方网站二 .简单实用示例 Vue.js 使用了基于 HTML 的模板语法,最简单的使用vue的方式是渲染数据,渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值. 首先创建一个vue实例,并在创建实例的过程中传入一个对象. 该对象的第一个属性名为el,它的值是我们需要渲染的目标标签,我们通过属性查找定位这个标签. 该对象的第二个属性名为data,里面就是我们要渲染给浏览器标签的数据, <!DOCTYPE

Vue之常用语法

变量的定义: var定义的变量:只有全局作用域和函数作用域.有变量提升,先打印后定义变量不会报错,打印结果为undefined let定义的变量:没有变量提升 ——>有局部作用域和函数作用域.块级作用域不能重复定义块级作用域 const定义的变量: 没有变量提升定义了以后不能修改定义的时候必须赋值不能重复定义带来了块级作用域模板字符串: 用反引号来进行字符串的拼接用${} 来存储变量 <div id="app&qu

CSS规范 - 优化方案--（来自网易）

值缩写缩写值可以减少CSS文件大小,并增加可读性和可维护性. 但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项. /* 比如我们用下面这个样式来让某个定宽的容器水平居中,我们要的只是left和right, * 而top和bottom不是这个样式要关心的(如果设置了反倒会影响其他样式在这个容器上的使用), * 所以这时我们就不需要缩写 */ .f-mgha{margin-left:auto;margin-right:auto;} /

点滴积累【JS】---JS实现仿百度模糊搜索效果

效果: HTML代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InputText.aspx.cs" Inherits="DropDownLikeBaiDu.InputText" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

java基础知识一览

一.关键字:JDK1.5的新特性.Eclipse.MyEclipse.IDE.Workspace.Perspective.view.设置javac和java的版本.模块代码.快捷键.导入工程.静态导入.可变参数.增强for循环.自动装箱与拆箱 1. Ecplise的基础设置 MyEclipse是Eclipse的插件,相当于补丁,增强了一些功能,用于开发JavaEE的程序(JavaEE,Java Platform Enterprise Edition,企业级版本),即WEB项目.现在是将2个软件和

NEC css规范

CSS规范 - 分类方法 SS文件的分类和引用顺序通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型样式”,并以此顺序引用(按需求决定是否添加版本号). 公共型样式:包括了以下几个部分:“标签的重置和设置默认值”.“统一调用背景图和清除浮动或其他需统一处理的长样式”.“网站通用布局”.“通用模块和其扩展”.“元件和其扩展”.“功能类样式”.“皮肤类样式”. 特殊型样式:当某

js自动补全

<!doctype html> <html> <style> body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } .auto_hidden { width: 204px; border-top: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #333; border

Vue常用语法及命令

1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log(username); var username = "小雪"; let username; console.log(username); let username = "雪人"; // 写一个if 判断的语句,var变量:只有全局作用域和函数作用域 // let 有全

this.$refs更改classname

热门专题