指令 (Directives) 是带有 v- 前缀的特殊特性。有大量指令还可以指定参数比如v-bind:title，这里的title就是参数

参数使用

绑定href

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <a v-bind:href="website">我的知识分享</a>
  11. </div>
  13. <script src="../lib/vue.js"></script>
  14. <script>
  15.     var data = {
  16.       website:'https://www.yuque.com/qiudaozhang'
  17.     };
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         data:data
  22.     })
  24. </script>
  25. </body>
  26. </html>

image.png

点击后就跳转了。

image.png

绑定事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <button v-on:click="click">点我</button>
  11. </div>
  13. <script src="../lib/vue.js"></script>
  14. <script>
  15.     var data = {
  16.       website:'https://www.yuque.com/qiudaozhang'
  17.     };
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         data:data,
  21.         methods:{
  22.             click:function () {
  23.                 alert('点击就送');
  24.             }
  25.         }
  26.     })
  28. </script>
  29. </body>
  30. </html>

点击按钮就会触发相应的事件了。注意Vue并没有提供双击事件，按照作者的回复，你可以使用原生的dbclick来完成功能即可。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。比如.prevent可以阻止事件冒泡。相当于event调用preventDefault()。
比如阻止表单直接提交。

观察下面的表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <form action=""  >
  11.         <input type="submit" value="提交">
  12.     </form>
  13. </div>
  15. <script src="../lib/vue.js"></script>
  16. <script>
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         methods:{
  21.             hit:function () {
  22.                 alert('弹弹乐');
  23.             }
  24.         }
  26.     })
  28. </script>
  29. </body>
  30. </html>

当点击提交按钮，直接回进行提交。

现在修改如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <form action=""  v-on:submit.prevent>
  11.         <input type="submit" value="提交">
  12.     </form>
  13. </div>
  15. <script src="../lib/vue.js"></script>
  16. <script>
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         methods:{
  21.             hit:function () {
  22.                 alert('弹弹乐');
  23.             }
  24.         }
  26.     })
  28. </script>
  29. </body>
  30. </html>

在form上添加了 v-on:submit.prevent，可以发现点击提交，并不会再发起请求。

如果你希望不仅仅阻止了当前这个提交时间发生，还希望有额外的逻辑，则可以指定方法。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <form action=""  v-on:submit.prevent="hit">
  11.         <input type="submit" value="提交">
  12.     </form>
  13. </div>
  15. <script src="../lib/vue.js"></script>
  16. <script>
  18.     var vm = new Vue({
  19.         el:'#app',
  20.         methods:{
  21.             hit:function () {
  22.                 alert('弹弹乐');
  23.             }
  24.         }
  26.     })
  28. </script>
  29. </body>
  30. </html>

image.png