如何计算网站制作的成本？是否采用扁平化或树形结构会影响费用？

网站制作多少费用,网站扁平化结构和树形结构,包装设计用什么软件,南通网站免费建设Vue3自定义指令 除了默认设置的核心指令#xff08;v-model和v-show#xff09;#xff0c;Vue也允许注册自定义指令。 下面我们注册一个全局指令v-focus#xff0c;该指令的功能是在页面加载时#xff0c;元素获得焦点#xff1a; !--* Author: RealRoad10834252…Vue3自定义指令 除了默认设置的核心指令v-model和v-showVue也允许注册自定义指令。 下面我们注册一个全局指令v-focus该指令的功能是在页面加载时元素获得焦点 !--* Author: RealRoad1083425287qq.com* Date: 2023-04-04 19:26:07* LastEditors: Mei* LastEditTime: 2023-04-04 19:32:33* FilePath: \vscode\v-focus.html* Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. -- !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcvue_doc/vue.global3.js/script /head bodydiv idappp页面加载时input元素自动获取焦点/pinput v-focus/divscriptconst appVue.createApp({})app.directive(focus,{mounted(element){element.focus()}})app.mount(#app)/script /body /html 我们也可以在实例中使用directives选项来注册局部指令这样指令只能在这个实例中使用 !--* Author: RealRoad1083425287qq.com* Date: 2023-04-04 19:26:07* LastEditors: Mei* LastEditTime: 2023-04-04 19:40:52* FilePath: \vscode\v-focus.html* Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. -- !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcvue_doc/vue.global3.js/script /head bodydiv idappp页面加载时input元素自动获取焦点/pinput v-focus/divscriptconst app{data(){return{}},directives:{focus:{mounted(el){el.focus()}}}}// directive(focus,{// mounted(element){// element.focus()// }// })// app.mount(#app)Vue.createApp(app).mount(#app)/script /body /html 钩子 钩子函数 指令定义函数提供了几个钩子函数可选 created在绑定元素的属性或事件监听器被应用之前调用。 beforeMount:指令第一次绑定到元素并且在挂载父组件之前调用 mounted:在绑定元素的父组件被挂载后调用 beforeUpdate:在更新包含组件的VNode之前调用 updated在包含组件的VNode及其子组件的VNode更新后调用。 beforeUNmount当指令与在绑定元素父组件卸载之前时只调用一次。 unmounted当指令与元素解除绑定且父组件已卸载时只调用一次。 import { createApp } from vue const app createApp({})// 注册 app.directive(my-directive, {// 指令是具有一组生命周期的钩子// 在绑定元素的 attribute 或事件监听器被应用之前调用created() {},// 在绑定元素的父组件挂载之前调用beforeMount() {},// 绑定元素的父组件被挂载时调用mounted() {},// 在包含组件的 VNode 更新之前调用beforeUpdate() {},// 在包含组件的 VNode 及其子组件的 VNode 更新之后调用updated() {},// 在绑定元素的父组件卸载之前调用beforeUnmount() {},// 卸载绑定元素的父组件时调用unmounted() {} })// 注册 (功能指令) app.directive(my-directive, () {// 这将被作为 mounted 和 updated 调用 })// getter, 如果已注册则返回指令定义 const myDirective app.directive(my-directive) 钩子函数参数 钩子函数参数由 el el指令绑定到元素。这可用于直接操作DOM binding binding是一个对象包含以下属性 instance使用指令的组件实例 value传递给指令的值。例如v-my-directive11中该值为2 oldValue先前的值仅在beforeUpdate和updated中可用。值是否已更改都可用。 arg参数传递给指令如果有。例如在v-my-directivefoo中arg为“foo”。 modifiers包含修饰符如果有的对象。例如在v-my-directive.foo.bar中修饰对象为{foo:true,bar:true}。 dir一个对象在注册指令时作为参数传递。例如在以下指令中 app.directive(focus, {mounted(el) {el.focus()} }) dir将会是以下对象 {mounted(el) {el.focus()} } vnode 作为el参数收到的真实DOM元素的蓝图。 prevNode 上一个虚拟节点仅在beforeUpdate和updated钩子中可用。 以下实例演示了这些参数的使用 !--* Author: RealRoad1083425287qq.com* Date: 2023-04-04 19:26:07* LastEditors: Mei* LastEditTime: 2023-04-04 20:04:41* FilePath: \vscode\v-focus.html* Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. -- !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcvue_doc/vue.global3.js/script /head bodydiv idappdiv v-mez{name:爱坤,url:www.Ikun.com}/div/divscriptconst appVue.createApp({})// const app{// data(){// return{// }// },// directives:{// focus:{// mounted(el){// el.focus()// }// }// }// }app.directive(mez,(el,binding,vnode){console.log(binding.value.name)console.log(binding.value.url)var sJSON.stringifyel.innerHTMLs(binding.value)})app.mount(#app)// Vue.createApp(app).mount(#app)/script /body /html 有时我们不需要其他钩子函数我们可以简写函数如下格式   Vue.directive(mez, function (el, binding) {// 设置指令的背景颜色el.style.backgroundColor binding.value.color }) 指令函数可接受所有合法的JavaScript表达式以下实例传入了JavaScript对象 继续搞起在原实例基础上加入JavaScript对象改变了背景色 !--* Author: RealRoad1083425287qq.com* Date: 2023-04-04 19:26:07* LastEditors: Mei* LastEditTime: 2023-04-04 20:09:08* FilePath: \vscode\v-focus.html* Description: * * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. -- !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcvue_doc/vue.global3.js/script /head bodydiv idappdiv v-mez{name:爱坤,url:www.Ikun.com,color:yellow}/div/divscriptconst appVue.createApp({})// const app{// data(){// return{// }// },// directives:{// focus:{// mounted(el){// el.focus()// }// }// }// }app.directive(mez,(el,binding,vnode){console.log(binding.value.name)console.log(binding.value.url)var sJSON.stringifyel.innerHTMLbinding.value.nameel.style.backgroundColorbinding.value.color})app.mount(#app)// Vue.createApp(app).mount(#app)/script /body /html