首页 > 其他分享 >Vue学习五:自定义指令、插槽

Vue学习五:自定义指令、插槽

时间:2023-09-15 22:15:27浏览次数:43  
标签:slot el Vue 自定义 插槽 指令 标签

一、自定义指令

自定义指令:自己定义的指令,可以封装一些dom操作,扩展额外功能

全局注册语法

Vue.directive('指令名',{
    "inserted" (el){
        //可以对el标签,扩展额外功能
    }
})
View Code

局部注册语法

directives:{
    "指令名":{
        "inserted" (el){
            //可以对el标签,扩展额外功能
        }
    }
}
View Code

案例:写一个指令,给input标签加上指令,让页面一加载就可以聚焦点

局部注册

<template>
    <div class="App">
        <h1>自定义指令</h1>
        <input v-focus type="text">
    </div>
</template>

<script>
    export default{
        directives:{
            focus:{
                inserted(el){
                    el.focus()
                }
            }
        }
    }
</script>

<style>

</style>
View Code

自定义指令-指令的值

指令值的语法:
①v-指令名= "指令值",通过等号可以绑定指令的值
②通过binding.value可以拿到指令的值
③通过update钩子,可以监听指令值的变化,进行dom更新操作

案例:自定义一个指令通过给不同的值,给标签渲染不同的颜色,赋不同的值还能渲染不同的颜色(vue指令接受数据不是响应式的,要用update监听数据的变化来赋值)

<template>
    <div class="App">
        <h1 v-color = "color1">指令一</h1>
        <h1 v-color = "color2">指令二</h1>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                color1:'blue',
                color2:'red'
            }
        },
        directives:{
            color:{
                inserted(el,binding){
                    el.style.color = binding.value
                },
                update(el,binding){
                    console.log("123")
                    el.style.color = binding.value
                }
            }
        }
    }
</script>

<style>

</style>
View Code

二、插槽

默认插槽
插槽基本语法:
1.组件内需要定制的结构部分,改用<slot></slot>占位
2.使用组件时, <MyDialog></MyDialog>标签内部,传入结构替换slot

后备内容:在slot标签中写的内容就是后备内容。

具名插槽
1. slot占位,给name属性起名字来区分
2. template配合v-slot:插槽名分发内容
v-slot:插槽名可以简化成#插槽名.

作用域插槽
(1)给slot标签,以添加属性的方式传值
(2)所有属性都会被收集到一个对象中
(3) template中,通过#插槽名= "obj"接收

标签:slot,el,Vue,自定义,插槽,指令,标签
From: https://www.cnblogs.com/panglinglong/p/17704938.html

相关文章

  • Vue-模板语法
    一、模板语法 插值语法最后都渲染成了字符串html:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jque......
  • Vue项目报TypeError: Cannot read properties of undefined (reading '_wrapper')
    前情最近在做一个营销活动的时候,我选择了Vue技术栈来开发。坑位项目看似一切都正常,但当我在绑定的js事件中去修改当前组件的data上的值时会报错:TypeError:Cannotreadpropertiesofundefined(reading'_wrapper')。报错信息指向vue.runtime.esm.js,不太好定位,一度怀疑是不......
  • Vue源码学习(五):<templete>渲染第四步,生成虚拟dom并将其转换为真实dom
    好家伙, 前情提要:在上一篇我们已经成功将ast语法树转换为渲染函数 现在我们继续 1.项目目录代码已开源https://github.com/Fattiger4399/analytic-vue.git手动调试一遍,胜过我解释给你听一万遍新增文件:vnode/index.js  vnode/patch.js  lifecycle.js 2.虚......
  • vue页面集成海康威视web视频播放插件
    参考大神链接:https://www.jianshu.com/p/71d97362fdd81、进入海康威视官网下载web视频插件下载插件开发包:https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10 官方教程:https://open.hikvision.com/docs/docId?productId=612781c8ec4acb28e0e1c0c3&versi......
  • springboot+vue导出本地可执行文件
    1、前端页面增加下载链接<ahref="http://localhost:80/system/download"download="xxx.exe">下载地址</a>2、后端读取文件下载//下载文件@GetMapping("/system/download")publicvoiddownload(HttpServletResponseresponse){S......
  • vue大转盘旋转效果-停在随机定位的奖品处
    代码有点乱,给予vue写的,奖品可以自定义数量抽奖也是随机生成了奖品的下标,然后停在该下标的位置里面有个大转盘的背景图,自己随便找个圆形图片放上去就行了<!--这个案例大概实现了停止在初始位置,误差在±10度左右增加了奖品分布--><template><divclass="hello"><div......
  • 在 Java 中自定义反序列化:实现可序列化接口
    实现可串行化接口的功能Serialized接口用于管理Java默认序列化机制使用的序列化和反序列化过程。Java虚拟机(JVM)通过该类的Serialized接口实现来指示该类是否具有可序列化和反序列化的能力。该接口不仅有利于序列化,而且还使开发人员可以自由地更改默认的反序列化行为。由......
  • vue3.3.x setup 新实验性特性 defineModel 定义多个属性
    由于有些业务组件需要定义多个响应式props,类似这种(比较懒,没上ts),在vue3.3.x以前,如果不用三方库,代码会变得很繁琐<scriptsetup> constprops=defineProps({ modelValue:{ type:Object, default:()=>({}) }, fields:{ type:Object, default:()=>(......
  • vue前后端分离项目中,对于空字符串转可空类型出错的解决办法
    环境:netcore 6.0+序列化采用自带的System.Text.Json工具使用vue做前后端分离时,我们提交的对象中,可能有些字段是为空字符串,但是对应接口要求是int?,decimal?datetime?等类型。那么在序列化时,就会报错。因为空字符串无法直接反序列化为null 所以我们需要自定义一个转换规......
  • 原生HTML单页面使用vue框架
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=devi......