# 自定义指令 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