VUE CLI中使用Jquery无法获取到dom节点
mounted
类型:
Function详细:
实例被挂载后调用,这时
el被新创建的vm.$el替换了。如果根实例挂载到了一个文档内的元素上,当mounted被调用时vm.$el也在文档内。注意
mounted不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在mounted内部使用 vm.$nextTick:mounted: function () {
this.$nextTick(function () {
// 仅在整个视图都被渲染之后才会运行的代码
})
}该钩子在服务器端渲染期间不被调用。
<template>
<div class="app-container">
<div style="background-color: antiquewhite; height: 100px; width: 200px">
<span id="spTest">sdfsdf</span>
<div id="slider"></div>
</div>
</div>
</template>
<style>
@import "/Content/JS/Jquery/jqueryui.min.css";
@import "/Content/JS/Jquery/jquery-ui-slider-pips.min.css";
</style>
<script>
export default {
name: "imgview/viewimg2",
created() {
that.$nextTick(function () {
debugger;
});
},
mounted() {
this.$nextTick(function () {
console.log("log:");
console.log($("#spTest").html());
$("#slider").slider();
});
},
}; // $("#myslider").slider().slider("pips").slider("float");
</script>
VUE CLI中使用Jquery无法获取到dom节点的更多相关文章
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- Vue组件中引入jQuery
一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...
- Vue router中携带参数与获取参数
Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...
- Jquery 方式获取 iframe Dom元素
Jquery 方式获取 iframe Dom元素 測试页面代码: <html> <head> <title>jquery方式,訪问iframe页面dom元素& ...
- 在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件
在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件 当触发事件时候 会把当前的dom传给该方法
- [译]怎样在Vue.js中使用jquery插件
原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使 ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- 如何在Vue项目中引入jQuery?
假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
随机推荐
- IoT Studio可视化搭建平台编辑历史功能的思考与探索
简介: 在前端可视化搭建领域中"重做"和"撤销"这两个功能已经是标配中的标配,毕竟只要有用户行为的地方就可能会有出错,这两个功能无疑就是为用户提供了" ...
- [Contract] 测试 Solidity 合约代码的两种方式 与 优缺点
第一种,使用 Truffle 这类继承了测试工具的框架,只要编写 js 脚本就可以测试 web3 与合约的逻辑. 优点是完全可控,粒度够细,便于集成测试:缺点是需要花费一些时间编写测试脚本,不过值得. ...
- Mybatis学习三(动态sql语句)
动态sql语句主要为以下语句 1.动态SQL:if 语句2.动态SQL:if+where 语句3.动态SQL:if+set 语句4.动态SQL:choose(when,otherwise) 语句5.动 ...
- CMake 教程(待完善)
Cmake 教程 写在前面 如果工程只有几个文件,直接编写Makefile更直接明了 如果使用C.C++.之外的语言,请不要使用cmake 如果使用的语言有非常完备的构建体系,不需要使用cmake C ...
- oracle RDBMS Kernel Executable 占用内存过高
oracle RDBMS Kernel Executable 占用内存过高 参考:https://www.cnblogs.com/markkang/archive/2019/11/25/1192540 ...
- 超轻量级的c#版基于文件的日志记录工具,可定制输出格式,可指定日志文件
这是我自己个人编写的日志记录,主要使用在只需要记录日志,偶尔到文件中查看一下日志记录的情况.我自己写的一些服务之类的是使用了这个的,代码很少,使用很简单. 第一步 搜索和安装我的Nuget包 搜索和安 ...
- Golang validate验证器
目录 自定义验证规 单条验证 多条批量验证 其它验证包: gookit/validate 手册地址: https://godoc.org/gopkg.in/go-playground/validato ...
- Linux — 进程管理
进程创建 进程通过fork()创建的大致过程: #include <stdio.h> #include <stdlib.h> #include <sys/types.h& ...
- csapp-attacklab(完美解决版)
注意:必须阅读Writeup,否则根本看不懂这个lab要怎么做 实验前准备 1.在终端中输入./ctarget和./rtarget结果报错 百度后得知自学的同学需要在执行文件时加上-q参数,不发送结果 ...
- 热烈祝贺 Splashtop 荣获“最佳远程办公解决方案”奖
2021年2月,第十四届加拿大年度"经销商选择奖"落下帷幕.Splashtop在此次评选中荣获"最佳远程办公解决方案"奖,获得该奖项的还有微软和谷歌. 一直 ...