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';
},
这个应该怎么修改?
把
jQuery
注册到Vue的原型上去:1、
npm install jquery -S
2、在
main.js
中import $ from 'jquery'
3、同时在下方将其注册到原型上去
Vue.prototype.$jquery = $
,原型注册的名字可以随便取,无冲突便好4、在页面中使用的时候直接通过
this.$jquery
便可获取到jQuery