vue指令的用法

已于 2022-03-27 11:50:00 修改
阅读量1k 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue vue.js 前端 前端框架
于 2022-03-27 11:14:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43723132/article/details/123768369
版权

前言

vue基础知识整理

  1. 内容渲染指令

  • v-text—— 缺点：覆盖元素中默认的内容

  • {{ }}——插值只能用在元素的内容节点，无法用在属性节点

  • v-html ——用处：把带有HTML标签的字符串，渲染为真正的DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
   
    <div id="app"> 
        <p v-text = 'username'>名字：</p>
        <p v-text = "sex">性别：</p>
        <hr>
        <p>名字：{{username}}</p>
        <p>性别：{{sex}}</p>
        
        <div v-text = 'info'></div>
        <div>{{info}}</div>
        <div v-html = 'info'></div>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                username:'张三',
                sex:'boy',
                info:'<h4 style = "color : red ;font-weight :bold "> 欢迎大家</h4>'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  1. 属性绑定指令
  • v-bind 简写为：
  • 为元素的属性动态绑定值
  • 在使用时，如果绑定内容需要进行动态拼接，则字符串外面应该包裹单引号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:placeholder="tips">
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                tips:'张三',
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  1. 事件绑定指令
  • v-on
    • 简写为@
    • @click="show"和@click=“show(传参)”
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <p>count的值是：{{count}}</p>
        <!-- <button v-on:click= 'add(2)'>+</button>
        <button v-on:click= 'sub'>-</button> -->
        <button @click= 'add(2)'>+</button>
        <button @click= 'sub'>-</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                count : 0,

            },
            methods:{
                add(n){
                    this.count +=n
                },
                sub(){
                    this.count--
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  • 内置的变量 $event——@click=“show(3 , $event)”
    • 应用场景：如果默认的事件对象e被覆盖了，则可以手动传递一个 $event。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <p>count的值是：{{count}}</p>
        <button @click= 'add(2,$event)'>+n </button>
        <button @click= 'sub'>-</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                count : 0,

            },
            methods:{
                add(n,e){
                    this.count +=n
                    console.log(e)
                    if(this.count %2 === 0){
                    e.target.style.backgroundColor ='red'
                    }else{
                    e.target.style.backgroundColor =''
                    }

                },
                sub(){
                    this.count--
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  • 事件修饰符
    • .prevent——阻止a链接跳转
    • .stop——阻止绑定的事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <a href="http://www.baidu.com" @click.prevent="show">这是a链接</a>

        <hr>

        <div style="width: 200px; height: 200px; background-color: red; text-align: center; line-height: 150px;" @click="divHandle">
            <button @click.stop = "bntHandle">按钮</button>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                show(){
                    console.log('a被点击了')
                },
                divHandle(){
                    console.log('div被点击了')
                },
                bntHandle(){
                    console.log('btn被点击了')
                }
            }
        })
    </script>
</body>
</html>

点击a不会发生跳转，按钮也不会起用

  • 按键修饰符
    • .esc
    • .enter
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.esc = "clearInput" @keyup.enter = "commitAjax">
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
               
            },
            methods:{
                clearInput(e){
                    console.log('按下了esc键')
                    e.target.value = ''
                },
                commitAjax(){
                    console.log('出发了enter')
                }
            }

        })
    </script>
</body>
</html>

在这里插入图片描述

  1. 双向数据绑定指令
  • v-model ——只能用在表单元素上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <p>双向绑定的</p>
        <p>用户输入的名是{{username}}</p>
        <input type="text" v-model = "username">
        <p>动态绑定的</p>
        <input type="text" :value="username">
        <hr>

        <select v-model="city">
            <option >请选择城市</option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">天津</option>
            <option value="3">深圳</option>
            <option value="4">南京</option>
        </select>
    </div>

    <script>
        const vm =new Vue({
            el:"#app",
            data:{
                username:'张三',
                city:'3'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  • 修饰符
    • .number 自动将用户的输入值转换为数值类型
    • .trim 自动过滤用户输入的首位空白字符
    • .lazy 在"change"而非"input"时更新
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <form>
            <input type="text" v-model.number= "num1"> +
            <input type="text" v-model.number= "num2"> =
            <span>{{num1 + num2}}</span>
            <hr>
            <input type="text" v-model.trim = "username">
            <input type="text" :value=" username">
            <input type="button" @click = "show" value="提交信息">
            <hr>
            <input type="text" v-model.lazy = 'username'>
        </form>


    </div>



    <script>
          const vm = new Vue({
            el:'#app',
            data:{
                username:'aa',
                num1:1,
                num2:2,
            },
            methods:{
                show(){
                    console.log(this.username)

                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  1. 循环渲染指令
  • v-for="(item，index) in 数组 "
  • :key=“item.id”
  • 拿索引当key没有意义（index的值不具有唯一性）
  1. 条件渲染指令
  • v-if
    • 动态创建和移除元素，实现元素的实现和隐藏
    • v-else-if
    • v-else
  • v-show
    * 动态添加和移除 display:none样式,来实现元素的实现和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <div v-if = 'flag'>这是被v-if控制的</div>
        <div v-show= 'flag'>这是被v-show控制的</div>
        <hr>
        <div v-if ="type === 'A'">优秀</div>
        <div v-else-if ="type === 'B'">良好</div>
        <div v-else-if ="type === 'C'">及格</div>
        <div v-else>差</div>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                type:'A'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  1. 过滤器
  • 全局过滤器
    Vue.filter（‘名字’,function(过滤器前面的值）{return结果})
  • 私有过滤器
    定义到组件的filters节点之下
  • 调用——{{ message | deteFoemat }}
  • 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“
木兮颜森
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法 Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一...
Vue自定义指令使用方法详解
08-29
本文将深入探讨Vue自定义指令的使用方法。 ### 1. 自定义指令的语法 创建自定义指令的基本语法是通过`Vue.directive()`方法，它接收两个参数：指令ID和定义对象。例如： ```javascript Vue.directive('my-...
常用的vue指令语法用法
TianXuab的博客
06-30 381
v-if指令用于根据表达式的值条件性地渲染元素，而v-show指令仅在表达式值为true时显示元素。以上是常用的Vue指令语法用法，它们可以帮助您轻松地创建动态的Web应用程序。v-for指令用于迭代一个数组或对象中的项目，并为每个项目执行一次模板。v-model指令用于在表单元素和组件上创建双向数据绑定。v-cloak指令用于在Vue实例未加载时隐藏绑定的元素。v-text指令用于将HTML转义过的文本渲染到元素中。v-html指令用于渲染元素中的HTML。v-on指令用于在DOM事件上触发方法。
vue指令学习——vue基本用法
qq_46153157的博客
05-08 1438
vue的基本使用，放心食用哈哈哈哈我会继续努力更新的
【Vue】各v-指令用法
qq_45677671的博客
07-21 2276
v-html、v-text、v-show、v-if、v-for、v-on、v-bind、v-model、v-once、v-cloak、v-pre、v-slot 等指令的使用
Vue常用指令+用法举例 详解
最新发布
m0_69287579的博客
08-18 3562
有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。可以单独使用，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-if和v-show有同样的效果，不同在于。v-for可用来遍历数组、对象、字符串。
Vue指令介绍及使用
AI_huihui的博客
11-06 2186
一、什么是指令 在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头。 二、插值表达式 在dom标签中直接插入内容，又叫声明式渲染/文本插值。 语法：{{ 表达式 }} 注意：dom中插值表达式赋值, vue的变量必须在data里声明 三、vue中常用 v-...
vue自定义指令实现方法详解
10-17
下面我们将详细探讨Vue自定义指令的定义、注册和使用方法。 ### 一、定义自定义指令 Vue自定义指令的定义通常通过`Vue.directive()`全局注册或在Vue实例中局部注册。`Vue.directive()`接收两个参数： 1. **id**：...
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
Vue的指令及其用法
ThisOnly的博客
06-23 3413
指令 指令是绑定在dom属性上的 这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字 Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ） Vue 2.0 统称为 ‘指令’ 指令是用一个 v-xxx 表示 指令是用来操作dom Vue中不允许直接操作dom mustache语法 — 属性写法 的属性值是直接写数据的，不需要使用 {{ }} v-html 可以...
Vue指令使用大全
qq_72760247的博客
10-11 543
Vue指令使用大全
vue 指令基本使用大全
热门推荐
茅坤宝骏氹的博客
07-09 2万+
转载自   vue 指令基本使用大全指令解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM常用指令v-textv-htmlv-bindv-text解释：更新元素的 textContentv-html解释：更新元素的 innerHTMLv-bind作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM语...
vue常见指令及其用法
m0_51134729的博客
03-21 2550
v-show\v-if\v-else-if\v-else <template> <div>在 Vue 中提供两种指令：一种是内置指令，另一种是自定义指令。所有的指令都是以 v- 开头的。</div> <div>v-show 指令是用于显示或隐藏元素，它是以 style 样式的方式来实现的。</div> <div>v-if 指令也是用于根据条件表达式来带有条件的渲染。如果条件为假，那么页面中将不会渲染当前的元素。&
Vue指令用法1
Lin 的博客
06-02 347
Vue指令用法1 先简单介绍Vue的特点： 1、是一套构建用户界面的框架，有提过双向数据绑定的功能，实现前后端的相互通信。 2、只关注视图层，也就是说，通过框架中所提供的指令，使得前端只需要关心数据的业务逻辑，不用关心dom是如何渲染的。 Vue指令及其试用场景： 一、适用于文本的指令 v-text：使用该指令用来显示文本内容，但不会解析html标签，即把标签当做文本显示出来。 v-htm...
浅谈 Vue 指令
GrowthHacker的博客
11-07 3120
谈到 Vue 指令，我们脑海里浮现的第一个疑问便是 指令 是什么： 指令是告诉计算机从事某一特殊运算的代码。如：数据传送指令、算术运算指令、位运算指令、程序流程控制指令、串操作指令、处理器控制指令。 那么 Vue 指令又是什么呢？是用来干什么的？作为一名攻城狮的我们又如何去使用它？ Vue 内置指令 1. 内置指令的使用 v-if:根据其后表达式的 bool 值进行判断是否渲染该元素 v-sho...
Vue指令大全-用法
JackieDYH的博客
06-01 435
1. v-text v-text主要用来更新textContent，可以等同于JS的text属性。 <span v-text="msg"></span> 这两者等价： <span>{{msg}}</span> 2. v-html 双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。 <div v-html="rawHtml"></div&g
Vue指令使用
weixin_44544859的博客
06-10 179
Vue下载地址：https://github.com/vuejs/vue（下载解压，在dist 可得到vue.js文件） 直接使用公共的CDN： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> Vue 是一套用于构建用户界面的渐进式框架（可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且用了这些组件也不要求你的系统全部都使用该框架）。与其它大型框架不同的是
vue 指令的使用
Wang的专栏
08-21 538
指令的定义 通过全局API的定义 Vue.directive 定义指令的多种方式 简单定义 Vue.directive('test', function(el, binding, vnode) { // el 是当前元素 el.style=&quot;color:&quot; + binding.value; console.log(binding); ...
说出至少4种vue当中的指令和它的用法？
weixin_42856661的博客
08-03 5111
v-once: 只绑定一次 v-bind: 绑定数据 v-model: 绑定模型 v-on: 绑定事件 v-if v-show: 条件渲染
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、付费专栏及课程。

余额充值