1.VUE3 之 组件传参
2.Vue修饰符,码横修饰符有哪些有什么应用场景
3.《精通Vue.js》导读-Vue组件的线转命名规则
4.vueå®ä¹å
¨å±ç»ä»¶(vue30å
¨å±ç»ä»¶)
VUE3 之 组件传参
韦奇定律提醒我们,外界的驼峰言论容易使我们动摇和怀疑,最终迷失自我。码横因此,线转坚定信念、驼峰源码时代公司好吗相信自己,码横不受外界环境影响,线转才能取得胜利。驼峰
接下来,码横让我们探讨Vue中的线转组件传参。通过实例,驼峰我们在主组件的码横test组件中添加了属性content,并在test组件中通过props接收content属性,线转将其使用在模板中。驼峰
在第二个例子中,我们改进了组件的kuq签到源码属性绑定,使其更具灵活性。通过使用绑定知识,将属性内容与数据中的num绑定,使得参数不再固定。
接下来,我们将探讨如何向组件传递多个参数。通过在组件标签中多添加属性并使用props接收,可以轻松传递多个参数。然而,当参数数量增多时,传递方式显得不够优雅。
为了解决这个问题,我们封装参数到一个对象中,并使用v-bind传递给组件。这种改进使得组件接收参数更加简洁。
进一步,ctf逆向源码我们还可以通过在主组件中使用对象方式传递参数,同时在子组件中也使用对象方式接收,使用时通过参数名引用。这种方法在编程习惯上更符合一般规则。
当参数名称由多个单词组成时,遵循官方建议使用小写加'-'的命名方式。接收时则使用驼峰命名法,避免混淆。
值得注意的是,直接修改父组件传递给子组件的参数可能会导致错误。为了解决这一问题,我们可以在子组件内部创建一个自己的数据变量,并将父组件传递的参数作为初始值,随后对这个数据变量进行操作。
综上所述,我们讨论了Vue3组件传参的未来血流源码相关知识,希望对大家的工作有所帮助。下一节我们将继续探索组件的相关内容,敬请期待。感谢大家的阅读,期待您的点赞、评论、转发和关注。
欢迎关注追风人聊Java,每天更新Java干货。
关注追风人聊Java,获取更多编程知识。
Vue修饰符,修饰符有哪些有什么应用场景
在程序开发领域,修饰符用于限定类型以及类型成员的声明,Vue中则利用修饰符简化了DOM事件处理,让我们能更专注于业务逻辑。spark源码学习Vue中指令的修饰符以句点“.”作为后缀,指明特殊绑定方式。值得注意的是,"passive"和"prevent"不能同时使用,否则"prevent"作用将被忽略,浏览器还会提示警告。Vue中的修饰符主要分为五类:
表单修饰符中,lazy指在光标离开输入框后同步值;trim自动过滤首空格,保留中间空格;number自动将输入值转换为数值类型,但无法转换时返回原值。事件修饰符包括stop阻止事件冒泡,prevent阻止默认行为,self只响应自身触发事件,once单次触发,capture从顶层开始触发事件,passive用于优化移动端滚动事件,native让组件监听原生HTML事件,避免只监听自定义事件。鼠标按钮修饰符如left、right、middle限制响应特定鼠标点击,键盘修饰符如keyup、keydown处理键盘事件,使用keyCode或别名。
v-bind修饰符用于属性操作,async实现双向绑定,camel将命名转换为驼峰式。通过这些修饰符,我们可以更高效地处理事件、键盘输入等场景,提高开发效率。例如,冒泡事件应用于多层嵌套结构中,系统修饰键限制在按下特定按键时触发事件监听器,自定义按键别名则便于快捷操作。
应用场景包括嵌套结构中的事件处理、特定按键触发事件、自定义键盘事件别名等。在Vue中,通过事件修饰符可以优化代码结构,提高响应效率。同时,Vue还提供了配置选项允许自定义按键修饰符别名,进一步增强灵活性。
在Vue开发中,理解并正确使用修饰符能够有效提升代码可读性和开发效率。同时,Vue生态的社区支持也非常重要,通过加入前端小白交流群,分享学习资源、项目练习和互相监督,能够加速个人技术成长。
《精通Vue.js》导读-Vue组件的命名规则
命名规则是Vue组件开发中不可忽视的基础。给组件起名,如同给孩子取名,既需考虑其独特性,又得遵守一定的规范,便于理解和维护。
Vue组件有两种命名方式:lower-kebab-case和upper-camel-case。lower-kebab-case要求组件名全为小写,单词间用短横线分隔。例如,“my-component-name”。upper-camel-case则将首字母大写,其余字母小写,形成驼峰式命名,如“MyComponentName”。组件模板的定义位置决定了引用方式,外置模板使用lower-kebab-case,而template选项中的模板则支持upper-camel-case或lower-kebab-case。
在引用组件时,根据模板类型选择相应的命名规则。外置模板中,组件名必须遵循lower-kebab-case规则,以避免与HTML元素冲突。而在父组件的template选项中,可灵活选择upper-camel-case或lower-kebab-case。
组件属性和事件的命名遵循lower-kebab-case或lower-camel-case规则。lower-camel-case要求首词小写,后续词首字母大写,如“nameOfStudent”。lower-kebab-case则使用连字符分隔单词,如“name-of-student”。组件的属性和事件在模板中的引用,需遵循表2所示的命名规则。
综上,掌握Vue组件的命名规则,是编写清晰、可维护Vue代码的关键。这不仅提升了代码的可读性,也便于团队协作和后续维护。
vueå®ä¹å ¨å±ç»ä»¶(vueå ¨å±ç»ä»¶)
vueèªå®ä¹å ¨å±æ¹æ³,å¨ç»ä»¶éé¢ç使ç¨ä»ç»
å¨main.jséè¿è¡å ¨å±æ³¨å
Vue.prototype.funcName
=
function
(){ }
å¨ææç»ä»¶éå¯è°ç¨
this.
funcName();
以ä¸è¿ç¯vue
èªå®ä¹å ¨å±æ¹æ³,å¨ç»ä»¶éé¢ç使ç¨ä»ç»å°±æ¯å°ç¼å享ç»å¤§å®¶çå ¨é¨å 容äºï¼å¸æè½ç»å¤§å®¶ä¸ä¸ªåèï¼ä¹å¸æ大家å¤å¤æ¯æèæ¬ä¹å®¶ã
æ¨å¯è½æå ´è¶£çæç« :æµ è°vueèªå®ä¹å ¨å±ç»ä»¶å¹¶éè¿å ¨å±æ¹æ³
Vue.use()
使ç¨è¯¥ç»ä»¶èªå®ä¹vueå ¨å±ç»ä»¶use使ç¨ãvuexç使ç¨è¯¦è§£è¯¦è§£Vue.useèªå®ä¹èªå·±çå ¨å±ç»ä»¶Vueç»ä»¶ä¹å ¨å±ç»ä»¶ä¸å±é¨ç»ä»¶ç使ç¨è¯¦è§£Vueä¸èªå®ä¹å ¨å±ç»ä»¶çå®ç°æ¹æ³vue.jså é¨èªå®ä¹æ令ä¸å ¨å±èªå®ä¹æ令çå®ç°è¯¦è§£ï¼å©ç¨directiveï¼
vueå¼å ¥å ¨å±ç»ä»¶/å±é¨å¼å ¥
ï¼ä¸ï¼å ¨å±ç»ä»¶å¼å ¥
1ï¼æ°å»ºdemo.vue
2,å¨main.jséé¢å¼å ¥
//å¼å ¥å ¨å±ç»ä»¶
importcommonfrom'./view/tshy/official/common'
Vue.component('common',common)
3ï¼å¨éè¦ç¨çç»ä»¶å¼å ¥
common/common
ï¼äºï¼ï¼ç»ä»¶å¼å ¥
importMyComponentfrom'./view/tshy/official/common';
components:{ MyComponent}
vueè®°å½---å ¨å±ç»ä»¶ç使ç¨éè¿Vue.component()è¿è¡å ¨å±ç»ä»¶ç注åï¼å¦ä¸æ示ï¼
éè¿å ¨å±æ³¨åä¹åçç»ä»¶ï¼å³å¯å¨é¡¹ç®ä¸ä»»æç»ä»¶ä¸ä½¿ç¨ï¼æ éåè¿è¡å¼ç¨ã注åã使ç¨æ¹æ³ä¸å¨å é¨ä½¿ç¨ä¸è´ï¼å¦ä¸æ示ï¼
Vueââèªå®ä¹ç»ä»¶&èªå®ä¹äºä»¶$emit&æ槽slotå±é¨æ³¨åçç»ä»¶ï¼åªè½å¨å½åVueå®ä¾ä¸ä½¿ç¨ï¼å¹¶ä¸å¨å ¶åç»ä»¶ä¸ä¸å¯ç¨ã
å¨componentsé项ä¸å®ä¹å±é¨ç»ä»¶ãæ¯ä¸ªç»ä»¶å°±æ¯ä¸ä¸ªå°åçVueå®ä¾ï¼å®éé¢é¤äºä¸è½è®¾ç½®elé项ï¼å ¶ä»é项å®é½æã
ç»ä»¶å称ï¼èªå®ä¹ï¼å¯ä»¥ä½¿ç¨é©¼å³°å½åæ¹å¼æè ç横线çå½åæ¹å¼ï¼ä½æ¯éè¦æ³¨æçæ¯å¦æåºç¨å°DOMä¸ï¼å°±åªè½ç¨ç横线å½åçæ¹å¼ï¼å¦åå°±ä¼æ¥éã注æç»ä»¶çå称ä¸è¦è·åçhtmlå ç´ éåã
templateé项ï¼å®ä¹ç»ä»¶ç模æ¿ã模æ¿ä¸å¿ é¡»å å«ä¸ä¸ªæ ¹æ ç¾ã
propsé项ï¼å®ä¹ç»ä»¶æ ç¾ä¸çå±æ§ã驼峰å½åæ³çpropåï¼postTitleï¼éè¦ä½¿ç¨å ¶çä»·çç横线åéå½åæ³ï¼post-titleï¼å½åã注æï¼propsæ¯åªè¯»çï¼ä¸è½ä¿®æ¹ï¼è§£å³åæ³ï¼å¨dataä¸å¯¹propsæ¥æ¶å°çæ°æ®è¿è¡ä¸è½¬ï¼ã
dataï¼å®ä¹ç»ä»¶çæ°æ®ã注æï¼Vueå®ä¾çdataé项å¯ä»¥æ¯ä¸ä¸ªå¯¹è±¡ï¼ä¹å¯ä»¥æ¯ä¸ä¸ªæ¹æ³ï¼ç±è¯¥æ¹æ³è¿åä¸ä¸ªå¯¹è±¡ãä½æ¯å¨ç»ä»¶ä¸ï¼dataéé¡¹å¿ é¡»æ¯ä¸ä¸ªæ¹æ³ï¼ç±è¯¥æ¹æ³è¿åä¸ä¸ªå¯¹è±¡ãå 为ç»ä»¶å¯è½ä¼ä½¿ç¨å¾å¤æ¬¡ï¼å¦ædataé项æ¯å¯¹è±¡çè¯ï¼ä¼å¯¼è´å¤ä¸ªç»ä»¶ä½¿ç¨äºåä¸ä»½æ°æ®ã
å ¨å±æ³¨åçç»ä»¶å¯ä»¥ç¨å¨ä»»ä½æ°å建çVueæ ¹å®ä¾(newVue)ç模æ¿ä¸ã
使ç¨Vue.componentæ¥åå»ºå ¨å±ç»ä»¶ãVue.componentç第ä¸ä¸ªåæ°å°±æ¯ç»ä»¶åã
$emit()ç¨äºè§¦åèªå®ä¹äºä»¶ã注æï¼äºä»¶å称ä¸ä¸è½éç¨å¤§ååæ¯ã
ææï¼
ææï¼
slotç¨äºå¨ç»ä»¶çå é¨å®ä¹æ槽ï¼ç»ä»¶æ ç¾ä¹é´çææhtmlå 容ï¼ä¼å¨æ槽æå¨ä½ç½®åç°ã
ææï¼
Vueï¼åºç¡è¯æ³ãå建ç»ä»¶ãç»ä»¶é´ä¼ å¼ãå®ä¾çå½å¨æå½æ们çå°vueæ令åé¢è·çä¸ä¸ªå¼å¾æ¶åï¼è¿éçå¼å°±ä¸åæ¯ä¸ä¸ªå符串äºï¼å®æçæ¯ä¸å®æ¯ä¸ä¸ªJSç表达å¼
1ãv-forï¼å¯ä»¥ç解为for?inï¼éåæ°ç»è¿åç»itemï¼æ°ç»æå¤å°å 容就æå¤å°ä¸ªitemï¼å¹¶èªå¨çæhtmlæ ç¾
2ãv-onï¼ç»å®äºä»¶ï¼è¯æ³=v-onï¼äºä»¶ç±»å?=?"å½æ°(è°ç¨)"ï¼è°ç¨çå½æ°å®ä¹å¨methodsä¸ï¼vueä¼èªå¨å°éé¢å¯»æ¾å¯¹åºçå½æ°å»æ§è¡
3ãv-modelï¼æ°æ®çååç»å®ï¼æå®çæ°æ®éè¦å¨dataéè¿è¡å®ä¹ãå½dataéç该æ°æ®æ¹åæ¶ï¼ç»è¯¥æ°æ®çå°æ¹æ¾ç¤ºå¨é¡µé¢çå 容ä¹ä¼ååï¼å½ç»å®çå°æ¹æ°æ®æ¹åï¼dataéçæ°æ®ä¹ä¼æ¹åãå ¶ä¸ä¸ä¸ªæ¹åå¦ä¸ä¸ªä¹ä¼è·çæ¹åããå¨methodséå®ä¹çå½æ°ä¸ï¼ä½¿ç¨this.æ°æ®å°±å¯ä»¥è®¿é®å°é¡µé¢ä¸è¯¥æ°æ®çå 容ã
4ãv-bindï¼ææ°æ®ä¼ å°åç»ä»¶ï¼v-bindï¼åéå=âæ¥æ¶å¼â?ç¶åå¨åç»ä»¶éçpropsä¸æ¥æ¶åéå¼
5ãv-text=ânameâï¼è¡¨ç¤ºè®©è¿ä¸ªæ ç¾çinnerTextåædataæ°æ®énameçå 容ï¼ä¸ä¼å¤å¶HTMLç»æï¼å纯转ææåï¼ææåæå¼è¡¨è¾¾å¼ä¸æ ·
6ãv-html=ânameâï¼è®©è¿ä¸ªæ ç¾çinnerHTMLåædataæ°æ®énameçå 容ï¼ä¼æHTMLç»æä¹å¤å¶ä¸
åå»ºå ¨å±ç»ä»¶çæ¹æ³?Vue.componentï¼âtodo-itemâï¼ï½ï½ï¼=ã?"todo-item"为æ ç¾å
varç»ä»¶åï¼=æ ç¾åï¼=ï½ï½?并ä¸éè¦å¨å®ä¾ä¸çcomponentsä¸æ³¨åç»ä»¶æè½ä½¿ç¨
v-bind:index="index"å¯ä»¥ç®å:index="index"
v-on:click="hdd"å¯ä»¥ç®å@click="hdd"
ç»åç»ä»¶ç»å®å¤ä¸ªæ°æ®æ¶ï¼
todo-item:content="item":index="index"v-for="(item,index)inlist"@delete="hdd"
/todo-item
åç»ä»¶éçprops使ç¨æ°ç»çå½¢å¼æ¥æ¶æ°æ®ï¼åç»ä»¶äºä»¶å¤çthis.$emit("delete",this.index)ï¼ä¹åå¨åå¤è§¦åç¶ç»ä»¶çäºä»¶å¹¶ä¼ å ¥indexåæ°ï¼å使ç¨spliceæ¹æ³å®ç°ç¹å»å表çæä¸é¡¹æ¶è¯¥é¡¹è¢«å é¤ã
çå½å¨æå½æ°å°±æ¯vueå®ä¾å¨æä¸ä¸ªæ¶é´ç¹ä¼èªå¨æ§è¡çå½æ°ã
çå½å¨æå½æ°ä¸æ¾å¨methodséé¢ï¼èæ¯ç´æ¥æ¾å¨Vueå®ä¾éé¢
Vueæ件添å å ¨å±æ¹æ³1.å®ä¹å ¨å±æ件pluginHaha.js
Vue.jsçæ件åºå½æä¸ä¸ªå ¬å¼æ¹æ³installãè¿ä¸ªæ¹æ³ç第ä¸ä¸ªåæ°æ¯Vueæé å¨ï¼ç¬¬äºä¸ªåæ°æ¯ä¸ä¸ªå¯éçé项对象ï¼
2.main.jså ¨å±å¼å ¥å¹¶ä½¿ç¨
3.ç»ä»¶ä¸ä½¿ç¨
ååæ¹æ³ï¼this.getDate()
å ¨å±æ¹æ³ï¼Vue.getDate()