在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以直接想到了这个办法. 但是出于未知的原因,jQuery获取不到v-for出来的数据,根本找不到dom节点,所以不得不改变思路. 然后我想到了V-bind的方法.下面贴上步骤. 1.在data里面申明一个属性,默认值最好为数字类型,并且不得大于当前元素+所有兄弟元素的length,可以默认为0(第一个…

一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(this).parent('ul').siblings(); 三.获取子级元素 使用jquery获取子级元素:find() 例如:$(this).parent('ul').siblings().find('li'); 常用例:(点击进行切换) $(function(){ $('.xxx li').cl…

Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=""处理函数收到二个参数(e l, done)done() 为动画结束 @after-enter=""处理函数收到一个参数(e l) 出场动画 @before-leave="" 处理函数收到一个参数(e l) el为这个元素 @leave="&quo…

问题场景: const addOptions = { singleOrComplex, totalNum: this.smallTotalPrice, selectList: this.purchaseLotter, smallTotalPrice: this.smallTotalPrice * 2 } this.selectSucLotter.push(addOptions) addOptions中的红框内容为全局的变量,我们需要往this.selectSucLotter中添加addOptio…

Vue 中提示警告 TypeError: handlers[i].call is not a function at callHook (vue.esm.js?a026:2921) at Object.insert (vue.esm.js?a026:4158) at invokeInsertHook (vue.esm.js?a026:5960) at Vue.patch [as __patch__] (vue.esm.js?a026:6179) at Vue._update (vue.esm.j…

1.html代码 <template v-for='item in names'> <div id="app" class="selectItem" v-bind:class="{'selected': item.Members}" v-on:click='addSelectedTagForMembers($index)'>{{item.name}}</div> </template> templa…

①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法中定义监听滚动执行的方法: scrollToTop() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollT…

vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @click="addSubject(scope.$index)"> </icon> 后来发现,在edge内核中只有点击svg边缘部分才会触发click事件 所以解决办法如下:为svg图标外面包裹一层元素,click事件绑定在外侧元素上 <a href='javascri…

由于组件化问题,webpake在打包以后,src目录下的assets里面存放的img图片,路径已经更换.很多入坑的前端程序员在使用的时候,可能专破头也弄不清地址是什么个情况: 这里在使用vue-cli脚手脚构建工具,目录下会生成一个static目录,表示的是静态目录,推荐大家将img 存放在这个目录下,那么在webpack编译以后,依旧是可以获取到这个目录下的路径,这样就解决了路径不符而导致图片加载不出来的问题!当然项目中用的一般都是绝对路径,少数图片的话,这种方式挺好…

1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的页面. a. 路由跳转: this.$router.push('/home'); b. 命名的路由,传参使用params: this.$router.push({name:"home", params:{userId: '123'}})        获取参数 this.$router.p…

1. 先在computed中,用需要监听的两个值(start.end)定义一个对象(dateRange) computed: { dateRange () { const { start, end } = this return { start, end } } }) 2. 然后在watch中监听这个对象(dateRange) watch: { dateRange (val) { console.log(val) } }…

watch: { option: { handler(newVal) { console.log(newVal); }, deep: true, immediate: true } }, 需要深层watch就需要开启deep属性 开启immediate属性,设定为true,会打印一次初始值:…

原文:http://www.jb51.net/article/129270.htm main.js入口文件配合vue-router写这个 router.afterEach((to,from,next) => {  window.scrollTo(0,0); });…

今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以后查看. 用法一: 参考: HTML示例: //将下面nav_datas数组中的数据给渲染出来,并利用nav_datas中的class_true的boolean值来表示该元素类名是否存在 <template> <div> <ul> <li v-for="(n…

add(expr|ele|html|obj[,con]) 概述 把与表达式匹配的元素添加到jQuery对象中.这个函数可以用于连接分别与两个表达式匹配的元素结果集. jQuery 1.4 中, .add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序,而不再是简单的添加.直线模组 jQuery 1.9 中, .add()方法返回的结果总是按照节点在document(文档)中的顺序排列.在1.9之前,如果上下文或输入的集合中任何一个以脱离文档的节点(未在文档中)开始,使用.add()…

写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 <VUE基础系列(一)——VUE入坑第一篇> <VUE基础系列(二)——VUE中的methods属性> <VUE基础系列(三)——VUE模板中的数据绑定语法> <VUE基础系列(四)——VUE中的指令(上)> 一.前言 vue中的指令是指以“v-”开头的一个语法,它主要…

Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结构进行重绘与回流,而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM,这样能够最小化操作DOM结构,能够最大程度上减少浏览器重绘与回流的规模. 虚拟DOM diff算法的基础是Virtual DOM,Virtual DOM是一棵以JavaScript对象作为基础的树,每一…

一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作.但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据.难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过…

Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组件有两种方法,如下 方法一,混合写法 // Parent.vue 传送 <child :msg1="msg1" :msg2="msg2"></child> <script> import child from "./chil…

一.addClass() - 向被选元素添加一个或多个类 <script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div,p").addClass("imp…

vue中nextTick可以拿到更新后的DOM元素 如果在mounted下不能准确拿到DOM元素,可以使用nextTick 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中 <div id="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">消息已传出: {{msg1}}<…

element.addEventListener(event, function, useCapture) 方法用于向指定元素添加事件句柄.   event: 必须.字符串,指定事件名.注意: 例 使用 "click" ,而不是使用 "onclick".   function: 触发函数   useCapture: 可选.布尔值,指定事件是否在捕获或冒泡阶段执行. 可能值: true - 事件句柄在捕获阶段执行 false- 默认false.事件句柄在冒泡阶段执行…

Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父子组件的通信,所谓单向数据流,就是数据只能通过props由父组件流向子组件,而子组件并不能通过修改props传过来的数据修改父组件的相应状态,所有的prop都使得其父子prop之间形成了一个单向下行绑定,父级prop的更新会向下流动到子组件中,但是反过来则不行,这样会防止从子组件意外改变父级组件的状…

vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法通过@import引入进来即可,或者我们通过再main.js中设置Vue.prototype.xxx = function () {};来设置全局通用的 方法:   样式的复用也是一样的道理,我们可以通过再assets/styles中通过index.css文件将所有的通用样式再main.js文件中导…

vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clipboard'; 下面就是使用了,比如说,比较常见的是,上面一行文字,下面有一个复制的按钮, <p id="share-code">{{init.code}}</p> <button class="copy-btn" data-clipboa…

<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"&…

查找: document.getElementsByTagName通过标签名获取元素,不论有多少个都返回元素集合. document.getElementsByClassName通过类名获取元素,同上返回集合. document.getElementById通过id属性名获取元素,返回元素对象 创建节点:document.createElementc创建元素节点,document.createTextNode创建文本节点 添加或移动节点:appendChild添加节点到指定元素内尾部,inser…

使用size()方法输出列表中的元素数量.需要注意的是,这个方法返回的值可能不是真实的,尤其当有线程在添加数据或者移除数据时,这个方法需要遍历整个列表来计算元素数量,而遍历过的数据可能已经改变.仅当没有任何线程修改列表时,才能保证返回的结果是准确的.…

第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set(arr); // console.log([...newarr1]); // 输出的值是  [12, 3, 4, 5, 6] 第2题==>深拷贝: ==>拷贝出来的对象互相的独立,不会影响 使用的JSON.stringify和JSON.parse(user2); var user1={name:…

1.addClass:为指定的dom元素添加样式. 2.removeClass:删除指定dom元素的样式. 3.toggleClass:如果存在(不存在),就删除(添加)一个样式. 4.hasClass:判断样式是否存在. function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) { if (!th…