Vue自定义指令配置修饰符和传参

一和二，请参考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自定义指令配置修饰符和传参

最新文章

热门文章