Javascript VUE单文件组件中使用的基础问题

我意识到在中使用类时存在问题。起初，我无法在

.vue组件中工作，但当我在
blade
或
html
文件中使用相同的代码时，它就工作了。然后我注意到一个模式，因为当我尝试在组件内部使用时失败了，起初我认为这是一个错误，但后来我在
blade
文件中使用了相同的代码，它成功了。其他基础类如<代码>行>代码>代码>网格> <代码>和<代码>按钮>代码>工作正常。

有没有人经历过同样的问题？我怎样才能解决这个问题呢

以下是模式的代码：

<a data-open="video" class="button warning" href="">WATCH VIDEO</a>

<div id="video" class="reveal" data-reveal>
    <div class="lead">
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="flex-video">
        <iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>
    </div>
</div>


&时代；

对于轨道，我用基础文档中的基本例子进行测试。

    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    <li class="is-active orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/01.jpg" alt="Space">
      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/02.jpg" alt="Space">
      <figcaption class="orbit-caption">Lets Rocket!</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/03.jpg" alt="Space">
      <figcaption class="orbit-caption">Encapsulating</figcaption>
    </li>
    <li class="orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/04.jpg" alt="Space">
      <figcaption class="orbit-caption">Outta This World</figcaption>
    </li>
  </ul>
  <nav class="orbit-bullets">
    <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
    <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
    <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
    <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>



上一张幻灯片◀︎；
下一张幻灯片▶︎；

太空，最后的边界。


让火箭飞吧！


封装


离开这个世界


第一张幻灯片详细信息。当前幻灯片
第二张幻灯片的细节。
第三张幻灯片详细信息。
第四张幻灯片的细节。
将
vue组件
与
foundation js组件
一起使用时会出现问题，这就是为什么它们没有按说明显示的原因

因此，我在脚本标记中添加了此指令：

Vue.directive('f-orbit', {
    bind: function (el) {
        new Foundation.Orbit($(el))
    },
    unbind: function (el) {
        $(el).foundation.destroy()
    }
})

在我的模板中，我添加了
v-f-orbit
，而不是默认的
data-orbit
：

<div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit>



我希望这将有助于陷入困境的人。
将
vue组件
与
foundation js组件
一起使用时会出现问题，这就是为什么它们没有按说明显示的原因

因此，我在脚本标记中添加了此指令：

Vue.directive('f-orbit', {
    bind: function (el) {
        new Foundation.Orbit($(el))
    },
    unbind: function (el) {
        $(el).foundation.destroy()
    }
})

在我的模板中，我添加了
v-f-orbit
，而不是默认的
data-orbit
：

<div class="contemporary orbit" role="region" aria-label="Contemporary Pictures" v-f-orbit>



我希望这将有助于陷入困境的人。
以上Phillis的回答绝对正确。我只是想再举一个例子，一个
foundation6.4下拉菜单
和
Vue.js2

创建名为
dropdown
的自定义指令，并将
v-dropdown
添加到父元素中，它应该可以工作

        <ul class="dropdown menu" v-dropdown>
          <li>
            <a href="#">Navigate Site &nbsp;<i class="fas fa-chevron-down"></i></a>
            <ul class="menu vertical">
              <li><a href="/auto"><i class="far fa-car"></i>&nbsp; Auto</a></li>
              <li><a href="/residential"><i class="far fa-home"></i>&nbsp; Residential</a></li>
              <li><a href="/commercial"><i class="far fa-building"></i>&nbsp; Commercial</a></li>
              <li><a href="/safety-security"><i class="far fa-building"></i>&nbsp; Safety &amp; Security</a></li>
              <li><a href="/specialty-solutions"><i class="far fa-gem"></i>&nbsp; Specialty Solutions</a></li>
              <li><a href="/dealers"><i class="fal fa-id-badge"></i></i>&nbsp; Dealers</a></li>
              <li><a href="/madicou"><i class="far fa-building"></i>&nbsp; Madico U</a></li>
              <li><a href="/about"><i class="far fa-building"></i>&nbsp; Company</a></li>
            </ul>
          </li>
        </ul>

Vue.directive('dropdown', {
  bind: function (el) {
    new Foundation.DropdownMenu($(el));
  }
});















Vue.指令（“下拉列表”{
绑定：函数（el）{
新基础.DROPPDRON菜单（$（EL））；
}
});
菲利普的上述回答绝对正确。我只是想再举一个例子，一个
foundation6.4下拉菜单
和
Vue.js2

创建名为
dropdown
的自定义指令，并将
v-dropdown
添加到父元素中，它应该可以工作

        <ul class="dropdown menu" v-dropdown>
          <li>
            <a href="#">Navigate Site &nbsp;<i class="fas fa-chevron-down"></i></a>
            <ul class="menu vertical">
              <li><a href="/auto"><i class="far fa-car"></i>&nbsp; Auto</a></li>
              <li><a href="/residential"><i class="far fa-home"></i>&nbsp; Residential</a></li>
              <li><a href="/commercial"><i class="far fa-building"></i>&nbsp; Commercial</a></li>
              <li><a href="/safety-security"><i class="far fa-building"></i>&nbsp; Safety &amp; Security</a></li>
              <li><a href="/specialty-solutions"><i class="far fa-gem"></i>&nbsp; Specialty Solutions</a></li>
              <li><a href="/dealers"><i class="fal fa-id-badge"></i></i>&nbsp; Dealers</a></li>
              <li><a href="/madicou"><i class="far fa-building"></i>&nbsp; Madico U</a></li>
              <li><a href="/about"><i class="far fa-building"></i>&nbsp; Company</a></li>
            </ul>
          </li>
        </ul>

Vue.directive('dropdown', {
  bind: function (el) {
    new Foundation.DropdownMenu($(el));
  }
});















Vue.指令（“下拉列表”{
绑定：函数（el）{
新基础.DROPPDRON菜单（$（EL））；
}
});
你能创建一个JSFIDLE吗，你可以使用它，因为我认为它不会有多大帮助，因为问题不在于代码。它会有帮助，人们可以重现错误并找出解决方法。你能创建一个JSFIDLE吗，你可以使用它，因为我认为它不会有多大帮助，因为问题不在于代码，它会有帮助，人们可以重现错误并找到如何修复它。