vue 钩子函数中获取不到DOM节点
原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html
两种解决方案:
1:官方解决方案:
受到 HTML 本身的一些限制,变通的方案是使用特殊的 is 特性
应当注意,如果使用来自以下来源之一的字符串模板,则没有这些限制:
eg1:用<script type="text/x-template">
将
<comp></comp>
改为
<script type="text/x-template" id="comp">
<div>XXXXX</div>
</script>
(博主试过不符合本博主的情况)
eg2:用JavaScript 内联模板字符串
比如:ES6引入了一种新型的字符串字面量语法,反撇号(`)
eg3:用XXX.vue 组件
博主不是在线环境,不符合博主
eg4:用is (博主试过还是不行啊)
将<comp></comp>
改为<div is='comp'></div>
2:暂时的不好的但也可以解决的....方案:
created: function() {
setTimeout(function() {
var body = document.getElementById('ID');
console.log(body);
})
},
- 2
原因解析:
当使用 DOM 作为模板时 (例如,使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。

vue 钩子函数中获取不到DOM节点的更多相关文章
- react入门-----(jsx语法,在react中获取真实的dom节点)
1.jsx语法 var names = ['Alice', 'Emily', 'Kate']; <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的 ...
- vue 钩子函数 使用async await
示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- 45、导航钩子函数中使用next()和next('\指定路径')的区别:
当在router.beforeEach((to, from, next) 钩子函数中使用: 1.使用next()时,直接跳转到下一页,没有再执行导航钩子函数 2.使用next('指定路径')跳转到指定 ...
- 服务器表单字符串转化Vue表单挂在到对应DOM节点
今天在项目开发中,遇到从后端返回的vue文件(包含template,js,css)的文件,试过用v-html解析文件,渲染到页面,但是无法渲染,后来去查了一堆资料,自己写了一个全局方法来解析这类文件 ...
- react.js 获取真实的DOM节点
为了获取真实的dom节点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点. var MyComponent = React.crea ...
- vue 钩子函数的使用
1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- js函数中的BOM和DOM
BOM 浏览器对象模型 screen对象 console.log(screen.width);// 屏幕宽度 console.log(screen.height);// 屏幕高度 console.l ...
- Vue(4)- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
随机推荐
- ELF文件格式理解
ELF(Executable and Linking Format)是一种对象文件的格式,用于定义不同类型的对象文件(Object files)中都放了什么东西.以及都以什么样的格式去放这些东西.它自 ...
- 单节点oracle、ASM 详细安装步骤
目录 1.安装环境 2.系统要求 2.1 Linux安装Oracle系统要求 1.查看RAM和交换空间以及磁盘大小 2.检查所需软件包 3.配置host和主机名 2.2修改操作系统核心参数 1.创建相 ...
- Python 2中万恶的字符编码
Python2中如果文件存在中文,必须要指定#-*- coding:utf8 -*-或#coding:utf8,否则会报错.那这是为什么呢? 一.原理解析 我们知道,在计算机发展初期,计算机只能识别字 ...
- Some notes of An Insider's Guide to TOEFL iBT
尽早把托福这个坑填上方是正道,在正式上托福课之前阅读了这本Guide,颇受启发——只要是考试,总是有固定的方法的= = An Insider's Guide to TOEFL iBT It is NO ...
- Centos修改IP的两种方式
nmtui命令调出修改窗口:nmtui 重启网卡:/etc/init.d/network restart 或者:service network restart 方式二: 进入网络配置文件目录 首 ...
- C++使用socket传输图片
Client: #include <WinSock2.h> #include <Windows.h> #include <stdio.h> #pragma comm ...
- poj3666/CF714E/hdu5256/BZOJ1367(???) Making the Grade[线性DP+离散化]
给个$n<=2000$长度数列,可以把每个数改为另一个数代价是两数之差的绝对值.求把它改为单调不增or不减序列最小代价. 话说这题其实是一个结论题..找到结论应该就很好做了呢. 手玩的时候就有感 ...
- CSS三角的写法(兼容IE6)
目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框. 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样 ...
- 一个简单的ETL脚本的内容
一个简单的ETL脚本应该包含如下内容 1.注释 2.设置字符集 3.基础路径参数 脚本路径 票据路径 日志路径 当前SHELL的脚本别名:declare SHELL_NAME=“${basename ...
- Acwing-97-约数之和(整数分解, 递推分治)
链接: https://www.acwing.com/problem/content/99/ 题意: 假设现在有两个自然数A和B,S是AB的所有约数之和. 请你求出S mod 9901的值是多少. 思 ...