Vue页面初始化javascript方法失效

Question

                        页面标签
                            <ul class="tab-title">
                                <li class="tab-nav-item"><i class="iconfont icon-liebiao"></i></li>
                                <li class="tab-nav-item"><i class="iconfont icon-tubiao"></i></li>
                                <li class="tab-nav-item tab-this"><i class="iconfont icon-liebiaomoshi"></i></li>
                            </ul>

这边写的我基本看不懂,页面调试大概看出来像是给上面li标签class内赋值
使用的是Vue页面,页面第一次加载完后上面li标签点不动,需要刷新页面才可以使用,如何优化
!function(window) {
    "use strict";

    var doc = window.document
      , ydui = {};

    $(window).on('load', function() {});

    var util = ydui.util = {

        parseOptions: function(string) {},

        pageScroll: function() {}(),

        localStorage: function() {}(),

        sessionStorage: function() {}(),

        serialize: function(value) {},

        deserialize: function(value) {}
    };

    function storage(ls) {}

    $.fn.emulateTransitionEnd = function(duration) {}
    ;

    if (typeof define === 'function') {
        define(ydui);
    } else {
        window.YDUI = ydui;
    }

}(window);

!function(window) {
    "use strict";

    function Tab(element, options) {
        this.$element = $(element);
        this.options = $.extend({}, Tab.DEFAULTS, options || {});
        this.init();
        this.bindEvent();
        this.transitioning = false;
    }

    Tab.TRANSITION_DURATION = 150;

    Tab.DEFAULTS = {
        nav: '.tab-nav-item',
        panel: '.tab-panel-item',
        activeClass: 'tab-this'
    };

    Tab.prototype.init = function() {
        var _this = this
          , $element = _this.$element;

        _this.$nav = $element.find(_this.options.nav);
        _this.$panel = $element.find(_this.options.panel);
    }
    ;

    Tab.prototype.bindEvent = function() {
        var _this = this;
        _this.$nav.each(function(e) {
            $(this).on('click.ydui.tab', function() {
                _this.open(e);
            });
        });
    }
    ;

    Tab.prototype.open = function(index) {
        var _this = this;

        index = typeof index == 'number' ? index : _this.$nav.filter(index).index();

        var $curNav = _this.$nav.eq(index);

        _this.active($curNav, _this.$nav);

        _this.active(_this.$panel.eq(index), _this.$panel, function() {
            $curNav.trigger({
                type: 'opened.ydui.tab',
                index: index
            });
            _this.transitioning = false;
        });
    }
    ;

    Tab.prototype.active = function($element, $container, callback) {
        var _this = this
          , activeClass = _this.options.activeClass;

        var $avtive = $container.filter('.' + activeClass);

        function next() {
            typeof callback == 'function' && callback();
        }

        $element.one('webkitTransitionEnd', next).emulateTransitionEnd(Tab.TRANSITION_DURATION);

        $avtive.removeClass(activeClass);
        $element.addClass(activeClass);
    }
    ;

    function Plugin(option) {
        var args = Array.prototype.slice.call(arguments, 1);

        return this.each(function() {
            var target = this
              , $this = $(target)
              , tab = $this.data('ydui.tab');

            if (!tab) {
                $this.data('ydui.tab', (tab = new Tab(target,option)));
            }

            if (typeof option == 'string') {
                tab[option] && tab[option].apply(tab, args);
            }
        });
    }

    $(window).on('load.ydui.tab', function() {
        $('[data-ydui-tab]').each(function() {
            var $this = $(this);
            $this.tab(window.YDUI.util.parseOptions($this.data('ydui-tab')));
        });
    });

    $.fn.tab = Plugin;

}(window);

Answer 1

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7471087
• 这篇博客也不错, 你可以看下Vue渐进式JavaScript框架
• 除此之外, 这篇博客: Vue简介中的 Vue是一个渐进式的javascript框架 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  
• 1. 它的作者是 尤雨溪
  2. 发布于 Vue 1.x 在2014
     Vue 2.x 在2016
  3. Vue是一个个人项目【React是facebook的团队项目】
  4. Vue是单数据流的框架
  5. Vue是一个MVVM框架，
     MVVM是MVC的衍生架构
     Model View ViewModel
     View的变化会反应到ViewModel上来，反之同理。

  MVC是一个软件架构思维，将一个软件分为三个部分
  M Model 数据
  V View 视图
  C Controller 控制器

  

• 您还可以看一下 李游Leo老师的JavaScript - Vue经典教程系列课程中的 Vue的组件详解 - 子级传递交互小节, 巩固相关知识点