BootStrap3.X+html5+CSS3+Vue2.X 项目问题总结

1.Vue.js无法直接使用Bootstrap的tooltip插件的解决方法

1.1 根据Ajax数据动态增加的tooltip在Vue.js中的初始化操作

因为Bootstrap依赖于JQuery库，tooltip需要使用JQuery代码进行初始化

$('[data-toggle="tooltip"]').tooltip()

http://v4-alpha.getbootstrap.com/components/tooltips/

在将框架由JQuery调整为Vue.js以后，发现Bootstrap.js的tooltip无法显示了。
但是依然想使用Bootstrap的CSS文件，因此尝试了下面几种将Bootstrap和Vue进行结合的库：
1.vue-strap Bootstrap components built with Vue.js.
GitHub地址：https://github.com/yuche/vue-strap

但是引入tooltip时浏览器报错：vue.js:465 [Vue warn]: Failed to resolve directive: el
发现是Vue版本的问题。
因为vue-strap要求使用Vue.js 的版本是1.0.8(required ^1.0.8, test with 1.0.8).
但是不想降低vue的版本，因此放弃vue-strap。

2.取而代之尝试了bootstrap-vue
Bootstrap-Vue provides one of the most comprehensive implementations of Bootstrap V4 components and grid system available for Vue.js 2.4+, complete with extensive and automated WAI-ARIA accessibility markup.
Github地址：https://github.com/bootstrap-vue/bootstrap-vue
但是它是基于Bootstrap4的，还是个内测版本，连同bootstrap.css也要换成boostrap-vue.css 也就是boostrap4，和bootstrap3的差距蛮大，因此弃用。

3.使用awesome的一些vue组件库，需要使用npm。

最后上stackoverflow发现了解答，因为原来的Boostrap.js中关于tooltip的代码是在更新DOM以后再插入文档流，由于我的项目中的tooltip是在v-for结构中遍历数据个数之后动态增加的，因此想要初始化所有的tooltip需要将初始化的代码写在增加了所有的包含tooltip的div这个过程之后，这可以通过nextTick在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
nextTick Vue.js官网讲解:https://cn.vuejs.org/v2/api/#Vue-nextTick

Vue.nextTick(function () {
   
$('[data-toggle="tooltip"]').tooltip()
});

tooltip的显示问题就此解决。

1.2关于如何让tooltip动态地显示和隐藏

就是tooltip不需要初始化之后一直是激活状态，而可以用代码动态地将它隐藏。
具体的应用场景是项目中输入框的内容如果不符合要求（比如必填项为空或者格式不正确），当点击了Start按钮后，tooltip显示，内容为显示错误提示；而当用户进行输入以后tooltip提示隐藏或销毁。
这里我写了一个自定义指令，v-tooltip，可以根据传入指令的值（就是错误提示的内容）对tooltip进行显示或者隐藏，可以指定显示方式，是鼠标放到输入框显示还是输入框获取焦点才显示，并且可以通过传入指令的值来动态修改提示的文字内容：

Vue.directive('tooltip', {
    bind: function(el, binding) {
   
        //hover tooltip
        if (binding.arg == "hover" || binding.arg == "focus") {
            Vue.nextTick(function() {
   
                $(el).prop("title", binding.value).tooltip({
                    trigger: binding.arg,
                    html: true
                });
            });
        }
    },
    update: function(el, binding) {
   
        if (binding.value != binding.oldValue) {
            if (binding.value ==