Vue.js的内置指令

最新推荐文章于 2024-06-15 14:41:39 发布

x_莹

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量875

点赞数 20

文章标签： vue.js flutter 前端

本文链接：https://blog.csdn.net/2301_76249591/article/details/135221073

版权

前言

本文要记录的大概内容：

指令是Vue.js 模板中最常用的一项功能，主要职责是当其表达式的值改变时，将其产生的连带影响响应式地作用于DOM元素。Vue.js提供了很多内置指令，可以用简洁的代码来实现一些复杂的功能。这些内置指令是以v-开头的，它们作用于HTML元素，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，可以将指令看作特殊的HTML特性。在这一章中将学习到v-for、v-if、v-show、filter过滤器、按键修饰符等Vue.js的内置指令。本文主要介绍内置指令的相关内容，并通过若干实例熟练使用Vue.js的内置指令。

以下是本篇文章正文内容：

一、列表渲染指令

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

v-for循环普通数组

在表达式中，fruit 是数组，item 是当前的一条数据，index 代表当前索引值。列表渲染也可以用 in 来代替 of 作为分隔符。
如下所示：

<ul>
   <!-- <li v-for="(item,index) in fruit" :key="index">
        索引号- {{index}} - {{item}}
       </li> -->
      <li v-for="(item,index) of fruit" :key="index">
        索引号-{{index}} - {{item}}
     </li>
</ul>

效果图① 如下：
在这里插入图片描述
代码中还有一个key 属性，key 属性可以提高循环的性能。例如，在以上示图中，如果需要往 fruit 数组中新增数据，如果不用key属性的话，网页中整个列表都会被重新渲染，这样的代码会降低页面的性能，甚至在数据量多的时候会造成卡顿。这时，如果使用key值的话，Vue.js 就会只渲染新变化的内容。因此，key 属性可以增强渲染性能，避免重复渲染。

v-for循环对象

v-for 可以用来循环对象，为了更好地语义化，在以下示图中把参数改为了value、key和index，其中value 是属性值，key 是属性名，index是属性索引。

<ul>
      <li v-for="(value,key,index) in student" :key="index">
         索引号index:{{index}}+键名key:{{key}}+属性值value:{{value}}
      </li>
</ul>

效果图② 如下：
在这里插入图片描述

v-for循环对象数组

<ul>
       <li v-for="(item,index) in fruitList">
         {{index}}:{{item.name}}-{{item.color}}
    </li>
</ul>

效果图③ 如下：
在这里插入图片描述

v-for循环整数

 <!-- 整数循环 i of/in 数值 -->
        <ul>
            <li v-for="i in 10">{{i}}</li>
        </ul>

效果图④ 7如下：
在这里插入图片描述

v-for 指令是在模板编译的代码生成阶段实现的，当遍历数组或对象时需要使用列表渲染指令v-for。
当Vue.js用v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue.js将不再移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
整合以上v-for的基本用法，如下图所示：
（部分效果图已贴图如上① ~④ 所示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染语句V-for</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
        <ul>
            <!-- <li v-for="(item,index) in fruit" :key="index">
                索引号- {{index}} - {{item}}
            </li> -->
            <li v-for="(item,index) of fruit" :key="index">
                索引号-{{index}} - {{item}}
            </li>
        </ul>

        <!-- 对象数组的遍历 -->
        <ul>
            <li v-for="(item,index) in fruitList">
                {{index}}:{{item.name}}-{{item.color}}
            </li>
        </ul>

        <!-- 遍历对象 key-value:键值对 -->
        <ul>
            <li v-for="(value,key,index) in student" :key="index">
                索引号index:{{index}}+键名key:{{key}}+属性值value:{{value}}
            </li>
        </ul>

        <!-- 整数循环 i of/in 数值 -->
        <ul>
            <li v-for="i in 10">{{i}}</li>
        </ul>

        <!-- 乘法口诀表 -->
        <ul>
            <li v-for="i in 9">
                <span v-for="j in i">
                    {{i}} * {{j}} ={{i*j}} &nbsp;&nbsp;&nbsp;
                </span>
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                fruit:['香蕉','苹果','栗子'],
                fruitList:[
                {Id:1,name:'苹果',color:'红色'},
                {Id:2,name:'栗子',color:'栗色'},
                {Id:3,name:'香蕉',color:'黄色'},
                {Id:4,name:'橘子',color:'橘色'},
                ],
                student:{name:'张飞',gender:'男',professor:'将军'}
            }
        });
    </script>
</body>
</html>

二、条件渲染指令

v-if 基本用法

v-if 是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

v-if 的使用一般有两个场景。

（1）通过条件判断展示或者隐藏某个元素或者多个元素。
（2）进行视图之间的切换。

v-if

seen是Vue.js定义的一个变量。v-if的变量值一般是true或者 false,当变量值为true时则显示元素，当变量值为false时隐藏元素。

<!-- 使用v-if进行条件判断，条件为true则显示此标签，false则不显示 -->
    <div id="app">
        <p v-if="seen">现在你看到我了</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                seen: true
            }
            });
    </script>

v-else

可以用 v-else指令给 v-if 添加一个 “else” 块。
当seen变量值为 true 时，网页上显示“现在你看到我了”，当seen变量值为 false 时则显示“你看不到我了”。

<div id="app">
        <p v-if="seen">现在你看到我了</p>
        <p v-else>你看不到我了</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                seen: true // false
            }
        })
    </script>

v-else-if

用 v-if 的 else-if 块。
当 type 变量值为1时，网页上显示“1”；当type变量值为2时，网页上显示“2”；当type变量值为3时，网页上显示“3”。
注意：v-else、v-else-if 必须跟在v-if或者v-else-if之后。

<div id="app">
        <p v-if="type==1">1</p>
        <p v-else-if="type==2">2</p>
        <p v-else="type==3">3</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                type: 2
            }
        })
    </script>

v-show基本用法

v-show 是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。
带有 v-show 的元素始终会被渲染并保留在DOM中，v-show 指令使用CSS样式来控制元素的显示和隐藏。值得注意的是，v-show 不支持 < template >元素，也不支持v-else。

<div id="app">
        <hl v-show="ok">Hello!</h1>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok: true
            }
        })
    </script>

v-if与v-show的选择

v-if 和v-show 都可以用来动态地控制DOM元素的显示和隐藏，但是，两者是有区别的。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；v-if 也是“惰性”的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。

<div id="app">
        <h1 v-show="seenShow">v-show:true</h1>
        <h1 v-show="notSeenShow">v-show:false</h1>
        <hl v-if="seenIf">v-if:true</h1>
        <hl v-if="notSeenIf">v-if:false</h1>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                seenShow: true,
                notSeenShow: false,
                seenIf: true,
                notSeenIf: false
            }
        })
    </script>

运行上面代码后，检查浏览器的 Elements，可以看到如下图所示的内容。
在这里插入图片描述
可以看到使用 v-if 隐藏的内部元素不会被显示，Vue.js不会尝试生成对应的html代码，而v-show 是通过CSS的display：none 来控制的。那么，v-if和v-show 应该如何选择使用呢？
一般来说，v-if 每次插入或者移除元素时都必须生成元素内部的DOM树，因此具有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

三、filters过滤器

Vue.js允许自定义过滤器，过滤器的作用可被用于一些常见的文本格式化（也就是修饰文本，但是文本内容不会改变）。
过滤器可以用在两个地方：双花括号插值或v-bind表达式。
过滤器分全局过滤器和局部过滤器

局部过滤器

<div id="app">
        <p>电脑价格:{{price |addPriceIcon}}</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                price: 200
            },
            filters: {
                //处理函数
                addPriceIcon(value) {
                    console.log(value)//200
                    return ' ￥' + value
                }
            }
        })

这段代码的需求是，将价格前面加上人民币符号（￥）。模板中文本(price）后边需要添加管道符号（ | ）作为分隔，管道符（ | ）后边是文本的处理函数（addPriceIcon），处理函数的第一个参数是管道符前边的文本内容（price）。在实际开发中，一个页面可能有上千个价格需要添加，或者有几十个页面需要添加的情况，所以这种通用机制很重要。

全局过滤器

<div id="app">
        <p>电脑价格：{{price |addPriceIcon}}</p>
    </div>
    <script>
        Vue.filter("addPriceIcon", (value) => {
            return "￥" + value
        })

        new Vue({
            el: "#app",
            data: {
                price: 200
            }
        })
    </script>

当全局过滤器和局部过滤器重名时，会采用局部过滤器。
过滤器函数总接收表达式的值（之前的操作链的结果）作为第一个参数。在上述例子中，addPricelcon 过滤器函数将会收到 price 的值作为第一个参数。

过滤器的串联

过滤器还可以串联，例如：

{{ price | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 price 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA的结果传递到 filterB中。过滤器的串联如下所示。

 <div id="app">
        <p>电脑价格：{{price |addPriceIcon |addChinesePriceIcon}}</p>
    </div>
    <script>
        Vue.filter("addPriceIcon", (value) => {
            return "￥" + value
        })

        Vue.filter("addChinesePriceIcon", (value) => {
            return "人民币" + value
        })

        new Vue({
            el: "#app",
            data: {
                price: 200
            }
        })
    </script>

过滤器接收多个参数

过滤器是JavaScript函数，因此可以接收两个参数：

{ price | filterA(arg) }

这里，filterA 被定义为接收两个参数的过滤器函数。其中 price 的值作为第一个参数，表达式 arg 的值作为第二个参数。过滤器接收两个参数如下所示。

<div id="app">
        <p>电脑价格: {{price |addPriceIcon(unit)}}</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                price: 200,
                unit: "(元)"
            },
            filters: {
                //处理函数
                addPriceIcon(valuel, value2) {
                    return ' ￥' + valuel + value2;
                }
            }
        })
    </script>

四、按键修饰符

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。
在监听键盘事件时，经常需要检查详细的按键。Vue.js允许为v-on在监听键盘事件时添加按键修饰符，例如:

<！-- 只有在'key'是'enter'时调用'submit（)'-->
<input v-on:keyup.enter="submit">
<！--缩写语法-->
<input @ keyup.enter="submit">

这里列出官方提供的所有按键修饰符别名：

enter=>// enter键
tab=>// tab键
delete（捕获“删除”和“退格”按键）=>//删除键
esc=>// 取消键
space=>// 空格键
up=>// 上
down=>// 下
left=>//左
right=>//右

以回车键为例，键盘监听事件如下所示。

   <div id="app">
        <input type="text" name="" id="" v-model="content" v-on: keyup.enter="fun(content)" />
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                content:''
            },
            methods: {
                fun: function (data) {
                    alert('录入内容为：' + data)
                    this.content = ''
                }
            }
        });
    </script>

Vue.js 还支持自定义按键修饰符，可以利用按键对应的键码来实现。
例如，需要把上面代码的功能改成松开 F2 后弹出输入的内容，而 F2 对应的键码是113，那么就可以对代码进行如下修改，如下所示。

<input type =" text" name =""id ="" v-model =" content" v-on: keyup. 113 =" fun(content)"/>

参考教材《Vue.js开发教程》

总结

在本文中学习了Vue.js的内置指令。学习了用v-for 来循环数组、对象、对象数组，迭代整数；学习了 v-if、v-else、v-else-if 及v-show，并对 v-if 和 v-show 进行了比较；学习了 filter 过滤器进行文本格式化，包括局部过滤器、全局过滤器、过滤器串联，以及如何使用过滤器接收多个参数；学习了按键修饰符，包括官方提供的按键修饰符和自定义按键修饰符。

x_莹

关注

20
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
Vue.js的内置指令

指令是Vue.js 模板中最常用的一项功能，主要职责是当其表达式的值改变时，将其产生的连带影响响应式地作用于DOM元素。Vue.js提供了很多内置指令，可以用简洁的代码来实现一些复杂的功能。这些内置指令是以v-开头的，它们作用于HTML元素，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，可以将指令看作特殊的HTML特性。在这一章中将学习到v-for、v-if、v-show、filter过滤器、按键修饰符等Vue.js的内置指令。
复制链接

扫一扫