# 自定義指令 Example
> 在這個例子中，Vue.js 與一個第三方 jQuery 插件(select2) 整合，通過將它包裝到一個自定義指令中實現。
html
```
<div id="el">
<p>Selected: {{selected}}</p>
<select v-select="selected" :options="options">
<option value="0">default</option>
</select>
</div>
```
js
```
Vue.directive('select', {
twoWay: true,
priority: 1000,
params: ['options'],
bind: function () {
var self = this
$(this.el)
.select2({
data: this.params.options
})
.on('change', function () {
self.set(this.value)
})
},
update: function (value) {
$(this.el).val(value).trigger('change')
},
unbind: function () {
$(this.el).off().select2('destroy')
}
})
var vm = new Vue({
el: '#el',
data: {
selected: 0,
options: [
{ id: 1, text: 'hello' },
{ id: 2, text: 'what' }
]
}
})
```
css
```
select {
min-width: 300px;
}
```
- 教程
- 起步
- 概述
- Vue 實例
- 數據綁定語法
- 計算屬性
- Class 與 Style 綁定
- 條件渲染
- 列表渲染
- 方法與事件處理器
- 表單控件綁定
- 過渡
- 組件
- 深入響應式原理
- 自定義指令
- 自定義過濾器
- 混合
- 插件
- 構建大型應用
- 對比其它框架
- API
- 示例
- Markdown 編輯器 Example
- GitHub 提交 Example
- Firebase + 驗證 Example
- 表格組件 Example
- 樹狀視圖 Example
- SVG 圖形 Example
- 模態組件 Example
- Elastic Header Example
- 自定義指令 Example
- TodoMVC Example
- HackerNews 克隆 Example