vue里面怎么用jquery操作dom 如何在.vue文件中引入外部js
vue里面怎么用jquery操作dom
看到你这个问题，我希望你还没有写很多的代码出来。
首先vue中使用jquery操作dom已经违背了Vue的设计原则，
而你有这种需求，不知道是你对Vue的使用场景不够熟悉还是说确实有jquery操作dom的必要，总之，需要重新审视下Vue jquery技术选型的必要性。
抱歉没回答你想要的。
如何在.vue文件中引入外部js
Vue 的 createElement 方法，简单的封装一个组件解决问题。
解决方法
第一版代码（直接在操作 Dom ）如下：
export default {
mounted() {
const s = document.createElement(script)
s.type = text/javascript
s.src = https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js
document.body.appendChild(s)
},
}
使用 createElement 方法：
export default {
components: {
dingtalk: {
render(createElement) {
return createElement(
script,
{
attrs: {
type: text/javascript,
src: https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js,
},
},
)
},
},
},
}
// 使用在页面中调用
终极方案
通过封装一个组件 remote-js 实现：
export default {
components: {
remote-js: {
render(createElement) {
return createElement(script, { attrs: { type: text/javascript, src: this.src }})
},
props: {
src: { type: String, required: true },
},
},
},
}
使用方法：
怎样在Vue.js中使用jquery插件
安装 jQuery 和 cropper.js
# install jQuery & cropper
$ npm install jquery cropper --save
为jquery和Vue自定义指令配置webpack
为webpack配置添加jquery和Vue自定义指令的映射。
通常webpack已经引入了完整的jquery版本，但还是建议再一次引入一下。
您可以看到Vue的webpack模板已经添加到组件的文件夹中。我通常会添加很多其他文件夹像自定义指令，mixin等等。在这个例子中，我们只添加了自定义指令。
这将帮助我们引入依赖关系而无需知道其确切的路径。这也是有益的在你重构你的应用的时候。你也并不需要管理相对路径。
把下面高亮部分添加到build/webpack.base.conf文件中。
resolve: {
extensions: [, .js, .vue],
fallback: [path.join(__dirname, ../node_modules)],
alias: {
src: path.resolve(__dirname, ../src),
assets: path.resolve(__dirname, ../src/assets),
components: path.resolve(__dirname, ../src/components),
jquery: path.resolve(__dirname, ../node_modules/jquery/src/jquery),
directives: path.resolve(__dirname, ../src/directives)
}
},
在vue里面怎么引入jquery
页面怎么引入vue.js文件的 就怎么引入jquery 在vue项目里正确地引用jquery和jquery-ui的插件 vue-cli webpack全局引入jquery 首先在package.json里加入， dependencies:{ "jquery" : "^2.2.3" }
vuejs和jquery可以混着用吗
Vue 的官方是不建议直接操作 DOM 的，Vue 的用途在于视图和数据的绑定。如果通过JQuery 直接操作 DOM 的话，势必会造成视图数据和模型数据的不匹配，这样 Vue 就失去它存在的意义了。
JQuery 和 VueJS 合理使用并不会造成冲突，因为他们的侧重点不同，VueJS 侧重数据绑定和视图组件，JQuery 侧重异步请求和动画效果。如果使用JQuery VueJS 开发，一定要在 Vue 渲染完所有的 HTML组件之后再通过 JQuery 处理，而使用 JQuery 时应避免直接操作 DOM ，但是应用动画是允许的。
JQuery 与 VueJS 相互配合可以非常高效的完成异步任务，首先通过 JQuery 发出 Ajax 请求，接受到服务端传递的 JSON 数据后，再通过 Vue 将数据绑定到组件上，最后由 JQuery 进行动画处理，整个过程就如行云流水般自然。
说句题外话，Vue 的目的不是取代 JQuery，它是为了解决前后端分离而出现的。如果没有数据变化，只是单纯的样式变化，则没有必要去大费周章进行视图模型的绑定，并且还不利于 SEO 优化。