如何使用Vue和jQuery使移动菜单工作

时间:2018-06-02 15:34:29

标签: javascript vue.js

我正在网站上为我们正在开发的小游戏工作。我们选择使用Materialise模板并填充足够的内容。我想尝试新的东西并想到Vue。我将我的导航栏变成了一个组件,但现在我的汉堡菜单'不再可点击了。

  (function($){
  $(function(){

    $('.sidenav').sidenav();

  }); // end of document ready
})(jQuery); // end of jQuery name space

这段代码在实现Vue之前执行。但现在它没有。 这是因为Vue无法理解这段代码,或者我错过了什么?

Vue.component('mainheader', {
    template: '<div class="lightbrown">\n' +
    '    <nav class="brown" role="navigation">\n' +
    '        <div class="nav-wrapper container"><a id="logo-container" href="index.html" class="brand-logo">Ape of\n' +
    '            Divinity</a>\n' +
    '            <ul class="right hide-on-med-and-down">\n' +
    '                <li><a href="#">Contact</a></li>\n' +
    '            </ul>\n' +
    '            <ul class="right hide-on-med-and-down">\n' +
    '                <li><a href="#">Team</a></li>\n' +
    '            </ul>\n' +
    '            <ul class="right hide-on-med-and-down">\n' +
    '                <li><a href="story.html">Verhaal</a></li>\n' +
    '            </ul>\n' +
    '\n' +
    '            <ul id="nav-mobile" class="sidenav">\n' +
    '                <li><a href="#">Verhaal</a></li>\n' +
    '                <li><a href="#">Team</a></li>\n' +
    '                <li><a href="#">Contact</a></li>\n' +
    '            </ul>\n' +
    '            <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>\n' +
    '        </div>\n' +
    '    </nav>'
});

0 个答案:

没有答案