在 vue 中使用 semantic-ui

Vue 是一个很好呀的 MVVM 框架，我最近在一个内部使用的管理后台初次使用。而 semantic-ui 则是 一个比较美观全面的 css 框架，也是我比较偏好使用的。所以，在这次重构管理后台时，这两者就被我选择使用。PS： 服务器端用的是 Django， 也是第一次使用。

semantic-ui 大部分情况下使用其 css 部分是没问题的，如 button, table 等，直接套用对应的 css 样式即可。但是对于某些需要 js 初始化的控件，如 dropdown, popup 等，都需要调用对应的函数，如

$('.ui.dropdown')
  .dropdown()
;

那么对于 Vue 中动态生成的控件要怎么处理呢？ 我们希望在控件加入到 dom 后能够调用对应的 semnatic-ui 初始化函数，但是由于 Vue 的插入是自动完成的，我们不好判断时机，好在 Vue 提供了 自定义指令，我们可以按照下面的方法来做：

首先假设我们的 html 是：

<div id="main"></div>

然后 Vue 实例为：

let data = {
    data: ["Male", "Female"]
}
new Vue({
    el: "#main",
    data,
    template: `
    <select class="ui dropdown">
        <option value="">Gender</option>
        <option v-for="(v, k) in data" :value="k">{{ v }}</option>
    </select>
    `
})

这里我们以 dropdown 控件为例，按照以往的做法，我们此时可以调用$(".ui.dropdown").dropdown()来处理，但是对于 Vue 则可以使用自定义指令。假设我们定义一个指令名为v-sudropdown， 然后将其加到 select 中，于是变为<select class="ui dropdown" v-sudropdown>，那这个 directive 该怎么写呢：

Vue.directive ("sudropdown", {
        inserted: el => $(el).dropdown({})
    })

其中，inserted 是一个钩子函数，一旦带有这个 directive 的元素被插入到 dom 时，这个钩子函数会被调用，从而完成我们的初始化操作。这样 vue 和 semantic-ui 就能完美共存了。