在 Vue.js 组件中使用纯 JS

Posted

技术标签:

【中文标题】在 Vue.js 组件中使用纯 JS【英文标题】:Using plain JS in Vue.js Component 【发布时间】:2019-07-07 13:56:15 【问题描述】:

所以,我想创建一个导航栏,而不是重新发明***,而是使用一些公共代码来加速我的 MVP 开发。

基本上,我正在使用这个导航条码 - https://codepen.io/PaulVanO/pen/GgGeyE。

但我不确定如何在我的 Vue 代码中实现 jquery 部分(我已经制作了一个组件,复制了 html 和 css,现在只需要在其中集成 jquery 功能。)

这是我需要集成的 Jquery 代码。

$('#toggle').click(function() 
  $(this).toggleClass('active');
  $('#overlay').toggleClass('open');
);

如果有人能帮我完成这件事,将非常感激。

【问题讨论】:

你想把这个脚本放在组件的<script>标签里吗? 您能提供给我们您创建的组件的代码吗?我可以帮你切换导航栏。 How to use a jQuery plugin inside Vue的可能重复 【参考方案1】:

假设您将标记(html 和 css)作为一个组件的一部分,获得添加/删除类的切换非常简单,您只需要有一个方法来切换活动状态和一个数据属性来保持数据。举个例子会更好,所以就这样吧。 在您的组件对象中:


    data() 
        return 
            isActive: false
        
    ,

    methods: 
        toggleMenu()
            this.isActive = !this.isActive
        
    

在你的标记中你需要这个

<div class="button_container" id="toggle" :class="'active': isActive" @click="toggleMenu">
    <span class="top"></span>
    <span class="middle"></span>
    <span class="bottom"></span>
</div>
------------------------------------
<div class="overlay" id="overlay" :class="'open': isActive">
<nav class="overlay-menu">
  <ul>
    <li ><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

这应该会让你继续前进,请注意我使用了 v-on 和 v-bind 的简写形式

编辑: Here's also a link to an updated pen with the whole example

【讨论】:

伙计,你是最棒的!!像魅力一样工作

以上是关于在 Vue.js 组件中使用纯 JS的主要内容,如果未能解决你的问题,请参考以下文章

原生html使用 vue 组件

Vue.js 3 - 将组件插入插槽

为啥在 Vue.js 或 React 中使用组件? [关闭]

vue.js组件(component)

在所有 Vue.js 组件之间共享数据

在 vue.js 组件中渲染子组件