一和二，请参考https://www.cnblogs.com/zui-ai-java/p/11109213.html

三、index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>index</title>

     <style>

         .card{

             width:200px;

             padding:10px;

             margin:5px;

             background: #ccc;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <div v-pin:true.bottom.left="card1.pinned" class="card">

             <button @click="card1.pinned = !card1.pinned">固定/取消</button>

             点击佛啊  到爱上对方 大理市地方 大理石的发生啥都if静安寺

         </div>

         <div v-pin="card2.pinned" class="card">

             <a @click="card2.pinned = !card2.pinned" href="#">pin it</a>

             鲁大师的佛 了发斯蒂芬 的拉法的拉法  豆爱疯

         </div>

         <div>

                 基础方式

                 new 一个Vue的实例<br>

                 注册组件并使用<br>

                 注册组件

                 全局注册<br>

                 局部注册<br>

                 通过new创建Vue实例,  全局注册组件，局部注册组件三者的使用频率（场景）<br>

                 Vue中的props数据流

                 props取值的方式<br>

                 props内写的是驼峰命名法，为什么在HTML（模板）中又用了短横线命名法？<br>

                 使用v-bind的必要性：props不绑定的前提下,只能被作为字符串解析<br>

                 Vue的自定义事件

                 自定义事件的原理<br>

                 自定义事件的作用1 ——“重新定义”了事件监听机制的范围<br>

                 自定义事件的作用2 ——使得父子组件权责明确<br>

                 Slot的使用<br>

                 具名slot<br>

                 正文<br>

                 回到顶部<br>

                 Vue渲染的两大基础方式<br>

                 new 一个Vue的实例

                 这个我们一般会使用在挂载根节点这一初始化操作上：<br>

                 new Vue({<br>

                 el: '#app'<br>

                 })<br>

                 注册组件并使用<br>

                 通过Vue.component（）去注册一个组件，你就可以全局地使用它了，具体体现在每个被new的 Vue

                 <br>实例/注册组件， 的template选项属性或者对应的DOM模板中,去直接使用<br>

                 回到顶部<br>

                 注册组件

                 全局注册<br>

                 例如，放在通过new创建的Vue实例当中：<br>

                 复制代码

                 Vue.component('my-component', {<br>

                 template: '<p>我是被全局注册的组件</p>'<br>

                 })

                 /*

                 Vue.component(组件名称[字符串], 组件对象)<br>

                 */

                 new Vue({<br>

                 el: '#app',<br>

                 template: '<my-component></my-component>'<br>

                 })

                 复制代码<br>

                 demo:<br>

         </div>

     </div>

     <script src="../lib/vue.js"></script>

     <script src="./js/main.js"></script>

 </body>

 </html>

四、main.js

 // 自定义v-pin指令

 // el表示指令所在标签元素

 // binding表示指令，其中value属性得到指令的值

 Vue.directive("pin",function(el,binding){

     var pinned = binding.value;

     // console.log("pinned",pinned)

 // 使用modifiers属性可以得到指令的属性，是一个js对象

     var position = binding.modifiers;

     // console.log("position",position);

 // 使用arg属性来获取指定的参数

     var warning = binding.arg;

     // console.log("warning",warning);

     if(pinned){

         el.style.position="fixed";

 // 通过for..in..遍历position对象

         for(var key in position){

             // 使用[key],实现动态的设置方位

             el.style[key] = "40px";

         }

         if(warning){

             el.style.background="yellow";

         }

         // el.style.top = "40px";

         // el.style.left = "40px";

     }else{

         el.style.position = "static";

         el.style.background = "#ccc"

     }

 })

 new Vue({

     el:"#app",

     data:{

         card1:{

             pinned:false

         },

         card2:{

             pinned:false

         }

     }

 })

五、效果

六、感谢观看，如有疑问，欢迎交流哦

Vue自定义指令配置修饰符和传参的更多相关文章

  1. vue 自定义全局按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: JS部分: Vue.config.keyCodes = { f2:113, } var app ...

  2. vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

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

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

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

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

  5. vue自定义指令

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

  6. Vue自定义指令使用方法详解 和 使用场景

    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...

  7. vue 自定义指令的魅力

    [第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...

  8. vue 自定义指令（directive）实例

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

  9. Vue自定义指令 数据传递

    在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 .关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的.今天讲讲在使用V ...

随机推荐

  1. 为什么无法定义1px左右高度的容器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  2. 优化SQL之最佳索引

    SQL优化工具Tosska SQL Tuning Expert for Oracle,帮助SQL开发人员解决SQL性能问题. 本工具主要创始人Richard To, 资深ITPUB元老,从1996年开 ...

  3. 2019-11-20-WPF-使用-MyScript-的-IInk-做手写识别

    title author date CreateTime categories WPF 使用 MyScript 的 IInk 做手写识别 lindexi 2019-11-20 08:18:26 +08 ...

  4. ubuntu下C操作Mysql数据库第一步

    学习于: http://armsword.com/2013/06/20/ubuntu-c-mysql.html

  5. nth-child和nth-of-type的使用案列

    HTML: <div id="footer-f"> <ul class="trajectory"> <li> <div ...

  6. xml入门与解析

    xml入门与解析 1.xml基础知识 xml:可扩展的标签语言,标签自定义. 作用:存储数据.(配置文件) 书写规范: 1.区分大小写 2.应该有一个根标签 3.标签必须关闭 <xx>&l ...

  7. linux之架构图和八台服务器

    (1) (2)

  8. 智能算法之Matlab实现（1）——遗传算法（1）

    遗传算法的过程在这里先不介绍了,可能在接下来的几篇文章会介绍,这里介绍些实用的. (1)Sheffield遗传算法工具箱的安装 我共享了下修改过文件名和后缀名的原版工具箱,地址为:http://pan ...

  9. pytorch利用多个GPU并行计算多gpu

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/Answer3664/article/de ...

  10. Python学习之路2☞数据类型与变量

    变量 变量作用:保存状态:说白了,程序运行的状态就是状态的变化,变量是用来保存状态的,变量值的不断变化就产生了运行程序的最终输出结果 一:声明变量 #!/usr/bin/env python # -* ...