vue指令用法

  • 2019 年 11 月 3 日
  • 笔记

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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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