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 }}
  • 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“
木兮颜森
关注
专栏目录
Vue中指令的用法
tianxingege_的博客
08-14 1001
vue常用指令 文章目录vue常用指令1.v-bind2.v-on3.v-for4.v-if5. v-show总结 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 1.v-bind 作用：动态地绑定一个或多个attribute，允许我们把属性的值写出变量的形式 代码如下（示例）： <!-- v-bind 给非指令的属性使用变量 --> <a v-bind:href="url" v-bind:target="target">{{msg}
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法 Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一...
vue指令用法
程序员哆啦A梦，蓝胖子
10-31 1021
vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联，当表达式的值改变时，响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispaly: none; } 一般把v-cloak绑在Vue实例el属性绑定的节点上 <!DOCTYPE html> <html lang="en"> <head> ...
Vue指令使用大全
qq_72760247的博客
10-11 586
Vue指令使用大全
Vue的简单指令使用方法及呈现
wgp's blog
08-01 342
Vue的指令的简单使用Vue介绍Vue的第一程序Vue的指令v-text 和 v-htmlv-if和v-show指令v-bind，v-on指令v-model指令双向数据绑定v-for指令 Vue介绍 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应
Vue指令用法1
Lin 的博客
06-02 393
Vue指令用法1 先简单介绍Vue的特点： 1、是一套构建用户界面的框架，有提过双向数据绑定的功能，实现前后端的相互通信。 2、只关注视图层，也就是说，通过框架中所提供的指令，使得前端只需要关心数据的业务逻辑，不用关心dom是如何渲染的。 Vue指令及其试用场景： 一、适用于文本的指令 v-text：使用该指令用来显示文本内容，但不会解析html标签，即把标签当做文本显示出来。 v-htm...
Vue 指令实现按钮级别权限管理功能
10-17
本文介绍的实现方法，通过Vue指令这一强大的特性，让开发人员可以非常便捷地在Vue项目中实现按钮级别的权限控制。 首先，了解Vue指令的定义。Vue指令是Vue框架提供的一组特殊的属性，为Vue实例添加了行为。在这个...
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
ppt课件-第3章 Vue指令.zip
03-22
通过这个PPT课件，你将不仅掌握Vue指令的基本用法，还能了解到它们在实际开发中的应用场景，以及如何与其他Vue特性结合使用。无论是初学者还是有一定经验的开发者，都能从中获益，提升对Vue.js的理解和应用能力。
Vue常用指令及使用方法
m0_57884221的博客
05-18 619
vue基础使用，常用指令，指令分别有什么作用，什么时候使用该指令
Vue的指令及其用法
ThisOnly的博客
06-23 3442
指令 指令是绑定在dom属性上的 这种属性绑定的形式就是为了操作dom，我们给这种属性起了一个好听的名字 Vue 1.0 叫它 属性指令（ 借鉴Angular来的 ） Vue 2.0 统称为 ‘指令’ 指令是用一个 v-xxx 表示 指令是用来操作dom Vue中不允许直接操作dom mustache语法 — 属性写法 的属性值是直接写数据的，不需要使用 {{ }} v-html 可以...
Vue指令大全-用法
JackieDYH的博客
06-01 450
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 217
Vue下载地址：https://github.com/vuejs/vue（下载解压，在dist 可得到vue.js文件） 直接使用公共的CDN： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> Vue 是一套用于构建用户界面的渐进式框架（可以选择性的使用该框架的一个或一些组件，这些组件的使用也不需要将框架全部组件都应用；而且用了这些组件也不要求你的系统全部都使用该框架）。与其它大型框架不同的是
vue的常用指令及用法总结
weixin_42504805的博客
06-08 9167
vue知识
Vue指令的使用以及自定义指令
最新发布
y516369的博客
06-08 1122
Vue指令的使用以及自定义指令
常用的vue指令语法用法
TianXuab的博客
06-30 421
v-if指令用于根据表达式的值条件性地渲染元素，而v-show指令仅在表达式值为true时显示元素。以上是常用的Vue指令语法用法，它们可以帮助您轻松地创建动态的Web应用程序。v-for指令用于迭代一个数组或对象中的项目，并为每个项目执行一次模板。v-model指令用于在表单元素和组件上创建双向数据绑定。v-cloak指令用于在Vue实例未加载时隐藏绑定的元素。v-text指令用于将HTML转义过的文本渲染到元素中。v-html指令用于渲染元素中的HTML。v-on指令用于在DOM事件上触发方法。
Vue指令的用法
qq_37949984的博客
08-21 175
1.v-text 更新元素的 textContent。 <span v-text="msg"></span> 等同于插值表达式 <span>{{msg}}</span> 2.v-html 更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。 <div v-html="html">&...
Vue之指令用法
唐昊
06-15 347
简介 注册全局指令 // Vue2.0用法 // 注册一个全局指令 // el: 指令所在的标签对象 // binding: 包含指令相关数据的容器对象 Vue.directive('upper-text', function (el, binding) { console.log(el, binding) el.textContent = binding.value.toUpperCase() }) 注册局部指令 directives : { 'my
掌握Vue指令，提升前端开发效率
通过阅读教程中的详细解释和例子，再结合本资源提供的源代码，学习者可以更直观地理解Vue指令的应用，并在实际编码中加以应用。 4. Vue指令与Node.js的关系： 尽管Vue指令主要用于构建前端用户界面，但Vue与Node....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值