vue cdn方式自定义指令
时间: 2023-07-06 19:26:36 浏览: 204
当使用 Vue.js 的 CDN 方式时,可以通过 `Vue.directive()` 方法来定义自定义指令。以下是一个简单的例子:
首先,在 HTML 文件中引入 Vue.js 和 Bootstrap Select 的 CSS 和 JS:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js Custom Directive</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0/dist/css/bootstrap-select.min.css">
</head>
<body>
<div id="app">
<select v-select2="selected" :options="options"></select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0/dist/js/bootstrap-select.min.js"></script>
<script src="app.js"></script>
</body>
</html>
```
然后,在 `app.js` 文件中定义 Vue.js 应用程序和 `v-select2` 指令:
```js
Vue.directive('select2', {
inserted: function(el, binding, vnode) {
$(el).selectpicker().on("change", function(e) {
vnode.context[binding.expression] = $(e.target).val();
});
},
update: function(el, binding, vnode) {
$(el).selectpicker('val', vnode.context[binding.expression]).trigger('change');
}
});
new Vue({
el: '#app',
data: {
selected: null,
options: ['Option 1', 'Option 2', 'Option 3'],
},
});
```
在这个例子中,`v-select2` 指令的实现与之前的例子相同。然后,我们在 `app.js` 文件中定义了一个 Vue.js 应用程序,并将其挂载到 HTML 文件中的 `#app` 元素上。`data` 选项中的 `selected` 和 `options` 变量用于双向绑定 Bootstrap Select 的值和选项。
最后,我们在 HTML 文件中使用 `v-select2` 指令来绑定 Bootstrap Select 的值和选项。注意,这里的 `v-select2` 指令是通过 `Vue.directive()` 方法定义的。
```html
<select v-select2="selected" :options="options"></select>
```
在这个例子中,`selected` 是一个在 Vue.js 应用程序中定义的变量,它用于双向绑定 Bootstrap Select 的值。`options` 是一个数组,用于渲染 Bootstrap Select 的选项。
阅读全文