在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null。

代码:

        if (el.parentNode && !Vue.prototype.$_has(binding.value)) {
el.parentNode.removeChild(el);
}

我这边用的是bind的钩子函数。

vue指令

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind:只调用一次,指令与元素解绑时调用。

这个时候需要把钩子函数改成inserted就解决了。

vue 指令中el 的 parentNode 为空的问题的更多相关文章

  1. vue项目中, 字段信息为空时不渲染,是真的不渲染吗

    代码 样式,宽度pro_proj 此class设置有宽度,考虑字数如果太多就进入下一行就没有设置高度 样式改为 数据 渲染. 开始以为,null时vue不渲染,然后审查元素,发现渲染的dom是存在的, ...

  2. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  3. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  4. Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  5. vue指令v-html中使用过滤器filters功能

    Vue 2.0 不再支持在 v-html 中使用过滤器 解决方法: 1:全局方法(推荐) 2:computed 属性 3:$options.filters(推荐) 1:使用全局方法: 可以在 Vue ...

  6. EL语言表达式 (三)【EL中的算术运算以及判断EL对象是否为空】

    一.EL中的算术运算 EL和其他语言一样,同样也提供了基本的算术运算(加.减.乘.除和取余),如下图. 运算符 功能 示例 结果 + 加 ${19+1} 20 - 减 ${66-30} 36 * 乘 ...

  7. vue指令相关的

    阅读目录 1.v-text 2.v-html 3.v-show 4.v-if 5.v-if vs v-show 6.v-else 7.v-for 8.v-on 9.v-bind 和 v-model 1 ...

  8. vue项目中遇到的一些问题

    或访问:https://github.com/littleHiuman/experiences-about-vue  欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...

  9. vue指令详解

    一.vue简绍 1. Vue.js是什么    Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...

随机推荐

  1. 洛谷 p1047 校门外的树 线段树做法

    非常easy, 注意一下它是两端开始,也就是说0的位置也有一棵树就好了 我由于太弱了,一道红题交了4,5遍 由于树的砍了就没了,lazy标记最大就是1; 直接贴代码吧 #include<bits ...

  2. 下载mqtt.fx

    #下载mqtt.fxhttp://www.jensd.de/apps/mqttfx/1.7.1/

  3. [原创]Emmagee V2.4工具使用介绍

    [原创]Emmagee V2.4工具使用介绍 1 Emmagee 介绍 Emmagee 是网易杭州研究院 QA团队开发的一款简单易上手的Android性能监控App,主要用于监控单个App的CPU.内 ...

  4. 软件工程1916|W(福州大学)_助教博客】个人总结作业(第12次)成绩公示

    1.作业链接 个人作业--软件工程实践总结作业 https://edu.cnblogs.com/campus/fzu/SoftwareEngineering1916W/homework/3316 2. ...

  5. javascript系列--认识并理解构造函数,原型和原型链

    一.前言 介绍构造函数,原型,原型链.比如说经常会被问道:symbol是不是构造函数:constructor属性是否只读:prototype.[[Prototype]]和__proto__的区别:什么 ...

  6. 【Gamma】测试报告

    测试方法及过程 在正式发布前,我们对后端代码.前后端接口.服务器以及前端的页面和功能做了多种测试,主要包括对后端代码的单元测试.针对接口的测试.压力测试以及功能测试. 后端代码单元测试 该部分测试主要 ...

  7. ASP.NET Core WebApi基于JWT实现接口授权验证

    一.ASP.Net Core WebApi JWT课程前言 我们知道,http协议本身是一种无状态的协议,而这就意味着如果用户向我们的应用提供了用户名和密码来进行用户认证,那么下一次请求时,用户还要再 ...

  8. PHP微信发红包简明教程

    PHP微信发红包简明教程1首先进入公众号申请微信支付 申请成功账号密码会发到你指定的邮箱 是登陆商户平台的2 进入后申请发红包借口3 调用发红包接口 https://api.mch.weixin.qq ...

  9. JavaScript生成一个不重复的ID

    /** * 生成一个用不重复的ID */ function GenNonDuplicateID():String{ } 先看看下面的几个方法 1.生成[0,1)的随机数的Math.random,例如 ...

  10. Bootstrap:UI开发平台 sdk

    Bootstrap:UI开发平台 Bootstrap是一个易用.优雅.灵活.可扩展的前端工具包,里面包含了丰富的Web组件,包括布局.栅格.表格.表单.导航.按钮.进度条.媒体对象等,基于这些组件,可 ...