vue指令用法

桃扇骨 2021-07-25 02:03 508阅读 0赞

vue指令

指令式带有 `v-` 前缀的特殊特性`v-text`和`v-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>
        
        <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事件

`v-on`的缩写@符号

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

<!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>
    </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>
        
        <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>

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

new Vue({
      el: '#example-3',
      methods: {
        say: function () {
          alert('hello');
        }
      }
    });

写法：

new Vue({
      el: '#example-3',
      methods: {
        say: function (message) {
          alert(message);
        }
      }
    });

差异一个有括号，一个没括号，对吧？

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

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

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

有括号的

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

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">
      
      <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>
    
    
    
    <div v-on:click.self="doThat">...</div>

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

<a v-on:click.once="doThis"></a>

<div v-on:scroll.passive="onScroll">...</div>

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

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

按键修饰符

<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

自动匹配按键修饰符

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

系统修饰键

.ctrl
    .alt
    .shift
    .meta

<input @keyup.alt.67="clear">
    
    
    <div @click.ctrl="doSomething">Do something</div>
    
    
    .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
    
    
    <button @click.ctrl="onClick">A</button>
    
    
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    
    <button @click.exact="onClick">A</button>
    
    .left
    .right
    .middle

###  ###

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

###  ###

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

### 欢迎关注[达达][Link 1]的简书！ ###

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

![博客][20191031084234204.jpeg]

[Link 1]: https://www.jianshu.com/u/c785ece603d1
[20191031084234204.jpeg]: /images/20210724/d8ced06f8ffa49a1b571b99337b30367.png