一.自定义指令

vue中可以自己设置指令,通过directive来实现,有2种创建方式,一种是局部创建,一种是全局创建。

第一种:局部创建

如果想注册局部指令,组件中也接受一个 directives 的选项:

然后就可以在模板中任何元素上使用新的 v-focus 和v-book属性。

第二种创建方式:全局创建

二.Vue中的特殊特性ref

ref被用来给元素或子组件注册引用信息

1、ref 放到Dom当中,this.$refs会视为一个DOM元素。如果多个DOM同时绑定一个ref.最终只会使用最后一个。

2.如果你的ref与v-for结合使用,那么通过refs得到的会是一个数组。
 3,如果ref放在组件中,通过ref就可以得到那个组件。
三. sync
  语法糖 .sync
  完成了2个作用(1)向下传递属性
          (2)子组件可以通过$emit("update:isshow",传递参数)来修改父级通过isshow绑定的值

           说明:相当于在组件增加了 @update:isshow="()=>isShow= !isShow"
四.插槽slot
  1,匿名插槽(单个插槽):将组件标签包含的内容放到时组件模板当中的匿名slot标签内。slot是一个占位符
  2,具名插槽:给子组slot增加一name属性
  3,作用域插槽:在子组件当中的slot标签当中所有的属性(除name属性外),都可以通过 slot-scope来获得 
    <div slot="one" slot-scope="scope">你好!我是刘德华{{scope.username}}{{scope}}

Vue自定义指令,ref ,sync,slot的更多相关文章

  1. vue 自定义指令(directive)实例

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  2. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  3. vue 自定义指令的使用案例

    参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

  4. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  5. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  6. vue自定义指令clickoutside使用以及扩展用法

    vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...

  7. vue自定义指令clickoutside扩展--多个元素的并集作为inside

    都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...

  8. 每个人都能实现的vue自定义指令

    前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...

  9. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

  10. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

随机推荐

  1. ansible 问题

    如下图,A服务器上用普通账号ansible有时就会报错,但有时却又正常,可以连接成功,用root账号执行ansible就完全没问题. 仅仅是这一台服务器有问题,其他都完全正常..ansible 文件删 ...

  2. mac下安装cnpm淘宝镜像

    cnpm:官网 (事先已经安装了node,有npm)查看官网,提示安装需运行命令:npm install -g cnpm --registry=https://registry.npm.taobao. ...

  3. [Redis]Redis的五种数据类型与键值/服务器相关命令

    -------------------------------------------------------------------------------------- String(字符串):最 ...

  4. 人工智能为什么选择Python语言?

    作为新手,在面对广泛应用于企业级应用开发的 Java.游戏客户端开发的 C++.嵌入式开发的 C.人工智能领域的 Python 等数百种编程语言时,你会如何选择自己的第一门编程语言? 作者 | JAC ...

  5. Ubuntu安装pyucharm的专业版本

    看到了不错的教程,亲测有效. https://www.cnblogs.com/huozf/p/9304396.html

  6. EOS踩坑记 2

    [EOS踩坑记 2] 1.--contracts-console 在开发模式下,需要将 nodeos 添加此选项. 2.Debug Method The main method used to deb ...

  7. DJango 基础 (1)

    django基础 知识点: 基本认知 工具准备 新建项目 目录及文件说明 开发服务器 创建视图函数 新建应用(app) 1.基本认知 Django是用Python开发的一个免费开源的Web框架,可以用 ...

  8. Java的三种代理模式(Spring动态代理对象)

    Java的三种代理模式 1.代理模式 代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作,即扩 ...

  9. c#: WebBrowser控制台输出

    还是处理视频下载所相关的问题. 有些网站,它的页面代码是由页面加载后js动态生成,那么其原始的html便不能用.页面渲染后的代码,是我们需要的 c#中,我用WebBrowser这个控件处理.设置项目类 ...

  10. 查看windows上次开机时间

    首先在电脑上找的[计算机]图标,点击鼠标右键弹出下拉菜单,在下拉菜单里找到[管理]选项 点击下拉菜单里的[管理]选项,弹出计算机管理界面,在左侧菜单栏里的系统工具里可以看到[事件查看器]菜单 点击[时 ...