vue-自定义指令

友情提示：只要引用了vue.js,就要实例化vue，确定vue使用的范围

var vm=new Vue({el:"#app",})

全局自定义指令（作用于全局的vue指定的dom区域）

言而总之，总而言之，内置指令不够用，从而有了自定义指令

比如希望自动聚焦，等其他的一些操作

<标签  v-自定义指令名字>

 <script>

            Vue.directive("自定义指令名字",{

                inserted:function(指令所在的标签){

                    相关逻辑业务

                }

            })

<script>

Vue.directive(参数1，参数2)    vue官方给的自定义指令的方法，方法里面有两个参数

参数1：自定义指定

参数2：{  inserted:function(指令所在的标签){相关逻辑业务 }， }

相关案例(记得实例化vue，不然没效果哈)---------------------------------------------------------------

                <!-- 添加一个自定义指令，输入框自动获取焦点 -->

                 <input type="text" placeholder="请输入用户 " v-focus> <br>

                 <!-- 添加一个自定义指令，数据蓝底白字 -->

                 <p v-ldbz >福宝没有一顿打是白挨的</p>

----------------------------------------------------------------------------

 <script>

            Vue.directive("focus",{

                inserted:function(el){

                    el.focus();

                }

            })

      

                 Vue.directive("ldbz",{

                                inserted:function(el){

                                    el.style.background="blue";

                                    el.style.color="#fff";

                                }

                   })

 </script>

 

------------------------------------------------------------------------------

<标签  v-自定义指令名字="{属性：值，属性：值.....}">

 <script>

            Vue.directive("自定义指令名字",{

                inserted:function(指令所在的标签){

                    相关逻辑业务

                }

            })

<script>

Vue.directive(参数1，参数2)    vue官方给的自定义指令的方法，方法里面有两个参数

参数1：自定义指定

参数2：{  inserted:function(参数1，参数2){相关逻辑业务 }， }

                参数1：DOM元素，表示指令所在的DOM元素

                 参数2：一个对象，包含了当前元素的所有信息

                  参数2.value：表示标签当值自定义指令的属性值，一般来说也是一个对象

-------------------------------------------以下是相关代码

局部自定义组件 

标签部分并无差别