Lemon-Potato

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment

什么是插槽 插槽就是子组件中提供给父组件使用的一个占位符。用**** 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签 Demo 在子组件中放一个占位符 1234567891011<template> <a v-bind:href="url" class="nav-link"> <slot></slot> </a></template><script>export default { name: 'MyButton', props: ['url']}</script> 在父组件中给这个占位符填充内容 123456789101112131415161718192021<template> <div class="app-container"> <p>插槽使用展 ...

背景 结合 Vue 官方文档，将 自定义事件 的关键点进行梳理与记录 什么是事件？什么是自定义事件？ 事件就是用户对窗口上各种组件的操作。 使用事件机制可以实现：当类对象的某个状态发生变化时，系统将会通过某种途径调用类中的有关处理这个事件的方法或者触发控件事件的对象就会调用该控件所有已注册的事件处理程序等 事件名Vue3 与组件和 prop 一样，事件名提供了自动的大小写转换。如果用驼峰命名的子组件中触发一个事件，你将可以在父组件中添加一个 kebab-case (短横线分隔命名) 的监听器 Vue2 触发的事件名需要完全匹配监听这个事件所用的名称 123this.$emit('myEvent')<!-- 没有效果 --><my-component v-on:my-event="doSomething"></my-component> Demo 父组件 12345678910111213141516171819202122232425<template> <div> ...

事件修饰符.stop 修饰符12345678910111213141516171819202122<template> <div class="about"> <div @click="test1"> <div @click="test2"> 测试 </div> </div> </div></template><script>export default { methods:{ test1(){ console.log('test1') }, test2(){ console.log('test2') } }}</script> 由上面代码可看到有一个嵌套的div，每一个div都绑定着一个事 ...

背景 结合 Vue 官方文档，将 Prop 的关键点进行梳理与记录 Prop 命名 Prop 命名可以使用 camelCase(驼峰命名法)，但是在 HTML 中，需要使用其等价的 kebab-case(短横线分隔命名)命名 12345Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'}) 12<!-- 在 HTML 中是 kebab-case 的 --><blog-post post-title="hello!"></blog-post> 常用属性 (Prop验证发挥关键作用)type (类型) String 字符串 Number 数字 Boolean 布尔 Array 数组 Object ...

求索 跌跌撞撞，磕磕碰碰 漫漫征途，难凉热血 路人 平凡、眼里有光