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 配置 ...
随机推荐
- [Contract] ETH 与 Gas 之间的价格转换关系, Ethereum Gas Price Chart
以太坊网络每天的平均气价(Gas)是变化,有一张价格表:https://etherscan.io/chart/gasprice 然后你可以知道 1 Gas = xx Gwei,再换算一下 1 ETH ...
- 手把手教你如何构建 WPF 官方开源框架源代码
从去年微软就将 WPF 开源了,差不多现在所有 WPF 的源代码都开源了.在学习框架的时候,我会做一些改动,期望能构建一个自己的版本进行测试.但是作为一个特别大的框架,想要构建跑起来可不是直接在 Vi ...
- Go-Zero微服务快速入门和最佳实践(一)
前言 并发编程和分布式微服务是我们Gopher升职加薪的关键. 毕竟Go基础很容易搞定,不管你是否有编程经验,都可以比较快速的入门Go语言进行简单项目的开发. 虽说好上手,但是想和别人拉开差距,提高自 ...
- 在IDEA中配置GitHub
目录 在IDEA中配置GitHub 安装GitHub插件 账号授权 方法一:点击Add Account... 添加账号 方法二:使用token登录 共享到GitHub 查看文件变更列表 add文件 移 ...
- fastposter发布1.5.0 跨语言的海报生成器
fastposter发布1.5.0 跨语言的海报生成器 v1.5.0 增加右键复制.粘贴操作 fastposter低代码海报生成器,一分钟完成海报开发.支持Java,Python,PHP,Go,Jav ...
- python教程8-页面爬虫
python爬虫常用requests和beautifulSoup这2个第三方模块.需要先进行手动安装. requests负责下载页面数据,beautifulSoup负责解析页面标签. 关于beauti ...
- jeecgboot项目swagger2在线接口转word
1.先找到接口文档地址 2.根据url获取接口数据 3.利用在线工具进行转换生成word 在线工具地址:在线swagger转word文档 生成的word文档如下:
- 简易的 Linux 流量实时监控工具 watch+ifstat
非常简单小巧的流量实时监控工具,贵在不需要安装,Linux 操作系统自带,在不出外网的环境中很是实用. watch -d ifstat eth1 如果连 ifstat 都没有的环境中也可以使用 ifc ...
- VRRP 虚拟路由器冗余协议
目录 文章目录 目录 为什么要使用 VRRP 技术? VRRP VRRP 的概念 VRRP 的工作原理 VRRP 的状态机 VRRP 的工作过程 VRRP 的选举机制 VRRP 的报文格式 VRRP ...
- C 语言编程 — 函数
目录 文章目录 目录 前文列表 函数 函数的声明 函数的定义 函数的形参与实参 值传递 引用传递 可变长形参列表 函数的调用 函数的指针 回调函数 递归函数 数的阶乘 斐波那契数列 构造函数(Cons ...