diff --git a/vue2-tutorials/import-script/14-自定义指令_函数式.html b/vue2-tutorials/import-script/14-自定义指令_函数式.html
new file mode 100644
index 0000000..44f01ca
--- /dev/null
+++ b/vue2-tutorials/import-script/14-自定义指令_函数式.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ 自定义指令_函数式
+
+
+
+
当前值：
+ 放大十倍值：
+
+
+
+
+
+
+
+
diff --git a/vue2-tutorials/import-script/14-自定义指令_函数式.md b/vue2-tutorials/import-script/14-自定义指令_函数式.md
new file mode 100644
index 0000000..a0881be
--- /dev/null
+++ b/vue2-tutorials/import-script/14-自定义指令_函数式.md
@@ -0,0 +1,135 @@
+# Vue2 自定义指令全面指南
+
+指令中的作用域时window！！！
+
+## 一、指令类型对比
+
+| 类型 | 语法 | 触发时机 | 适用场景 |
+| ------ | ------------------------------------- | ------------- | ----------- |
+| 函数式 | `directives: { big(el, binding) {} }` | bind + update | 简单DOM操作 |
+| 对象式 | `directives: { fbind: { hooks } }` | 完整生命周期 | 复杂交互 |
+
+## 二、对象式指令详解
+
+### 1. 完整生命周期钩子
+```javascript
+fbind: {
+ // 指令第一次绑定到元素时调用（初始化设置）
+ bind(el, binding) {
+ el.value = binding.value;
+ },
+ // 被绑定元素插入父节点时调用
+ inserted(el, binding) {
+ el.focus(); // 自动获取焦点
+ },
+ // 所在组件更新时调用
+ update(el, binding) {
+ el.value = binding.value;
+ el.focus(); // 值更新后重新聚焦
+ }
+}
+```
+
+### 2. 执行流程示例
+1. 初始化时：`bind` → `inserted`
+2. 数据更新时：`update`
+3. 模板重新解析时：`update`
+
+## 三、最佳实践建议
+
+### 1. 输入框增强指令
+```javascript
+Vue.directive('input-enhanced', {
+ inserted(el) {
+ el.select(); // 自动选中文本
+ },
+ update(el) {
+ // 防抖处理避免频繁触发
+ clearTimeout(el._timer);
+ el._timer = setTimeout(() => {
+ el.select();
+ }, 300);
+ },
+ unbind(el) {
+ // 清理工作
+ clearTimeout(el._timer);
+ }
+});
+```
+
+### 2. 性能优化技巧
+```javascript
+update(el, binding) {
+ if (binding.value !== binding.oldValue) {
+ // 只有值变化时才执行操作
+ el.value = binding.value;
+ }
+}
+```
+
+## 四、高级应用场景
+
+### 1. 权限控制指令
+```javascript
+Vue.directive('permission', {
+ inserted(el, binding) {
+ if (!checkPermission(binding.value)) {
+ el.parentNode.removeChild(el);
+ }
+ }
+});
+```
+使用方式：
+```html
+
+```
+
+### 2. 拖拽指令实现
+```javascript
+Vue.directive('drag', {
+ inserted(el) {
+ el.style.cursor = 'move';
+ el.onmousedown = function(e) {
+ // 拖拽逻辑实现
+ }
+ },
+ unbind(el) {
+ el.onmousedown = null; // 清理事件
+ }
+});
+```
+
+## 五、常见问题解决方案
+
+1. **指令不生效问题排查**
+ - 检查指令名称是否使用kebab-case（短横线）
+ - 确认绑定值是否为响应式数据
+ - 验证是否在正确的生命周期钩子操作DOM
+
+2. **动态指令参数**
+```html
+
+```
+```javascript
+binding.arg // 获取动态参数
+```
+
+3. **多修饰符处理**
+```javascript
+if (binding.modifiers.large) {
+ el.style.fontSize = '20px';
+}
+if (binding.modifiers.red) {
+ el.style.color = 'red';
+}
+```
+
+## 六、与Vue3的对比
+
+| 特性 | Vue2 | Vue3 |
+| --------- | ---------------------- | ------------------- |
+| 钩子名称 | `bind` → `beforeMount` | |
+| | `inserted` → `mounted` | |
+| | 新增`beforeUpdate` | |
+| 参数传递 | 通过`binding`对象 | 更直观的上下文参数 |
+| 组合式API | 无 | 支持setup中使用指令 |