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 配置 ...
随机推荐
- 16.prometheus监控总结
一.监控流程总结 1.需要在被监控的服务器上安装xx_exporter来收集数据(可以是源码安装,最好用docker.docker-compose) 2.添加Prometheus配置,去收集(xx_e ...
- CMDB开发(三)
6.API验证 # 加密复习 #1.简单的对称加密,token是固定的 客户端请求: import requests # 1.自定义token值 token = 'cxiong_token' # to ...
- vue从事件修饰符的角度讨论如何合理的设计一个弹窗
1.设计思路:弹窗一般可以通过封装,单独设计一个组件,在需要的地方引入并通过变量布尔值进行展示和隐藏,方便使用者进行交互或提示信息 具体操作就是在给这个组件背景层添加全屏固定定位并设置透明度(cove ...
- Django配置loguru来记录日志
第一步: 在settings.py文件中导入loguru模块并配置日志文件路径和格式等信息 from loguru import logger BASE_DIR = Path(__file__).re ...
- 【GUI开发】用python爬YouTube博主信息,并开发成exe软件!
目录 一.背景介绍 二.代码讲解 2.1 爬虫 2.2 tkinter界面 2.3 存日志 三.说明 一.背景介绍 你好,我是@马哥python说,一名10年程序猿. 最近我用python开发了一个G ...
- HTML页面 IE 兼容性设置
网页第一行: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html ...
- Oracle中ALTER TABLE的五种用法(一)
首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1 ...
- 数据转换3-航拍的osgb格式数据转成3dtile格式
选择的是包含所有 osgb 文件夹的 Data 文件 文件添加成功之后,空间参考,零点坐标等会根据文件自动生成,需要更改点击设置选择即可 存储类型:选择"散列",如果没有注意到,C ...
- Calcite sql2rel 过程
sql2rel的过程是将SqlNode 转化成RelNode的过程 在 SqlToRelConverterTest中添加样例测试 @Test void testScan() { String sql ...
- MinIo对象存储文件上传,下载,预览,批量上传,创建桶等
MinIo 操作工具类 MinIo 旧中文文档 MinIo 英文文档 MinIo 官网地址 https://min.io/ package com.ming.utils; import io.mini ...