Vue指令的使用

最新推荐文章于 2024-06-13 15:13:31 发布

张可盐

最新推荐文章于 2024-06-13 15:13:31 发布

阅读量722

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_44091773/article/details/104671093

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前言

Vue.js（/vjuː/，或简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明，Vue有着89%的开发者满意度。在GitHub上，该项目平均每天能收获95颗星，为Github有史以来星标数第3多的项目。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　——维基百科

Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

CND的引用

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
通用模式

var vm = new Vue({
  // 选项
})

1.`v-once`

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 渲染一次  -->
<div v-once>{{ mes }}</div>

2.`v-text`

更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

3.`v-html`

更新元素的 innerHTML

注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

<body>
    <div id="app">
        <p v-text="html"></p>
        <p v-html="html"></p>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
     var app = new Vue({
          el:'#app',
          data:{
              html:"<b>你好大</b>"
          }
      })
</script>
</body>

<!--
效果如下
1.<b>你好大</b>
2.你好大（被加粗过的文字）
-->

4.`v-show 、v-if`

v-show:根据表达式之真假值，切换元素的 display CSS 属性。

注意，v-show 不支持 <template> 元素，也不支持 v-else

v-if：直接操作DOM对象，会更加消耗性能
用法相同，但是要根据不同的场景来选择，详情区别如下

body>
    <div id="app">
        <p v-show="bool">v-show</p>
        <p v-if="bool">v-if</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
     var app = new Vue({
         el:'#app',
         data:{
             bool:false
         }
     })
</script>
</body>

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

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

5.条件判断语句

和众多编程语言的条件判断语句一样，在vue中，同样包含v-if,v-else-if,v-else ，其中v-if，之前已经提到，这里说下v-else-if和v-else
v-else：限制：前一兄弟元素必须有 v-if 或 v-else-if，当然这个v-else也不是必须的，根据自己的业务逻辑可有可，可有的前提是不能自己单独使用
此外，在vue中，判断两者是否相等使用===

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if：前一兄弟元素必须有 v-if 或 v-else-if，可以与v-if、v-else链式使用。

<body>
    <div id="app">
        <div v-if="type === 'A'">A</div>
        <div v-else-if="type === 'B'">B</div>
        <div v-else-if="type === 'C'">C</div>
        <div v-else>
            Not A/B/C
        </div>

        <!--
           当想要切换多个元素的时候，可以使用<template>包裹住多个元素
           并使用v-if
           如果为值=false,最终的渲染结果将不包含 <template> 元素
         -->

        <template v-if="tf">
            <h1>雪暗凋旗画，风多杂鼓声。</h1>
            <h1>宁为百夫长，胜作一书生。</h1>
        </template>

        <template v-else="tf">
            <h1>烽火照西京，心中自不平。</h1>
            <h1>牙璋辞凤阙，铁骑绕龙城。</h1>
        </template>

    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            type:"A",
            tf:false
        }
    })
</script>

6.`v-for`

v-for可以循环的数据类型如下：

Array
Object
number
string
Iterable (2.6 新增)

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法，为当前遍历的元素提供别名。

//可以为数组索引指定别名 (或者用于对象的键)：
<div v-for="(item, index) in items"> {{ 数值，下标 }}</div>
<div v-for="(val, key) in object">{{ 数值，下标 }}</div>
<div v-for="(val, name, index) in object">{{ 数值，key , 下标}}</div>

实例如下：

<body>
    <div id="app">
  
        <ul v-for="(item,index) in array" v-if="item > 700">
            <li>{{index}}:{{item}}</li>
        </ul>

        <ul v-for="(value, name, index) in object" v-bind:key="index">
            <li>{{index}}-{{name}}：{{value}}</li>
        </ul>
        
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            array:[123,456,789,741],
            object:{
                name:"jack",
                age:18,
                sez:"man",
                address:"BeiJing"
            }
        }
    })
</script>
</body>

<!-- 结果输出
	2:789
	3:741
	
	0-name：jack
	1-age：18
	2-sez：man
	3-address：BeiJing
-->

在这里演示了两个实例，一个是array数组，一个是object对象，都使用v-for进行循化遍历。在迭代的同时可以使用之前用过的条件进行过滤选择。v-for默认使用“就地更新”的策略：在每次遍历的时候Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，所以我们可以给每一项提供一个唯一 key attribute，也就是第二项提到的v-bind:key="index"，对于key的使用，这里只是简单提及，具体详见官网：维护状态，同时v-bind的使用会在下面提及。

7.`v-on`

缩写：@
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。
修饰符：

.stop - 调用 event.stopPropagation() 阻止冒泡到父元素。
.prevent - 调用 event.preventDefault() 消除元素默认的动作。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left-只当点击鼠标左键时触发。
.right - 只当点击鼠标右键时触发。
.middle -只当点击鼠标中键时触发。
.passive - 以 { passive: true } 模式添加侦听器
.exact- 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<body>
    <div id="app">
        <button v-on:click="counter += 1">Add 1</button>
        <!-- 简写方式 v-on: = @ -->
        <button @click="counter += 2">Add 2</button>
        <p>The button above has been clicked {{ counter }} times.</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        }
    })
</script>
</body>

以上就是v-on的简单实用，第二个按钮是使用的简写方式，简写不光有这一个，还有下面的属性绑定指令……然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称：

<body>
    <div id="app">
        <!--不进行参数传递的时候，方法名加不加括号其实无所谓-->
        <button @click.left="function1()">button1</button>
        <button @click.middle="function2('哈哈哈哈',$event)">button2</button>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            counter: 10
        },
        methods:{
            function1:()=>{
                console.log("function1");
            },
            function2:function(value,event){
                console.log(value,this.counter,event);
            }
        }
    })
</script>
</body>

如上所示，不进行参数传递的时候，方法名加不加括号其实无所谓，想要在内联语句处理器中访问原始的 DOM 事件，可以用特殊变量 $event作为参数传入方法。当然方法可以使用箭头函数，但是如果想访问在data中定义的数据的话，需要使用this。因为箭头函数的this与上一级作用域中的this指向同一个地方，所以需要使用function普通函数。除此之外，前面提到的事件修饰符这里也用到了，修饰符是由点开头的指令后缀来表示的，第一个按钮只能使用鼠标左键才能触发点击事件，第二个按钮需要使用鼠标中键才能触发点击事件。
除此之外还有按键修饰符，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit">

除了按键修饰符，还有按键码，系统化修饰键等等，事件监听内容较多，详细信息可以访问官网v-on

8.`v-bind`

缩写：:
用法：

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式
在绑定 class或 style attribute 时，支持其它类型的值，如数组或对象
没有参数时，可以绑定到一个包含键值对的对象，此时 class 和 style 绑定不支持数组和对象。

<body>
    <div id="app">
        <img v-bind:src="url" width="100px">
        <!-- 缩写形式 -->
        <img :src="url" width="100px">
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            url:"https://cn.vuejs.org/images/logo.png"
        }
    })
</script>
</body>

以上就是v-bind的简单实例，在浏览器中打开，都可以看到两个图片成功被渲染。除此之外，该指令还被应用于Class 与 Style 绑定。

绑定 HTML Class

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<style>
   .word {
        font-size: large;
        color: darkblue;
    }
    .back {
        background-color: antiquewhite;
    }
    .wweight {
       font-weight: bolder;
    }
</style>

<body>
    <div id="app">
       <p class="wweight" :class="{'word':true,back:true}">北国风光，千里冰封，万里雪飘</p>
       <p class="wweight" :class="classObject">北国风光，千里冰封，万里雪飘</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            url:"https://cn.vuejs.org/images/logo.png",
            classObject:{
                word:true,
                back:false
            }
        }
    })
</script>
</body>

最后渲染结果如下：

<p class="wweight word back">北国风光，千里冰封，万里雪飘</p>
<p class="wweight word">北国风光，千里冰封，万里雪飘</p>

首先我们定义了三个样式，在第一个<p></p>class的取值与否存在取决于后面的布尔值，其中类名可以加引号也可以不加。此外，v-bind:class 指令也可以与普通的 class attribute 共存。比如前面的class="wweight"。除此之外，在第二个<p></p>中我们直接把在data中定义的一个对象传递过去了，是否取值也是由其取值直接控制，和第一个起到一样的效果！

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<body>
    <div id="app">
        <p class="wweight" :class="[wordClass,backClass]">望长城内外</p>
        <p class="wweight" :class="['word','back']">惟余莽莽</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            wordClass: 'word',
            backClass: 'back'
        }
    })
</script>
</body>

数组和对象一样，也可以两种写法，不过要注意的是，使用第二种的时候，要加单引号，否则会识别不出来，最后的渲染结果如下：

<p class="wweight word back">望长城内外</p>
<p class="wweight word back">惟余莽莽</p>

绑定 HTML Style

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS属性名可以用驼峰式或短横线分隔 (用引号括起来) 来命名：

<body>
    <div id="app">
            <!--原生内联样式-->
          <p style="fontSize: 30px;color: antiquewhite">大河上下，顿失滔滔</p>
        
          <p :style="{fontSize: fontSize+'px' , color: activeColor}">大河上下，顿失滔滔</p>
           <!--直接绑定到一个样式对象通常更好，这会让模板更清晰：-->
          <p :style="styleObject">大河上下，顿失滔滔</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            activeColor: 'antiquewhite',
            fontSize: 30
        },
        styleObject: {
           color: 'red',
           fontSize: '30px'
        }
    })
</script>
</body>

渲染结果如下：

<p style="font-size: 30px; color: antiquewhite;">大河上下，顿失滔滔</p>
<p style="font-size: 30px; color: antiquewhite;">大河上下，顿失滔滔</p>
<p style="color: red; font-size: 30px;">大河上下，顿失滔滔</p>

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上，这里的数组放置的都是对象形式：

<body>
    <div id="app">
          <p :style="[styleObject,nstyleObject]">大河上下，顿失滔滔</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            styleObject: {
                color: 'red',
                fontSize: '30px'
            },
            nstyleObject: {
               background:"#01a1ff"
            }
        }
    })
</script>
</body>

渲染结果如下

<p style="color: red; font-size: 30px; background: rgb(1, 161, 255);">大河上下，顿失滔滔</p>

9.`v-model`

之前介绍的指令都是数据的单向传递，我们可以使用v-model在表单控件或者组件上创建双向绑定，但是这个双向绑定只能在下面的DOM中才有效：

<input>		<select>	<textarea>

修饰符：

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

<input type="text" v-model.number="numb">
<input type="text" v-model.trim="spanc">
<input type="text" v-model.number="change">

实例演示

<body>
    <div id="app">
        <input v-model.lazy="text">
        <p>{{text}}</p>

        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <br>
        <span>Checked names: {{ checkedNames+1 }}</span>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            text:"",
            checkedNames:[]
        }
    })
</script>
</body>

首先定义了一个简单的<input>，然后用<p></p>显示具体的数据。后面添加了.lazy修饰符，也就是说当鼠标的光标离开输入框的时候，下面会显示输入的数据。接着定义的是一个多选框，原理和上一个差不多，在data中定义一个数组，用来接收选中的数值。类似的还有很多，可以参考官网-表单输入绑定。

10.`v-cloak`

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    [v-cloak] {
        display: none;
    }
</style>
</head>
<body>
<div id="app" v-cloak>
    {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data:{
            message:"I am a message"
        }
    })

</script>
</body>

当我们把网速调慢可以看到，在没有v-cloak的时候，先是加载出{{ message }}然后才是I am a message，当我们加上指令后时候刷新，发现没有了中间步骤，直接显示I am a message！

11.v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签，用上面的案例，如果把v-cloak换成v-pre那么就不会被Vue识别并渲染，最后渲染结果如下：

<div id="app"> {{ message }}</div>

在这里插入图片描述

张可盐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令的使用

入门目录1.`v-once`2.`v-text`3.`v-html`4.`v-show 、v-if`5.`v-else、v-else-if`6.`v-for`7.`v-on`8.`v-bind`9.`v-model`最后`v-block`CND的引用<script src="https://cdn.jsdelivr.n...
复制链接

扫一扫