精华内容
下载资源
问答
  • vue自定义指令的用法

    千次阅读 2018-09-19 21:18:55
    上周有一个长按某一块文本弹出一个弹窗的需求,关于这个长按的姿势想到了使用vue的自定义指令来进行开发这个需求,因为报告中很多页面都要使用到这个长按的姿势,所以自定义指令是最佳解决方法的首选。刚好借此机会...

    上周有一个长按某一块文本弹出一个弹窗的需求,关于这个长按的姿势想到了使用vue的自定义指令来进行开发这个需求,因为报告中很多页面都要使用到这个长按的姿势,所以自定义指令是最佳解决方法的首选。刚好借此机会学习自定义指令。
    官网提供的全局自定义和组件自定义的例子,都很简单明了了告诉我们怎么使用:官网自定义例子链接

    下面主要讲解我全局自定义指令的整个流程,整体思路与官网的一样,但是一般实际项目开发中要规范化自己的开发风格,这里主要是学习各种框架会使用一套方法来实现:
    (1)longTap.js:这个文件主要用来实现主要的业务逻辑,即长按(touchstart,touchmove,touchend)事件的处理

    //核心代码
    export default {
    //使用钩子函数inserted(被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中));此外还有=>(1)bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(2)update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 
    (3)componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。(4)unbind:只调用一次,指令与元素解绑时调用。上面这些钩子函数可以根据自己所需场景进行选择。
    
      inserted (el, bind, vNode) {
        el.addEventListener('touchstart', event => {
        //按下去的逻辑代码
        }, false)
        
        el.addEventListener('touchmove', event => {
        //手指按下去移动的逻辑代码
        }, false)
        
        el.addEventListener('touchend', event => {
        //手指离开页面时的逻辑代码
        }, false)
      }
    }
    

    (2)add.js:这个文件主要用来实现添加longtap的指令

    import LongTap from 'longTap'   //引入上面的longTap.js
    Logntap.install = function (Vue, option) {
      Vue.directive('longtap', Longtap)
    }
    export default LongTap
    

    (3)long-tap.js:这个文件一般放在plugins文件夹下面,到时要引入nuxt.config.js中

    import Vue from 'vue'
    import LongTap from 'add'
    
    Vue.use(LongTap)
    

    (4)在test.vue文件中使用指令v-longtap

    <div v-longtap></div>
    

    上面就是整个自定义指令的使用流程。

    展开全文
  • vue自定义指令用法

    2020-05-12 11:42:12
    自定义指令和自定义组件一样,也是先注册后使用,其注册和组件注册很类似,也分为全局注册和局部注册。只是注册组件时是使用component关键字,而注册指令时要使用directive关键字。 全局注册使用自定义指令: ...

    在vue中,有的情况下,仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。也就是说我们在操作普通DOM的时候有可能会用到自定义指令。

    自定义指令和自定义组件一样,也是先注册后使用,其注册和组件的注册很类似,也分为全局注册和局部注册。只是注册组件时是使用的component关键字,而注册指令时要使用directive关键字。

    自定义指令有以下几个钩子函数:

    • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    • inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

    • update:所在组件的 VNode 更新时调用(但是可能发生在其子 VNode 更新之前)。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

    • componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

    • unbind:只调用一次,指令与元素解绑时调用。

    指令钩子函数会被传入以下参数:

    • el:指令所绑定的元素,可以用来直接操作 DOM。
    • binding:一个对象,包含以下 property:
      • name:指令名,不包括 v- 前缀。
      • value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
      • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
      • expression:字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。
      • arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 “foo”。
      • modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。
    • vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
    • oldVnode:上一个虚拟节点,仅在 updatecomponentUpdated 钩子中可用。

    除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

    举个例子:

    <div id="app">
      <input v-mydirective:[pos]="100"/> 
    <div>
    <!-- 这里的pos是动态指令参数 -->
    

    全局注册使用自定义指令:

    Vue.directive('mydirective',{
      // 钩子函数bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      bind:function(el,binding,vnode){
        el.style.position = 'fixed'
        var s = (binding.arg == 'left' ? 'left' : 'top')
        el.style[s] = binding.value + 'px'
      },
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      },
      // 钩子函数update:每当元素本身更新(但是子元素还未更新)时触发
      update:function(el,binding,vnode,oldVnode){
        if(bingding.oldValue!== bingding.value){
          ...
        }
      },
    })
    

    局部注册:

    new Vue({
      data:{
        pos: 'left'
      },
      directives:{
        'mydirective':{
          bind:function(el,binding,vnode){
            el.style.position = 'fixed'
            var s = (binding.arg == 'left' ? 'left' : 'top')
            el.style[s] = binding.value + 'px'
          },
          inserted: function (el) {
            // 聚焦元素
            el.focus()
          },
          update:function(el,binding,vnode,oldVnode){
            ...
          },
        }
      }
    })
    

    template内部写法:

    export default{
      data(){
        return{
          pos: 'left'
        }
      },
      directives:{
        'mydirective':{
          bind:function(el,binding,vnode){
            el.style.position = 'fixed'
            var s = (binding.arg == 'left' ? 'left' : 'top')
            el.style[s] = binding.value + 'px'
          },
          inserted: function (el) {
            // 聚焦元素
            el.focus()
          },
          update:function(el,binding,vnode,oldVnode){
            ...
          },
        }
      }
    }
    

    参考:
    vue官网-自定义指令

    展开全文
  • vue指令用法

    2019-10-31 08:42:34
    指令式带有 v- 前缀特殊特性v-textv-html都属于指令将数据dom做关联,当表达式值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispaly: none; } 一般把v-cloak绑在Vue实例el属性绑定...

    vue指令

    指令式带有 v- 前缀的特殊特性v-textv-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图

    解决大胡子语法闪烁案例

    [v-cloak] {
     dispaly: none;
    }

    一般把v-cloak绑在Vue实例el属性绑定的节点上

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
     <style>
     
      [v-cloak] {
         display: none;
        }
        
     </style>
     </head>
     <body>
     
      <div id="app" v-cloak>
         {{msg}}
        </div>
        <script>
         var vm = new Vue({
          el: "#app",
            data: {
             msg: "问题"
            }
        </script>
        
    </body>
    </html>

    v-bind给标签属性绑定使用

    v-bind是让标签属性可以动态的使用data参数或者写一些简单的js表达式

    v-text,v-html不同它俩是针对标签中的内容,v-bind是针对标签中的属性

    v-bind案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--导入Vue cdn 的网址-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    </head>
    <body>
        <div id="app" >
            <a v-bind:href="url" v-bind:title="title">v-bind的缩写是冒号:</a>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    url:"www.baidu.com",
                    title:'百度'
                }
            })
        </script>
    </body>
    </html>

    v-on绑定事件v-on方法处理器和内联处理器

    方法处理器内联处理器

    v-on对象处理v-on:keyup监听按键触发

    事件修饰符

    阻止事件冒泡--stop实现捕获触发事件的机制--capture只会阻止自己身上冒泡行为--self阻止默认事件--prevent只触发一次默认行为

    v-on绑定事件可以用v-on指令监听DOM事件

    <button v-on:click="alert('a')">v-on</button>

    v-on的缩写@符号

    v-on方法处理器和内联处理器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--导入Vue cdn 的网址-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    </head>
    <body>
        <div id="app" >
            <button v-on:click="doThis">v-on按钮</button>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                methods:{
                    // es6 语法
                    doThis(){
                        if (event) {
                            alert(event.target.tagName)
                        }
                        alert('我是方法处理器')
                    }
                },
            })
        </script>
    </body>
    </html>

    使用的时候带括号:'<button v-on:click="doThat('hello', $event)"></button>'
    
    带括号的好处是可以传参,但不自带evet 事件,想使用event事件需要$event
    参数传入

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--导入Vue cdn 的网址-->
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    </head>
    <body>
        <div id="app" >
            <button v-on:click="doThat('hello', $event)">v-on按钮</button>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                methods:{
                    // es6 语法
                    doThat(parameter, event){
                        let msg = parameter   "内联方法";
                        if (event) {
                            alert(event.target.tagName)
                        }
                        alert(msg);
                    }
                },
            })
        </script>
    </body>
    </html>

    内联处理器是指的什么呢?

    <div id="example-3">
      <button v-on:click="say">Say hi</button>
      <button v-on:click="say">Say what</button>
    </div>
    new Vue({
      el: '#example-3',
      methods: {
        say: function () {
          alert('hello');
        }
      }
    });

    写法:

    <div id="example-3">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    new Vue({
      el: '#example-3',
      methods: {
        say: function (message) {
          alert(message);
        }
      }
    });

    差异一个有括号,一个没括号,对吧?

    没括号的这个,直接就是函数名,有括号的这个,实际是一条JS语句,有括号的这个就叫『内联处理器』。

    没括号的有这么一个好处:

    <div id="example-3">
      <button v-on:click="say">Say hi</button>
      <button v-on:click="say">Say what</button>
    </div>

    new Vue({
      el: '#example-3',
      methods: {
        say: function (event) {
          alert(event.target.tagName);
        }
      }
    });

    有括号的

    让有括号的也能得到无括号娘胎里自带的event参数

    <div id="example-3">
      <button v-on:click="say('hi', $event)">Say hi</button>
      <button v-on:click="say('what', $event)">Say what</button>
    </div>
    new Vue({
      el: '#example-3',
      methods: {
        say: function (message, event) {
          alert(message);
          alert(event.target.tagName);
        }
      }
    });

    事件处理监听事件

    <div id="example">
     <button v-on:click="counter  = 1">Add</button>
     <p>the button{{counter}}time</p>
    </div>

    var example = new Vue({
     el: '#example',
     data: {
      counter: 0
     }
    })

    事件处理方法:

    <div id="example-2">
      <!-- `greet` 是在下面定义的方法名 -->
      <button v-on:click="greet">Greet</button>
    </div>
    var example2 = new Vue({
     el: '#example-2",
     data: {
      name: "Vue.js"
        },
     methods: {
      greet: function(event) {
         alert('hello'   this.name)
         if(event){
          alert(event.target.tagName)
            }
            }
            }
    })
    example2.greet()

    内联处理器中的方法

    <div id="example-3">
      <button v-on:click="say('hi')">Say hi</button>
      <button v-on:click="say('what')">Say what</button>
    </div>
    
    new Vue({
      el: '#example-3',
      methods: {
        say: function (message) {
          alert(message)
        }
      }
    })

    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
      Submit
    </button>
    
    // ...
    methods: {
      warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
        alert(message)
      }
    }

    事件修饰符:在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()

    Vue.js 为 v-on 提供了事件修饰符

    .stop
    .prevent
    .capture
    .self
    .once
    .passive

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
    
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    
    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>
    
    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>

    v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击

    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div v-on:scroll.passive="onScroll">...</div>

    这个 .passive 修饰符尤其能够提升移动端的性能

    不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

    按键修饰符

    <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
    <input v-on:keyup.13="submit">
    
    <!-- 同上 -->
    <input v-on:keyup.enter="submit">
    
    <!-- 缩写语法 -->
    <input @keyup.enter="submit">
    
    .enter
    .tab
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
    
    // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112

    自动匹配按键修饰符

    <input @keyup.page-down="onPageDown">

    处理函数仅在 $event.key === 'PageDown' 时被调用

    系统修饰键

    .ctrl
    .alt
    .shift
    .meta
    <!-- Alt   C -->
    <input @keyup.alt.67="clear">
    
    <!-- Ctrl   Click -->
    <div @click.ctrl="doSomething">Do something</div>
    
    
    .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
    
    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    <button @click.ctrl="onClick">A</button>
    
    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    <!-- 没有任何系统修饰符被按下的时候才触发 -->
    <button @click.exact="onClick">A</button>
    
    .left
    .right
    .middle

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

    请点赞!因为你们的赞同/鼓励是我写作的最大动力!

    欢迎关注达达的简书!

    这是一个有质量,有态度的博客

    博客

    展开全文
  • 一、指令 1、什么是指令?...实现原理是:先让插值表达式隐藏,当VUE编译结束后把结果显示在页面。 3、v-text / v-html / v-pre注意点 ① v-text::可替代v-cloak, 用法比v-cloak简洁; <span v-text=

    一、指令

    1、什么是指令?

    就是一系列用 ‘v-’ 开头的自定义属性。

    2、v-cloak解决插值表达式的闪动问题

    [v-cloak] {
      display: none;
    }
    <div v-cloak>
      {{ message }}
    </div>
    

    实现原理是:先让插值表达式隐藏,当VUE编译结束后把结果显示在页面。

    3、v-text / v-html / v-pre注意点

    ① v-text::可替代v-cloak, 用法比v-cloak简洁;

    <span v-text="msg"></span>
    

    ② v-html:可解析html标签,但是如果是跨域动态渲染的话不推荐使用,因为容易遭受XSS攻击。

    XSS 即(Cross Site Scripting)中文名称为:跨站脚本攻击。XSS的重点不在于跨站点,而在于脚本的执行。
    那么XSS的原理是:恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的时候,那么嵌入到web页面中script代码会执行,因此会达到恶意攻击用户的目的。那么XSS攻击最主要有如下分类:反射型、存储型、及 DOM-based型。 反射性和DOM-baseed型可以归类为非持久性XSS攻击。存储型可以归类为持久性XSS攻击。

    <div v-html="<h2>hello</h2>"></div>
    

    ③ v-pre:显示原始信息跳过编译过程。我们都知道Vue的代码运行到浏览器上必须通过Vue框架编译,将Vue语法编译成原始的js代码。

    <span v-pre>{{ this will not be compiled }}</span>
    

    4、v-once

    因为Vue的数据具有响应式的特点,如果绑定了v-once后,数据只渲染一次,这样可以提高一定的性能。

    5、事件修饰符

    .stop: 阻止冒泡行为
    .prevent: 阻止默认行为,比如submit和链接跳转
    .self: 只触发元素本身的事件

    注意:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而
    v-on:click.self.prevent 只会阻止对元素自身的点击。

    6、按键修饰符

    <input v-on:keyup.enter="submit">
    

    7、自定义按键修饰符

    自定义的名称可以是自己定义的,但是对应的值必须是event.keyCode对应的值。比如:

    Vue.config.keyCodes.f1 = 112
    

    8、v-model的底层实现原理

    <input type="text" v-bind:value="msg" v-on:input="handle">
    

    从视图到数据是通过input事件触发,在触发函数中将输入框的内容赋值给data中的数据。
    从数据到视图通过v-bind绑定value值。

    9、v-show和v-if的区别

    v-show主要是控制style样式display: none的有无,是会渲染到页面的。
    v-if如果值为false则不会渲染到页面,如果值为true将渲染到页面。实质上是控制DOM元素的增加和删除,对性能的开销比较大。
    总结:如果仅仅是对样式进行控制,最好使用v-show。

    10、v-for

    v-for最好和:key一起使用,这样可以给每循环创建的每一个标签添加特定的标识符,帮助Vue区分不同的元素,从而提高性能。
    可以和v-if结合使用。
    既可以遍历数组也可以遍历对象。

    展开全文
  • Vue1.0中过滤器和Vue2.0中自定义指令的用法
  • 自定义指令是用来操作DOM。自定义指令就是一种有效补充扩展,不仅可用于定义任何DOM操作,并且是可复用。这篇文章主要介绍了Vue.js自定义指令的用法与实例解析,一起看看吧
  • - Vue指令 - Vue基本属性 - Vue组件通信 Vue 基本属性 data属性 在.vue扩展名文件下,data属性必须定义为函数形式,在普通的Vue对象中,data属性就是一个对象。 相当于react中state,代表了当前组件状态;组件...
  • vue指令指令式带有 v- 前缀特殊特性v-textv-html都属于指令将数据dom做关联,当表达式值改变时,响应式地作用在视图解决大胡子语法闪烁案例[v-cloak] { dispaly: none; }一般把v-cloak绑在Vue实例el属性...
  • vue的基本用法和指令

    2018-11-28 20:54:00
    el data method 都是vue提供属性, 提供属性在页面分析里前面带$ // msg num isShow 是自定义属性,如果是自定义属性就直接显示 el: " #content " , // 相当于选择器 定位 // 是observer 观察...
  • 主要介绍了Vue的土著指令和自定义指令的用法讲解 ,需要的朋友可以参考下
  • 市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际应用场景用例,以致于即便明白了怎么写,也不知道怎么用。本文不讲语法,就讲自定义指令的用法。  自定义指令是用来操作DOM。尽管Vue推崇数据...
  • javascript代码如下:Vue效果如下:二、后备插槽在组件模板<slot></slot>中添加内容,如果html利用这个组件中没有内容话,就是默认显示插槽里面内容,如果有内容则覆盖插槽中内容 html代码...
  • Vue尽可能通过简单API实现响应数据绑定组合视图组件。 vue是由尤雨溪开发一款基于MVVM框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变,模型内容也跟着改变, 业界称...
  • 模板语法 {{}} ... 对于全局window下方法Vue设置了白名单,只有在白名单下方法,模板才可以使用。 `白名单`: 'Infinity,undefined,NaN,isFinite,isNaN,'+'parseFloat,parseInt,decodeURI,decodeUR
  • 注意:Vue.directive(‘参数名称’,{}) 定义全局指令,它有两个参数 参数1:指令名称,注意在定义时候,指令名称前不需要加 v- 前缀,但是在调用时候,必须加v- 前缀。 参数2:参数2是一个对象,这个对象身上有...
  • 说出至少4种vue当中的指令和它的用法? (1){{}} 、v-html 和v-text ==》 非表单元素 {{}}:以{{data的属性名}}的方式直接使用在标签之间 例如: {{name}} {{}}不能解析data中属性值中的标签 当vue.js没有加载出来...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 395
精华内容 158
关键字:

vue的指令和用法

vue 订阅