一和二，请参考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. Redhad的开源Paas平台：OpenShift

    参考redHat的官方文章翻译而来:https://openshift.redhat.com/community/wiki/architecture-overview OpenShift Origin ...

  2. javascript里的eval总结

    JavaScript eval() 函数 1.定义和用法 eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参 ...

  3. php实现图片以base64显示的方法达到效果

    目前Data URI scheme支持的类型有: data:text/plain,文本数据data:text/html,HTML代码data:text/html;base64,base64编码的HTM ...

  4. Bnd教程（1）：如何用命令行安装bnd

    1. 如果你用的是MacOS,请运行: brew install bnd 然后运行bnd version看是否安装成功: $ bnd version 4.0.0.201801191620-SNAPSH ...

  5. 在APPfuse中配置log4j进行定位

    appFuse使用log4j进行日志输出,默认日志级别为warn,输出到串口console. 一下修改为debug级别,输出到串口及文件中: 1.修改(tomcat中的页面根目录)/appfuse/W ...

  6. HTML 5适合小公司，适合在大平台上做内容

    Web App,现在有时候也称为轻应用,不仅是通过浏览器就能打开的应用.现在随着 HTML 5 在手机端的优越性,已经慢慢称为了 Web App 的主流.Web App 除了出现在 PC 的浏览器中, ...

  7. PHP实现git部署的方法教程

    https://mp.weixin.qq.com/s/WH_JXah47BhQyviuuPAunw 背景 在小站点上,直接用git来部署php代码相当方便,你的远程站点以及本地版本库都有一个版本控制, ...

  8. 设备 VMnet0 上的网络桥接当前未在运行。

    早上,我打开我的虚拟机,却发现一个问题, 桥接网络怎么都连接不上. 报的是如下的错误 ------------------------------ 设备 VMnet0 上的网络桥接当前未在运行.该虚拟 ...

  9. poj3294 后缀数组

    后缀数组多个字符串问题. 先求出height[]数组,然后二分求最大的长度. 但是条件需要改变.如果出现次数大于一般那就满足.然后就要解决如何判断那一段属于其中一个字符串. 所以先处理出长度.并且不断 ...

  10. 三 nginx+uWSGI+django+virtualenv+supervisor发布web服务器

    https://www.cnblogs.com/pyyu/p/9481344.html?tdsourcetag=s_pcqq_aiomsg 一 uwsgi安装 1.安装uwsgi,进入到一个虚拟机环境 ...