如何制作企业内部网站,网站的动画广告横幅怎么做的,如何做百度推广,wordpress 分类下文章在生活中#xff0c;重复的机械劳动会消耗我们的时间和精力#xff0c;提高生产成本#xff0c;降低工作效率。同样#xff0c;在代码世界中#xff0c;编写重复的代码会导致代码的冗余#xff0c;页面性能的下降以及后期维护成本的增加。由此可见将重复的事情复用起来是…在生活中重复的机械劳动会消耗我们的时间和精力提高生产成本降低工作效率。同样在代码世界中编写重复的代码会导致代码的冗余页面性能的下降以及后期维护成本的增加。由此可见将重复的事情复用起来是提高生产效率、降低维护成本的不二之选。
在 Vue 项目中每一个页面都可以看作是由大大小小的模块构成的即便是一行代码、一个函数、一个组件都可以看作是一个个自由的模块。那么提高代码的复用性的关键便在于编写可复用的模块也就是编写可复用的代码、函数和组件等。
一个简单的例子
let person [];for (let i 0; i data.obj.items.length; i) {person.push({name: data.obj.items[i].name,age: data.obj.items[i].age});
}
不知道上方代码给你的第一印象是什么总之给我的印象是糟糕的因为出现了重复性的代码片段 data.obj.items可能这样的代码在我们团队开发中随处可见这也说明了重复编码现象其实无处不在。
面对自己编写的代码我们应该保持一颗去重的心发现重复的地方就相当于找到了可以复用的模块。在不复用的情况下上述代码一旦需要修改变量 items 为 lists那么我们就得修改 3 处地方不知不觉就增加了维护成本。而到时候往往修改你代码的人并不是你自己所以对自己好点对他人也会好点。复用后的代码如下
let person [];
let values data.obj.items;for (let i 0; i values.length; i) {person.push({name: values[i].name,age: values[i].age});
}
我们通过将 data.obj.items 的值赋值给变量 values 来实现了复用此时修改 items 为 lists 的话我们只需修改一处地方即可不管是维护成本还是代码可读性上复用的优势都显而易见。
封装成一个函数
除了使用变量的赋值缓存使用来解决数据的重复读取外我们在开发过程中重复性更多的也许是功能点的重复比如
tempaltedivinput typetext v-modelstr1input typetext v-modelstr2div{{ str1.slice(1).toUpperCase() }}/divdiv{{ str2.slice(1).toUpperCase() }}/div/div
/template
上述代码的重复功能点在于截取输入框中第二个字符开始到最后的值并把它们转化成大写字母像这样很简单的操作虽然重复使用也不会出现太大的问题但是如果是代码量较多的操作呢重复书写相同功能的代码是一种不经过大脑思考的行为我们需要对其进行优化这里我们可以把功能点封装成一个函数
export default {methods: {sliceUpperCase(val) {return val.slice(1).toUpperCase()}}
}
如此我们只要在用到该方法的地方调用即可将值传入其中并返回新值。
当然像在双花括号插值和 v-bind 表达式中重复的功能点我们可以封装成过滤器 仅做了解在 Vue 3 中过滤器被移除了使用方法或计算属性可以代替它。 // 单文件组件注册过滤器
filters: {sliceUpperCase(val) {return val.slice(1).toUpperCase()}
}// 全局注册过滤器
Vue.filter(sliceUpperCase, function (val) {return val.slice(1).toUpperCase()
})
然后在 html 中使用“管道”符进行过滤
div{{ str1 | sliceUpperCase }}/div
div{{ str2 | sliceUpperCase }}/div
封装成一个组件
相比较于函数的封装规模更大一点的便是组件的封装组件包含了模板、脚本以及样式的代码在实际开发中组件的使用频率也是非常大的我们项目中的每一个页面其实都可以看作是一个父组件其可以包含很多子组件子组件通过接收父组件的值来渲染页面父组件通过响应子组件的回调来触发事件。
封装一个组件主要包含两种方式一种是最常见的整体封装用户通过改变数据源来呈现不同的页面状态代码结构不可定制化。例如
divmy-component data我是父组件传入子组件的数据/my-component
/div
另一种便是自定义封装也就是插槽(slot)我们可以开放一部分槽位给父组件使其能够进行一定程度的定制化例如
divmy-component data我是父组件传入子组件的数据template slotcustomizespan这是定制化的数据/span/template/my-component
/div
在 myComponent 组件中我们便可以接收对应的 slot
div classcontainerspan{{ data }}/spanslot namecustomize/slot
div
这里我们通过定义 slot 标签的 name 值为 customize 来接收父组件在使用该组件时在 template 标签上定义的 slotcustomize 中的代码不同父组件可以定制不同的 slot 代码来实现差异化的插槽。最终渲染出来的代码如下
divdiv classcontainerspan我是父组件传入子组件的数据/spanspan这是定制化的数据/span/div
/div
这样我们就完成了一个小型组件的封装将共用代码封装到组件中去页面需要引入的时候直接使用 import 并进行相应注册即可当然你也可以进行全局的引入
import myComponent from ../myComponent.vue// 全局
Vue.component(my-component, myComponent)
写了一个完整的例题方便大家理解
我们将创建一个名为 BaseButton.vue 的按钮组件该组件支持自定义文本、颜色和点击事件。
在 Vue 项目中创建一个新的组件文件 BaseButton.vue
templatebutton:classbuttonClassclickhandleClick:style{ backgroundColor: bgColor, color: textColor }slot{{ text }}/slot/button
/templatescript
export default {name: BaseButton,props: {text: {type: String,default: Button,},bgColor: {type: String,default: #42b983,},textColor: {type: String,default: #ffffff,},},computed: {buttonClass() {return {base-button: true,base-button--primary: this.bgColor #42b983,base-button--secondary: this.bgColor #35495e,};},},methods: {handleClick(event) {this.$emit(click, event);},},
};
/scriptstyle scoped
.base-button {padding: 10px 20px;border: none;border-radius: 5px;font-size: 16px;cursor: pointer;transition: background-color 0.3s;
}.base-button:hover {opacity: 0.9;
}
/style
解释一下buttonClass 计算属性的作用 base-button: true: 这个条目保证了所有按钮都将始终拥有 base-button 类。 base-button--primary: this.bgColor #42b983: 当 bgColor 的值为 #42b983 时计算属性返回 true因此将 base-button--primary 类添加到按钮的类列表中下面的同理。
Vue 会将 buttonClass 的返回值解析为按钮的 CSS 类。这样根据 bgColor 的变化按钮的外观可以动态调整以便于根据不同的背景颜色应用不同的样式。这种方法使得组件更加灵活、可维护且计算属性会自动缓存只有在依赖的 bgColor 属性发生变化时才会重新计算从而提高性能。 在你的主组件或其他组件中使用 BaseButton 组件。假设我们在 App.vue 中使用它
templatediv idappBaseButtontextPrimary ButtonbgColor#42b983textColor#ffffffclickonButtonClick/BaseButtontextSecondary ButtonbgColor#35495etextColor#ffffffclickonButtonClickCustom Slot Button/BaseButton/div
/templatescript
import BaseButton from ./components/BaseButton.vue;export default {name: App,components: {BaseButton,},methods: {onButtonClick(event) {console.log(Button clicked!, event);},},
};
/scriptstyle
#app {text-align: center;margin: 20px;
}
/style 属性BaseButton 组件接收三个 props text按钮上的文本默认为Button。bgColor按钮的背景颜色默认为 #42b983。textColor按钮的文本颜色默认为 #ffffff。
封装成一个插件
在某些情况下我们封装的内容可能不需要使用者对其内部代码结构进行了解其只需要熟悉我们提供出来的相应方法和 api 即可这需要我们更系统性的将公用部分逻辑封装成插件来为项目添加全局功能比如常见的 loading 功能、弹框功能等。
Vue 提供给了我们一个 install 方法来编写插件使用该方法中的第一个 Vue 构造器参数可以为项目添加全局方法、资源、选项等。比如我们可以给组件添加一个简单的全局调用方法来实现插件的编写
/* toast.js */
import ToastComponent from ./toast.vue // 引入组件let $vmexport default { install(Vue, options) {// 判断实例是否存在if (!$vm) { const ToastPlugin Vue.extend(ToastComponent); // 创建一个“扩展实例构造器”// 创建 $vm 实例$vm new ToastPlugin({ el: document.createElement(div) // 声明挂载元素 }); document.body.appendChild($vm.$el); // 把 toast 组件的 DOM 添加到 body 里} // 给 toast 设置自定义文案和时间let toast (text, duration options.duration || 3000) {$vm.text text;$vm.duration duration;// 在指定 duration 之后让 toast 消失setTimeout(() {$vm.isShow false; }, $vm.duration);}// 判断 Vue.$toast 是否存在if (!Vue.$toast) { Vue.$toast toast; } Vue.prototype.$toast Vue.$toast; // 全局添加 $toast 事件}
}
成功编写完插件的 JS 脚本后我们在入口文件中需要通过 Vue.use() 来注册一下该插件
import Toast from /widgets/toast/toast.jsVue.use(Toast); // 注册 Toast
最后我们在需要调用它的地方直接传入配置项使用即可比如
this.$toast(Hello World, 2000);
当然你也可以不使用 install 方法来编写插件直接采用导出一个封装好的实例方法并将其挂载到 Vue 的原型链上来实现相同的功能。 拓展 1.在 Vue 中如何添加全局自定义指令
1. 创建全局自定义指令
全局自定义指令可以通过 Vue 实例的 directive 方法来注册。下面是一个示例展示如何创建一个简单的自定义指令该指令用于改变元素的背景颜色。
示例创建一个 v-color 指令
// main.js
import Vue from vue;
import App from ./App.vue;// 注册全局自定义指令
Vue.directive(color, {// 当被绑定的元素插入到 DOM 中时调用inserted(el, binding) {el.style.backgroundColor binding.value; // 设置背景颜色}
});new Vue({render: h h(App),
}).$mount(#app);
在上面的代码中我们创建了一个名为 v-color 的指令。当这个指令被绑定到一个元素时它会将该元素的背景颜色设置为传入的值。
2. 在组件中使用自定义指令
一旦我们定义了全局指令就可以在任何 Vue 组件中使用它。以下是如何在一个组件中使用 v-color 指令的示例
templatedivh1 v-colorlightblue这是一个标题/h1p v-colorlightgreen这是一个段落/p/div
/templatescript
export default {name: MyComponent
}
/scriptstyle
/* 样式可以在这里定义 */
/style
3. 自定义指令的钩子函数
全局自定义指令有以下几个钩子函数可以用于不同的生命周期阶段
bind(el, binding, vnode): 指令第一次绑定到元素时调用只调用一次。inserted(el, binding, vnode): 被绑定元素插入父节点时调用。update(el, binding, vnode, oldVnode): 被绑定元素所在的 VNode 更新时调用。componentUpdated(el, binding, vnode, oldVnode): 指令所在组件的 VNode 及其子 VNode 更新时调用。unbind(el, binding, vnode): 只调用一次指令与元素解绑时调用。
示例使用更多的钩子函数
下面是一个更复杂的自定义指令示例演示了如何使用多个钩子
// main.js
Vue.directive(highlight, {// 绑定时bind(el) {el.style.transition background-color 0.5s;},// 插入时inserted(el) {el.style.backgroundColor yellow;},// 更新时update(el, binding) {el.style.backgroundColor binding.value;},// 解绑时unbind(el) {el.style.backgroundColor ;}
});
在这个例子中v-highlight 指令会在绑定时设置过渡效果并在元素插入时将背景色设置为黄色。它还会在更新时根据传入值改变背景色并在解除绑定时清除样式。
4. 使用指令修饰符
指令也可以使用修饰符如 .stop, .prevent, .self 等以提供更灵活的功能。例如如果你希望在点击元素时阻止事件冒泡可以使用 v-on:click.stop。 2.在 vue 路由切换时如何全局隐藏某个插件
在路由切换时你可以在 beforeEach 或 beforeResolve 钩子中调用隐藏 Toast 的方法。
下面是一个示例展示如何在 Vue Router 中实现这一功能。
1. 创建 Toast 插件
这里是一个简单的示例
// toast.js
let $vm;const ToastPlugin {install(Vue) {if (!$vm) {const ToastComponent Vue.extend({data() {return {isShow: false,text: ,duration: 3000};},template: div v-ifisShow classtoast{{ text }}/div,methods: {show(text, duration this.duration) {this.text text;this.isShow true;setTimeout(() {this.isShow false;}, duration);},hide() {this.isShow false;}}});$vm new ToastComponent({ el: document.createElement(div) });document.body.appendChild($vm.$el);}Vue.prototype.$toast {show(text, duration) {$vm.show(text, duration);},hide() {$vm.hide();}};}
};export default ToastPlugin;
2. 在 Vue Router 中使用导航守卫
接下来设置 Vue Router 并在路由切换时调用 Toast 的 hide 方法
// router.js
import Vue from vue;
import Router from vue-router;
import ToastPlugin from ./toast; // 导入 Toast 插件Vue.use(Router);
Vue.use(ToastPlugin); // 使用 Toast 插件const routes [// 定义你的路由
];const router new Router({routes
});// 在路由切换前隐藏 Toast
router.beforeEach((to, from, next) {// 调用 Toast 的 hide 方法以隐藏 ToastVue.prototype.$toast.hide();next(); // 继续路由导航
});export default router;
3. 在主入口文件中整合
将路由和 Toast 插件整合到主入口文件中
// main.js
import Vue from vue;
import App from ./App.vue;
import router from ./router; // 导入路由Vue.config.productionTip false;new Vue({router,render: h h(App),
}).$mount(#app);
4. 使用 Toast 插件
在你的组件中使用 Toast 插件
templatedivbutton clickshowToast显示 Toast/button/div
/templatescript
export default {methods: {showToast() {this.$toast.show(这是一个 Toast 提示, 2000);}}
}
/script
5. 完整效果
通过以上步骤当你在应用中的任意位置使用 $toast.show 方法时Toast 会显示。在每次路由切换时beforeEach 钩子会调用 $toast.hide 方法从而确保在新路由加载时 Toast 被隐藏。 3.如何实现一个表单验证插件需要运用到哪些知识
需要掌握以下知识点
Vue 的插件机制理解如何创建和使用 Vue 插件。Vue 的混入Mixin使用混入将验证逻辑添加到组件中。Vue 的数据响应性使用 this.$set 来确保响应式地更新错误信息。事件处理处理表单输入和提交事件。条件渲染使用 v-if 条件渲染错误信息。
1. 创建基本的插件结构
目录结构示例
/form-validator├── index.js // 插件入口├── validator.js // 验证逻辑└── styles.css // 样式可选
2. 编写验证逻辑
创建一个 validator.js 文件定义你的验证规则和逻辑。
// validator.js
const validators {required(value) {return !!value || 该字段是必填的;},email(value) {const re /^[^\s][^\s]\.[^\s]$/;return re.test(value) || 请输入有效的邮箱地址;},minLength(min) {return value {return value.length min || 至少需要 ${min} 个字符;};},maxLength(max) {return value {return value.length max || 最多 ${max} 个字符;};},// 可以添加更多验证规则
};export default validators;
3. 创建插件入口文件
在 index.js 中定义插件的 API 和如何与 Vue 组件进行交互。
// index.js
import validators from ./validator;const FormValidator {install(Vue) {Vue.mixin({data() {return {formErrors: {}, // 存储表单错误信息};},methods: {validateField(fieldName, value, rules) {const errors [];rules.forEach(rule {const validate typeof rule function ? rule : validators[rule];const result validate(value);if (typeof result string) {errors.push(result);}});this.$set(this.formErrors, fieldName, errors);},validateForm(fields) {this.formErrors {};let isValid true;for (const field in fields) {const { value, rules } fields[field];this.validateField(field, value, rules);if (this.formErrors[field].length) {isValid false;}}return isValid;},},});},
};export default FormValidator;
4. 使用插件
在你的 Vue 组件中使用这个插件。确保在你的主入口文件中安装该插件。
// main.js
import Vue from vue;
import App from ./App.vue;
import FormValidator from ./form-validator;Vue.use(FormValidator);new Vue({render: h h(App),
}).$mount(#app);
5. 示例组件
创建一个示例组件展示如何使用这个表单验证插件。
templateform submit.preventhandleSubmitdivlabel foremail邮箱:/labelinput typetext v-modelemail blurvalidateField(email, email, [required, email]) /span v-ifformErrors.email.length{{ formErrors.email[0] }}/span/divdivlabel forpassword密码:/labelinput typepassword v-modelpassword blurvalidateField(password, password, [minLength(6)]) /span v-ifformErrors.password.length{{ formErrors.password[0] }}/span/divbutton typesubmit提交/button/form
/templatescript
export default {data() {return {email: ,password: ,};},methods: {handleSubmit() {const isValid this.validateForm({email: { value: this.email, rules: [required, email] },password: { value: this.password, rules: [this.minLength(6)] },});if (isValid) {// 表单有效执行提交逻辑alert(表单提交成功);}},},
};
/scriptstyle
/* 添加一些样式 */
/style
