vue指令

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量177 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wasdf231/article/details/125357590
版权

vue官网：https://cn.vuejs.org/

1、v-text

数据类型：string字符串。

给一个标签加了v-text 会覆盖标签内部原先的内容，str中的内容不会显式

<body>
    <div id="app">
        <h1 v-text="newStr">{{str}}</h1>
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            str: "默认数据",
            newStr: "学习Vue指令：v-text"
        }
    })
</script>

输出结果：
在这里插入图片描述

2、v-html

数据类型：string字符串。

双大括号会将数据内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。v-html更新元素的 innerHTML，内容中有HTML标签结构会将其解析为标签。

<body>
    <div id="app">
        <h1 v-html="str"></h1>
        <h1>{{str}}</h1>
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            str: "<span style='color:red;fong-size:30px';>学习Vue指令</span>"
        }
    })
</script>

输出结果：
在这里插入图片描述

3、v-show

数据类型：Boolean

根据表达式之真假值，显式或者隐藏数据，如果为假v-show给一个display：none的属性 让它不显示！不管条件为真还是假都会加载。

<body>

    <div id="app">

​        <h1 v-show="bol">{{ str}} </h1>

​    </div>

</body>

<script src="./js/vue.min.js"></script>

<script>

​    new Vue({

​        el: "#app",

​        data: {

​            str: "学习Vue指令：v-show",

​            bol: false

​        }

​    })

</script>
3.1条件为false，页面不显式，通过F12查看源码，是通过display：none样式隐藏了，无论条件为真还是假都会加载。

在这里插入图片描述

4、v-if、v-else-if、v-else

数据类型：Boolean

根据表达式之真假值，显式或者隐藏数据。如果条件为true，代码正常加载；如果条件为false，代码不加载。

<body>

    <div id="app">

​        	<h1 v-if="bol">{{ str}}

​            <h1 v-if="age<10 && age>=5">未成年</h1>

​            <h1 v-else-if="age>=10 && age<36">青年</h1>

​            <h1 v-else-if="age>=36 && age<= 60">成年</h1>

​            <h1 v-else="age>60">老年</h1>

​        </h1>

​    </div>

</body>

<script src="./js/vue.min.js"></script>

<script>

​    new Vue({

​        el: "#app",

​        data: {

​            str: "学习Vue指令：v-if",

​            bol: true,

​            age: 20

​        }

​    })

输出结果：
在这里插入图片描述

通过F12查看源码可以看到，条件为假根本不会加载。

在这里插入图片描述

v-show与v-if的区别
  • 控制手段不同
  • 编译过程不同
  • 编译条件不同

控制手段：v-show隐藏则是为该元素添加css–display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

v-show 由false变为true的时候不会触发组件的生命周期

v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

v-show与v-if的使用场景

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

5、v-for

基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string

该指令之值，必须使用特定的语法(item, index) in items, index是索引，可以省略。item是 为当前遍历元素提供别名(可以自己随便起名字) 。v-for的优先级别高于v-if之类的其他指令

<body>

    <div id="app">

​        <h1>v-for 循环遍历数组array ----> value</h1>

        <p v-for="value in arr">{{value}}</p>



​        <h1>v-for 循环遍历数组array ----> value- ---> index</h1>

        <p v-for="(value,index) in arr">{{index}}--->{{value}}</p>



​        <h1>v-for 循环遍历对象object ----> value</h1>

        <p v-for="value in obj">{{value}}</p>



​        <h1>v-for 循环遍历对象object ----> value- ---> key</h1>

        <p v-for="(value,key) in obj">{{key}}--->{{value}}</p>



​        <h1>v-for 循环遍历对象object ----> value ----> key ----> index</h1>

        <p v-for="(value,key,index) in obj">{{index}}--->{{key}}--->{{value}}</p>



​        <h1>v-for 循环遍历number ----> value</h1>

        <p v-for="value in num">{{value}}</p>



​        <h1>v-for 循环遍历string----> value</h1>

        <p v-for="(value,key) in str">{{key+1}}---->{{value}}</p>

​    </div>

</body>

<script src="./js/vue.min.js"></script>

<script>

​    new Vue({

​        el: "#app",

​        data: {

​            arr: [1, 2, 3, 4, 5],

​            obj: {

​                username: "张三",

​                age: 20,

​                sex: "男"

​            },

​            num: 10,

​            str: "123Abc盒子+-*/#@!"

​        }

​    })

</script>

输出结果：
在这里插入图片描述

6、v-on

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

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
简写 @后面跟上事件，比如：@click、@change
演示的是原生JS的onclick鼠标点击事件，vue将原生JS事件进行的二次封装

<body>
    <div id="app">
        <h1 v-on:click="demo">{{str}}</h1>
        <h1 v-on:click="demo1('bbbbbb')">{{str}}</h1>
        <h1 @click="demo2(element)">{{str}}</h1>

        <button @click="num++">点赞：</button>
        <h1>当前点赞数:{{num}}</h1>
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            str: "学习Vue指令",
            element: "ccccc",
            num: 0
        },
        methods: {
            demo: function() {
                this.str = "aaaaa";
            },
            demo1(value) {
                this.str = value;
            },
            demo2(value) {
                this.str = value;
            }
        }
    })
</script>

点击前输出结果：
在这里插入图片描述
点击第一个学习Vue指令，点击一下点赞输出结果：
在这里插入图片描述
点击第二个学习Vue指令，点击两下点赞输出结果：
在这里插入图片描述

点击第三个学习Vue指令，点击三下点赞输出结果：
在这里插入图片描述

7、v-bind

动态绑定属性值

  • 缩写**：:

  • 预期：any (with argument) | Object (without argument)

  • 参数：attrOrProp (optional)

  • 用法：

  动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
  <body>
    <div id="app">
        <img v-bind:src="imgs"><br/>
        <a :href="obj.url">{{obj.value}}</a>
        <h1 :class="{demo:bols}">{{str}}</h1>
    </div>
</body>
<script src="./js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            imgs: "./img/1.gif",
            obj: {
                url: "https:www.baidu.com",
                value: "百度一下"
            },
            str: "学习Vue指令：v-bind",
            bols: false
        }
    })
</script>

输出结果：
在这里插入图片描述
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
动态获取表单元素，它是一个语法糖

<div id="app">
    <input type="text" v-model="str"><br/>
    <h1>{{str}}</h1>
    <!-- 单选框 -->
    <input type="radio" name="sex" value="man" v-model="sex">男
    <input type="radio" name="sex" value="woman" v-model="sex">女
    <h1>性别是:{{sex}}</h1>
    <!-- 多选框 -->
    <input type="checkbox" value="basketball" v-model="hobby">蓝球
    <input type="checkbox" value="games" v-model="hobby">游戏
    <input type="checkbox" value="wark" v-model="hobby">散步
    <h1>爱好是：{{hobby}}</h1>
    <!-- select 下拉框-->
    <select v-model="city">
        <option value="xian ">西安市</option>
        <option value="xianyang ">咸阳市</option>
        <option value="weinan ">渭南市</option>
        <option value="hangzhong ">汉中市</option>
    </select>
    <h1>所在城市：{{city}}</h1>
     <!-- textarea 文本域-->
    <textarea cols="60" rows="20" v-model="str"></textarea>
</div>

<body>
**输出结果：** ![在这里插入图片描述](https://img-blog.csdnimg.cn/73a7a0c98428493dae0271f97ee978c6.png) ### 9、v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

10、v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

  • 示例：

{{ this will not be compiled }}

v-cloak

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

  • 示例：

[v-cloak] {
display: none;
}

{{ message }}
不会显示，直到编译结束。 ### 11、v-slot 缩写：#

预期：可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。

参数：插槽名 (可选，默认值是 default)

限用于

组件 (对于一个单独的带 prop 的默认插槽) 用法：

提供具名插槽或需要接收 prop 的插槽。

示例：

<!-- 具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  Default slot content

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>
-abandon-
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web---Vue常用指令
Allure泽宇的博客
05-19 1421
Vue一般常用指令
Vue（三）Vue中的常用指令（全网最全）
io_123io_123的博客
01-19 3340
Vue中的常见指令：v-show、v-if、v-for、v-htm、自定义指令、refl等常见指令（全网最强）的用法以及原理
vue的指令
weixin_30377461的博客
06-29 721
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element（元素） 当前作用域 data(){ return { //用return返回对象 msg: "122" ...
Vue指令介绍及使用
AI_huihui的博客
11-06 2184
一、什么是指令 在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头。 二、插值表达式 在dom标签中直接插入内容，又叫声明式渲染/文本插值。 语法：{{ 表达式 }} 注意：dom中插值表达式赋值, vue的变量必须在data里声明 三、vue中常用 v-...
vue指令大全
qq_43235503的博客
04-13 1577
vue指令大全
vue 指令
ajdhakj6的博客
08-22 1401
vue 常用指令
Vue指令学习文档
流楚丶格念的博客
03-09 4081
文章目录Vue指令插值表达式Vue基本指令Vue指令之`v-bind`的三种用法Vue指令使用综合案例Vue指令之`v-on`和`跑马灯效果`跑马灯效果跑马灯完整代码Vue指令之`v-on的缩写`和`事件修饰符`事件修饰符：Vue指令之`v-model`实现`双向数据绑定`双向数据绑定案例Vue指令之`v-for`和`key`属性1. 迭代数组案例：循环遍历普通数组案例 ：循环遍历对象数组2. 迭代对象中的属性案例：遍历对象中属性3. 迭代数字案例：迭代数字输出4.for循环中key的使用Vue指令之`v-
Vue指令之自定义指令
interstingh的博客
03-29 1510
自定义指令 在每个vue组件中，可以在directives节点下声明私有自定义指令 钩子函数 bind：只调用一次，指令第一次绑定到元素时调用。在这里进行一次性的初始化设置 inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档，因为DOM节点插入是异步的） update：所在组件的VNode更新时调用，但是可能发生VNode更新之前。 指令的值可能发生了改变，也可能没有 但是可以通过比较更新前后的值来忽略不必要的模版更新 先触发update再触发componentU
Vue指令大全
qq_45479398的博客
02-25 3344
Vue指令大全 对于一些刚接触Vue的小伙伴来说，可能都记不清楚Vue有哪些指令 现在，我开始隆重介绍一下Vue有哪些指令。 v-on v-on 是事件绑定，可以缩写为@,如果需要event就在函数里面传参;例如@click=“btn($event)”； 常用的修饰符也有很多： 比如 .stop用来取消冒泡事件； . prevent阻止默认事件； .once只执行一次；当然还有许多。 v-model v-model 是双向绑定，一般用于文本框、单选、复选、下拉； 常用的修饰符有 .lazy - 取代 in
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法 Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一...
简单学习vue指令directive
09-01
在本文中，我们将深入学习Vue指令，特别是`directive`的使用方法。 首先，让我们了解如何注册指令。Vue提供了两种注册指令的方式：全局注册和局部注册。全局注册的指令可以在整个应用中使用，通过`Vue.directive()`...
Vue 指令实现按钮级别权限管理功能
10-17
主要介绍了Vue 指令实现按钮级别权限管理功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
ppt课件-第3章 Vue指令.zip
03-22
在这个“第3章 Vue指令”的PPT课件中，我们可以期待深入学习Vue指令的各个方面。 1. **Vue指令概述**：Vue指令是Vue.js中用于操纵视图的特殊属性，以响应数据模型的变化。它们以`v-`开头，如`v-if`, `v-for`, `v-...
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
Vue3+Element-plus的表单重置
weixin_49352307的博客
07-04 203
1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop。作用:简化代码,重置表单数据。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1284
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 189
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 231
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
vue指令和用法
05-30
以下是常见的Vue指令及其用法： 1. v-bind: 绑定数据到DOM元素的属性上，例如绑定src属性、href属性等。 2. v-if: 根据条件表达式来控制DOM元素的显示与隐藏。 3. v-for: 遍历数组或对象，生成相应的DOM元素。 4...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值