Vue插值表达式及常用指令

扶苏1002

已于 2024-02-01 18:01:48 修改

阅读量1.8k

点赞数 8

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

于 2024-02-01 17:54:39 首次发布

本文链接：https://blog.csdn.net/qq_44741577/article/details/135974465

版权

Vue2 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、Vue插值表达式

概述： 插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用{{变量名}}方式绑定Vue实例中data中的数据变量。会将绑定的数据实时的显示出来。

注意：{{}}括起来的区域，就是一个就是js语法区域，在里面可以写部份的 js 语法

语法： vue模板的表达式为{{ 变量 }}

注意： 表达式中不能定义变量或函数，也不可以写 if 条件或循环

1.1. 绑定变量

<div id="app">
    <!-- 绑定变量 -->
    <div>{{ title }}</div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            title: 'hello vue'
        }
    })
</script>

1.2. 进行计算

<div id="app">

    <!-- 进行计算 vue模板中不太建议在里面写运算 -->
    <div>{{ 1+1 }}</div>

</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            title: 'hello vue',
        }
    })
</script>

注意： vue模板中不太建议在表达式中写运算，但是比较推荐写函数。

1.3. 调用函数或方法

<div id="app">
    <!-- 调用函数或方法 -->
    <div>{{sum()}}</div>

</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            title: 'hello vue',
        },
        methods: {
            sum() {
                return 1 + 2
            }
        }
    })
</script>

注意： 函数可以写在data中的，就像下面这样，但是不太建议，因为data中的数据都会被劫持，但是函数是没有必要劫持。所以vue为了提升性能，新增一个配置选项，用于定义函数方法method，它不会被劫持，就是上面的写法。

<div id="app">
    <!-- 调用函数或方法 -->
    <div>{{sum()}}</div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            title: 'hello vue',
            sum
        }
        function sum() {
        return 1 + 2
    }
</script>

1.4. 调用js内置方法

<div id="app">
    <!-- 调用js内置方法  不太推荐 -->
    <div>{{ '电饭锅是'.substr(0,3) }}</div>

</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            title: 'hello vue',
        }
    })
</script>

同样这种方式不推荐。

1.5. 进行三目运算

<div id="app">
    <!-- 三目运算 -->
    <div>{{ age<20?'未成年':'成年' }}</div>

</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            age: 18,
            title: 'hello vue',
        }
    })
</script>

二、常用指令

指令(Directives)就是vue给html标签提供的一些自定义属性，这样属性都是带有v-前缀的特殊属性。指令特性的值预期是单个JS表达式(v-for是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

vue中的指令是可以操作真实的dom的。

指令扩展了html标签的功能、大部分的指令的值是js的表达式，取代了DOM操作。

2.1. v-html

v-html 指令，会解析字符串中的html标签，解析输出，一般用于将后台添加的富文本内容，在前台显示所用。

首先，我们看一下没用指令时，普通表达式的输出效果：

<div id="app">
    <!-- 表达式，不会对于标签进行解析输出，它会转义后输出，为了安全 -->
    <div>{{ title }}</div>
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            title: `<iframe src="https://www.mmonly.cc/wmtp/fjtp/" frameborder="1" width="600"></iframe>`
        }
    })
</script>

在这里插入图片描述

我们可以发现，普通表达式不会对于标签进行解析输出，它会转义后输出，为了安全（防止XSS跨站脚本攻击）。

使用 v-html 指令时，表达式的输出效果：

<div id="app">
    <!-- 解析字符串中的html标签，解析输出,一般用于在后台添加的富文本内容，在前台显示所用 -->
    <!-- 解决闪现 -->
    <div v-html="title"></div>
</div>
<script>
      const vm = new Vue({
        el: '#app',
        data: {
          title: `<iframe src="https://www.mmonly.cc/wmtp/fjtp/" frameborder="1" width="600"></iframe>`
        }
      })
</script>

在这里插入图片描述

2.2. v-text

在使用{{}}展示或更新页面数据时：当网速比较慢时，会出现一个不好的过度现象，会让用户先看到我们的表达式（{{msg}}），然后才看到data中的值，即所谓的闪烁问题！

使用 v-text 指令的作用：

转义输出，为了解决早期没有使用工程化时，直接script引入vue进行使用，会出现花括号闪现问题。
一般用不到，在单文件vue中（使用工程化），不会有这样的闪现问题，所以用不到。

注意：

v-html 也可以解决花括号闪现问题。
vue中提供一个专门用于解决闪现问题的指令 v-cloak
v-html或v-text虽然能够解决闪现，但是有的时候，一些项目在前期没有用它，这时候如果全部去修改，工程量有点大，可以用此指令

2.3. v-cloak

作用： 解决浏览器在加载页面时因存在时间差而产生闪烁问题，需要配合CSS样式使用。

在使用{{}}展示或更新页面数据时：当网速比较慢时，会出现一个不好的过度现象，会让用户先看到我们的表达式（{{msg}}），然后才看到data中的值，即所谓的闪烁问题！

语法：

# css中设置
/* css3的属性选择器 */
[v-cloak] {
  display: none !important;
}
# html
<div v-cloak>
  {{ message }}
</div>

2.4. v-pre

此指令一个性能优化的指令，使用它，可以提升性能。
跳过这个元素和它的子元素的编译过程，跳过大量没有指令的节点会加快编译。

Vue 在模板解析的过程中，首先会将代码抽象成抽象语法树，然后再将抽象语法树解析成虚拟Dom。而 v-pre 指令的作用就是将解析成虚拟Dom的过程跳过（静态驱动），将一段html当成字符串存起来，当这段html需要显示的时候，直接将字符串显示在页面，并不解析成虚拟Dom，这样做性能很高，但是这意味着这段html变成了静态数据，不能动态更新。如果数据需要动态显示，则不能使用该指令。

<div id="app">
    <!-- ul中的数据,它是一个固定的,没有通过vue中的数据来渲染 -->
    <!-- 无需把它们转为虚拟dom,直接存储html,直接输出显示 -->
    <ul v-pre>
      <li>首页</li>
      <li>列表</li>
    </ul>
</div>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
          
      }
    })
</script>

2.5 v-once

Vue 是双向数据绑定，数据和标签一旦绑定，两者会互相影响，但有的时候我们只需要数据和标签（视图）绑定一次，这时候就需要用到 v-once 指令。

只渲染元素和组件一次，之后元素和组件将失去响应式功能。

v-once 是一种性能优化的方案。

<div id="app">
    <div>{{title}}</div>
    <!-- 对于数据,只绑定一次 性能优化 -->
    <div v-once> v-once --- {{title}}</div>
</div>

  <!-- 第3步：实例化vue -->
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        title: 'hello vue'
      }
    })
</script>

2.6 v-if 和 v-show

概述：

由于插值表达式中不允许写if条件判断和循环，所以 Vue 为我们提供了一种进行条件判断的方案，即 v-if 和 v-show 指令。

两条指令都是根据表达式的布尔值 (true/false) 进行判断是否渲染该元素。

二者区别：

v-if：是对dom元素的移除和创建。如果条件不成立，则不创建或删除已创建元素，初始化它的性能更高一些，如果频繁切换则性能低一些，如果与权限显示相关，建议用v-if。
v-show：是通过修改标签的display值。如果条件不成立，通过样式来隐藏，初始化它的性能低一些，如果频繁切换则性能更好一些。

条件不成立时，使用v-if指令，Dom 元素直接不创建，而v-show则会创建元素，通过修改元素的display属性来隐藏元素。

2.7 多条件判断

<div id="app">
    <!-- 多条件 -->
    <div v-if="age<10">儿童</div>
    <div v-else-if="age<20">少年</div>
    <div v-else>老年</div>
</div>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        age: 12
      }
    })
</script>

2.8 v-bind

概述：

动态地绑定一个或多个属性。

语法：

标准语法：v-bind:属性=“动态数据”
简写语法：:属性=“动态数据”

使用：

<div id="app">
  <!-- 如果我们要求src属性中的数据它是通过data数据源中得到的 -- 动态绑定写法 -->
  <!-- 
      语法：
      标准语法：v-bind:属性="动态数据"
      简写语法：:属性="动态数据"
-->
  <img v-bind:src="src" alt="" />
  <img :src="src" alt="" />
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      src: "http://www.mobiletrain.org/images_index/right-fixed-face.png",
    },
  });
</script>

2.9 v-for

概述：

根据一组数组或对象的选项列表进行渲染。

v-for 指令需要使用(item,index) in 数组或对象形式的特殊语法，同时还需要指定key值，key的作用在 vue 进行新旧数据比对渲染页面里，如果有key值会提升比对性能，加快渲染，key使用唯一的值来赋值。

vue 中对于 v-for 进行了增强，它可以用 for in/of 都可以，而且两者都可以进行对象的迭代。

语法：

迭代数组：v-for="(元素,索引) in/of 数组"
迭代对象：v-for="(元素,键名,索引) in/of 对象"

注意：

在使用语法中，vue2 中小括号可以写，也可以不写，在 vue3 中一定要写小括号。
Vue2 中如果一个标签中同时有 v-if 和 v-for，则 v-for 的优先级高于 v-if，所以在vue2中不推荐两者在一个标签中。vue3中v-if优先级高于v-for。
建议给循环项每个添加一个 key 来作标识，用于提升性能，key 值，一定要唯一不重复的，不太建议使用循环的索引当作 key 值，防止索引塌陷。一般在和后台请求数据时，要求后台提供一个唯一的 id 给我们。
案例：

循环数组

<div id="app">
    <!-- 加括号写法 -->
    <li v-for="(item,index) in user1">{{index}} -- {{item}}</li>
	<!-- 不加括号写法 -->
    <li v-for="item,index in user1">{{index}} -- {{item}}</li>
    <!-- 添加 key 作为标识的写法 -->
    <li v-for="item,index in user2" :key="item.id">{{item.name}}</li>
</div>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        user1: ['张三', '李四', '王五'],
        user2: [{ id: 2, name: '赵六' }, { id: 1, name: '孙七' }]
      }
    })
</script>

在这里插入图片描述

循环对象

<div id="app">
    <div id="app">
        <!-- 循环对象 -->
        <div v-for="item,key,index in user" :key="key">
          {{index}} -- {{key}} -- {{item}}
        </div>
      </div>
</div>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        user: { id: 1, name: '张三' } 
      }
    })
</script>

在这里插入图片描述

2.10 v-on

概述：

该指令用来绑定事件监听器（事件绑定）。

语法：

v-on:事件名="实现的方法[此方法定义在vue配置中的methods中]"

由于 v-on 使用很频繁，所以可以简写：@事件名=“方法”`

注意：绑定的方法后面，它可以跟小括号，也可以不跟小括号。

<div id="app">
    <h3>{{num}}</h3>
    <button v-on:click="clickFn">点击事件</button>
</div>
<script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 绑定的方法是可以写在data配置中，但是不建议，data中属性会进行劫持
        // clickFn: function () {
        //   console.log('我是一个点击事件');
        // }
        num: 100
      },
      methods: {
        clickFn: function () {
          this.num++;
        }
      }
    })
</script>

注意：绑定的方法是可以写在data配置中，但是不建议，data中属性会进行劫持，该方法没有被劫持的必要。

上面的案例还可以使用简写的方式实现：

<div id="app">
    <h3>{{num}}</h3>
    <!-- 简写 -->
    <button @click="clickFn">点击事件</button>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            num: 100
        },
        // 注：methods中定义方法不用使用箭头函数，但是在方法体中建议使用箭头函数，用来保持this指向
        methods: {
            // 简写
            clickFn() {
                setTimeout(() => {
                    this.num++
                }, 1000);
            }
            // 箭头函数 没有作用域，找父级
            // 这里由于使用箭头函数，this指向window，故num的值不会发生改变
            // clickFn: () => {
            //   console.log(this);
            //   this.num++
            //   console.log('我是一个点击事件');
            // }
        }
    })
</script>

注意：上面方法体中简写函数时，methods中定义方法不用使用箭头函数，但是在方法体中建议使用箭头函数，用来保持this指向。

2.10.1. event事件对象

上文说到，事件绑定的方法后面，可以跟小括号，也可以不跟小括号。那么，具体二者有什么区别呢？

如果绑定方法时，没有写小括号，则vue 在解析时，会自动给你映射一个 event 给绑定方法
如果绑定方法时，有写小括号，则需要手动把 event 对象（$event）传过去，$event 可以传多个，但是建议只传一个，一般写在第1位或最后1位

<div id="app">
  <!-- 如果你绑定方法时，没有写小括号，则vue在解析时，会自动给你映射一个event给绑定方法 -->
  <button @click="clickFn">点击事件</button>
  <!-- 
       如果你绑定方法时，有写小括号，则需要手动把event对象传过去$event,$event可以传多个，但是建议只传一			 个，一般写在第1位或最后1位
  -->
  <button @click="clickFn($event)">点击事件</button>
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      clickFn(evt) {
        console.log(evt);
      },
    },
  });
</script>

2.10.2. 事件对象的使用

<div id="app">
  <button uname="李四" data-uname="张三" @click="clickFn($event)">
    点击事件
  </button>
  <input type="text" @keyup="onEnter" />
</div>
<script>
  const vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      // event可以用它来完成dom数据的获取
      clickFn(evt) {
        // 自定义的需要使用getAttribute方法，简写（evt.target.name）必须使用标签内置属性
        console.log(evt.target.getAttribute("uname"));
        console.log(evt.target.dataset.uname);
      },
      onEnter(evt) {
        // 回车键的 keyCode 是13
        if (evt.keyCode === 13) {
          console.log(evt.target.value);
        }
      },
    },
  });
</script>

2.10.3. 事件修饰符

Vue 可以对事件添加一些通用的限制，例如添加阻止事件冒泡，Vue 对这种事件的限制提供了特定的写法，称之为修饰符。

在事件处理程序中，调用 event.preventDefault()（阻止默认行为）或 event.stopPropagation()（阻止事件冒泡）是非常常见的需求。尽管可以在方法中轻松实现这一点，但更好的方式是使用纯粹的数据逻辑，而不是去处理 DOM 事件细节。

Vue 事件修饰符处理了许多 DOM 事件的细节，让我们不再需要花费大量的时间去处理这些烦恼的事情，而将更多的精力用于程序的逻辑处理。

Vue 事件修饰符的语法如下：

v-on:事件.修饰符

在 Vue 中，事件修饰符主要有：

stop：等同于 JavaScript 中的 event.stopPropagation()，阻止事件冒泡。
capture：与事件冒泡的方向相反，事件捕获由外到内。
self：只会触发自己范围内的事件。
once：只会触发一次。
prevent：等同于 JavaScript 中的 event.preventDefault()，阻止默认事件的发生。
passive：执行默认行为。

stop

阻止了事件冒泡，相当于调用了event.stopPropagation方法

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>

prevent

阻止了事件的默认行为，相当于调用了event.preventDefault方法
默认行为： a标签跳转，表单提交等等，html标签自带的行为
.prevent可以取消这种默认行为

self

只当在 event.target 是当前元素自身时触发处理函数

<div v-on:click.self="doThat">...</div>

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

once

绑定了事件以后只能触发一次，第二次就不会触发

<button @click.once="shout(1)">ok</button>

capture

使事件触发从包含这个元素的顶层开始往下触发

<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
  obj2
  <div @click="shout(3)">
    obj3
    <div @click="shout(4)">obj4</div>
  </div>
</div>
</div>

输出结构: 1 2 4 3

passive

在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

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

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

native

让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

<my-component v-on:click.native="doSomething"></my-component>

扶苏1002

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Vue插值表达式及常用指令

插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用。
复制链接

扫一扫

专栏目录

Vue插值表达式及常用指令

文章目录

一、Vue插值表达式

1.1. 绑定变量

1.2. 进行计算

1.3. 调用函数或方法

1.4. 调用js内置方法

1.5. 进行三目运算

二、常用指令

2.1. v-html

2.2. v-text

2.3. v-cloak

2.4. v-pre

2.5 v-once

2.6 v-if 和 v-show

2.7 多条件判断

2.8 v-bind

2.9 v-for

2.10 v-on

2.10.1. event事件对象

2.10.2. 事件对象的使用

2.10.3. 事件修饰符

stop

prevent

self

once

capture

passive

native