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节点的更多相关文章

  1. 在vue项目中引入jquery

    在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...

  2. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

  3. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

  4. Jquery 方式获取 iframe Dom元素

    Jquery 方式获取 iframe Dom元素 測试页面代码: <html>  <head>   <title>jquery方式,訪问iframe页面dom元素& ...

  5. 在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件

    在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件  当触发事件时候 会把当前的dom传给该方法

  6. [译]怎样在Vue.js中使用jquery插件

    原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使 ...

  7. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  8. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  9. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  10. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

随机推荐

  1. [FAQ] FinalCutPro 竖版视频 加模糊背景变 横版视频

    把一段影片拖到时间轴上面,注意自定义尺寸选择 1920 x 1080,因为竖版的是 1080 x 1920. 切换到仅视频,并选择变形,视频区左右拖动视频到最大. 设置模糊效果为高斯曲线. 切回到全部 ...

  2. IIncrementalGenerator 获取引用程序集的所有类型

    本文告诉大家如何在使用 IIncrementalGenerator 进行增量的 Source Generator 生成代码时,如何获取到当前正在分析的程序集所引用的所有的程序集,以及引用的程序集里面的 ...

  3. IIncrementalGenerator 判断程序集的引用关系

    本文将告诉大家如何在 IIncrementalGenerator 增量 Source Generator 生成代码里面,在 Roslyn 分析器里面判断两个程序集是否存在引用关系 先上核心代码实现,核 ...

  4. .net 记录http请求

    记录http请求 环境 .net7 一.过滤器(Filter) 这个过程用的的是操作过滤器(ActionFilter) 二. 2.1 继承IAsyncActionFilter 2.2 重写OnActi ...

  5. VUE+element页面按钮调用dialog

    VUE+element通过按钮调用普通弹框(弹框页面独立出一个dialog页面,非在同一个页面文件里) 代码如下 <el-dialog> <el-button type=" ...

  6. Spring6 当中 获取 Bean 的四种方式

    1. Spring6 当中 获取 Bean 的四种方式 @ 目录 1. Spring6 当中 获取 Bean 的四种方式 每博一文案 1.1 第一种方式:通过构造方法获取 Bean 1.2 第二种方式 ...

  7. 轻量级.net standard微信支付登录Nuget开源库

    我个人编写的库,在我个人网站,小程序等很多地方都在使用中,大家可以搜索小程序 什邡市宅猫君网络工作室 或者到我的网站 store.zhaimaojun.cn 去体验支付和登录效果. 本库主要实现了na ...

  8. 模型微调-书生浦语大模型实战营学习笔记4&大语言模型7

    大语言模型-7.模型微调 书生浦语大模型实战营学习笔记-4.模型微调 本节对应的视频教程为B站链接.笔记对视频的理论部分进行了整理.部分内容参考李宏毅2024春<生成式人工智能导论>和三分 ...

  9. Elasticsdump 数据导入/导出

    目录 一.安装过程 安装NODE 通过npm安装elasticdump 二.数据导出 实操一 实操二 实操三 三.文件导入 一.安装过程 当前工具主要是用来对ES中的数据进行数据导入/导出,以及对数据 ...

  10. 网络协议分析与抓包 TCP/IP UDP等

    学习地址: https://www.bilibili.com/video/BV1hV411U74y?p=4 https://www.bilibili.com/video/BV1S7411R7kF?p= ...