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. WPF 警惕使用 Dispatcher.InvokeShutdown 方法退出应用 将不触发 Application.Exit 事件

    这是一个比较让人困惑的一个点,我一直都以为 Dispatcher.InvokeShutdown 和 Application.Current.Shutdown 是完全等价的.但是后面发现了其实这两者还是 ...

  2. dotnet 使用 TaskTupleAwaiter 同时等待多个任务简化代码写法

    在某些业务逻辑下,需要同时等待多个任务执行完成,才能继续往下执行后续逻辑.等待任务执行的逻辑,大部分情况下需要使用到 Task.WhenAll 方法,代码行数不少.另外,在需要获取多个异步任务的返回值 ...

  3. 2018-2-13-win10-uwp-修改CalendarDatePicker图标颜色

    title author date CreateTime categories win10 uwp 修改CalendarDatePicker图标颜色 lindexi 2018-2-13 17:23:3 ...

  4. Postergresql常见操作

    Postergresql常见操作 1. 安装部署 略 2. 登录数据库 查看版本 ## 以管理员身份 postgres 登陆,然后通过#psql -U postgres#sudo -i -u post ...

  5. js实现打字机效果(完整实例)

    在上篇css高斯模糊的效果基础上用js实现一个打字机效果: 上图: 代码: <!DOCTYPE HTML> <html lang="en-US"> < ...

  6. python3解析FreeSWITCH会议室列表信息

    操作系统 :CentOS 7.6_x64 FreeSWITCH版本 :1.10.9 Python版本:3.9.12 进行FreeSWITCH会议室相关功能开发过程中,会遇到需要解析会议室列表信息并进行 ...

  7. Spring学习一(依赖注入/Bean/注解等)

    1.Spring依赖注入的方式. 2.依赖注入的类型 3.Bean的作用域 4.自动注入 5.使用注解的方式 6.在spring配置文件中引入属性文件 1.Spring依赖注入的方式 平常的java开 ...

  8. ffmpeg7.0常用命令笔记 windows下

    1.多媒体格式转换 ffmpeg -i input.mov -acodec copy -vcodec copy out.mp4 2.从多媒体文件中抽取音频 ffmpeg -i input.mov -v ...

  9. Oracle中ALTER TABLE的五种用法(二)

    首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1 ...

  10. 企业微信群机器人发送消息(三)java端如何控制

    1.先在群里添加机器人,然后获取机器人的webhook地址: 假设webhook是:https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=693a9 ...