在vue项目中,使用$报错?

vue项目,已经在index.html中引入了jquery

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-pathology</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link href="/static/libs/annotation/colorpicker.css" rel="stylesheet" type="text/css"/>
    <link href="/static/libs/annotation/bootstrap-switch.css" rel="stylesheet" type="text/css"/>
    <link href="/static/libs/annotation/digitalslidearchive.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/main.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
          integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <title>病理诊断智能服务平台</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="/static/libs/jquery-3.3.1.js"></script>
    <script src="/static/libs/jquery-ui-1.12.1/jquery-ui.js"></script>
  </body>
</html>

在组件中使用的时候还会报错Error in mounted hook: "TypeError: $ is not a function"

  mounted(){
    this.$refs.viewer.style.height=$(window).width()+'px';
    this.$refs.viewer.style.width=$(window).height()+'px';
  },

这个应该怎么修改?

阅读 5.5k
3 个回答

jQuery注册到Vue的原型上去:
1、npm install jquery -S
2、在main.jsimport $ from 'jquery'
3、同时在下方将其注册到原型上去Vue.prototype.$jquery = $,原型注册的名字可以随便取,无冲突便好
4、在页面中使用的时候直接通过this.$jquery便可获取到jQuery

把导入jquery的代码写到前面去,避免因顺序加载造成的组件中使用jq时还未导入。
图片描述

最好是在配合webpack配置依赖, 然后在main.js里引入哈

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题