vue模板语法（二）

IT小崽子

于 2023-03-04 20:53:04 发布

阅读量59

点赞数 1

分类专栏： Vue.js 文章标签： vue.js vue 前端 javascript

本文链接：https://blog.csdn.net/weixin_52129860/article/details/129338984

版权

Vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

模板语法（二）

指令
指令缩写
- - v-bind
  - v-on
实验总结

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性，在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定，例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue</title>
    <!--引入 vue.js-->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <!-- 指令 参数-->
    <div id="app">
      <a v-bind:href="url">实验楼</a>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          url: "https://www.lanqiao.cn",
        },
      });
    </script>
  </body>
</html>

另外一个例子，v-on 指令，用于监听 DOM 事件，例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue</title>
    <!--引入 vue.js-->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <!-- 指令 参数-->
    <div id="app">
      <p>我叫：{{name}}</p>
      <!-- handleClick 使我们在实例 methods 中写的方法 -->
      <button v-on:click="handleClick">点我</button>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          name: "实验楼",
        },
        methods: {
          // 实例方法对象
          handleClick: function () {
            this.name = this.name.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述

动态参数

上面属性或者事件我们都是写死的，其实在 Vue 它也可以是动态的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue</title>
    <!--引入 vue.js-->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <!-- 指令 动态参数-->
    <div id="app">
      <p>我叫：{{name}}</p>
      <button v-on:[event]="handleClick">点我</button>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          name: "实验楼",
          event: "click",
        },
        methods: {
          handleClick: function () {
            this.name = this.name.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>

event 此时的值为 click，那我们点击按钮时就会触发事件回调，运行结果和上面一样。

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，大致分为三类，后面课程我们会一一接触到：

事件修饰符
按键修饰符
系统修饰符

例如，事件修饰符中的 .prevent 修饰符和原生 event.preventDefault() 效果一样，可以阻止事件默认行为，在表单中点击提交按钮，就会发生页面跳转，但是使用了 .prevent 就不会发生跳转，例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue</title>
    <!--引入 vue.js-->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <!-- 指令 修饰符-->
    <div id="app">
      <form action="/" v-on:submit.prevent="submit">
        <button type="submit">提交</button>
      </form>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {},
        methods: {
          submit: function () {
            console.log("成功提交！");
          },
        },
      });
    </script>
  </body>
</html>

没有加修饰符，发生默认跳转，运行效果：
在这里插入图片描述
使用了 .prevent，阻止了默认跳转，运行结果：

指令缩写

v- 是 Vue.js 中特定的标志，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为时，v- 前缀很有帮助，但是频繁使用到，也会让人感觉不到代码的简洁之道，就会感到不是太人性化。同时，在构建由 Vue 管理所有模板的单页面应用程序时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

v-bind

上面例子中我们使用了 v-bind 绑定属性。

<a v-bind:href="url">实验楼</a>

我们可以简写为：

<a :href="url">实验楼</a>

同样的使用 v-bind 绑定的其他属性也可以简写。

例如，v-bind:class=“className” 可以简写为 :class=“className”，v-bind:value=“myValue” 可以简写为 :value。

v-on

上面 v-bind 指令提供简写，同样 v-on 指令也提供简写，但是与 v-bind 有一些差异，v-on: 使用 @ 简写。

<!-- 完整语法 -->
<button v-on:click="handleClick">点我</button>
<!-- 缩写 -->
<button @click="handleClick">点我</button>

实验总结

双大括号表达式
插值
v-bind 指令
v-on 指令
指令缩写

本小节让我们学习了 Vue.js 模板语法，了解双大括号表达式，以及模板插值，模板上简单的指令应用，指令的缩写模式等，相信大家对 Vue.js 已经有了初步了解，看看自己掌握没有，我们将进入更深入的学习。

IT小崽子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue模板语法（二）

双大括号表达式插值v-bind 指令v-on 指令指令缩写本小节让我们学习了 Vue.js 模板语法，了解双大括号表达式，以及模板插值，模板上简单的指令应用，指令的缩写模式等，相信大家对 Vue.js 已经有了初步了解，看看自己掌握没有，我们将进入更深入的学习。
复制链接

扫一扫