02-Vue:指令、修饰符

最新推荐文章于 2024-07-11 10:59:33 发布
最新推荐文章于 2024-07-11 10:59:33 发布
阅读量41 收藏
点赞数
分类专栏： 前端学习 文章标签： vue.js javascript 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51339105/article/details/125031940
版权

1.指令

1.v-model

主要用于表单元素的数据双向绑定；
<标签 v-model=“表达式/变量”></标签>

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
      <p>
          用户名：<input type="text" v-model="username">
      </p>
      <p>
          密码: <input type="password" v-model="pass">
      </p>
      <p>
          性别: <input type="radio" v-model="sex" value="男">男
                <input type="radio" v-model="sex" value="女">女
      </p>
      <p>
          爱好: 
           <input type="checkbox" v-model="hobby" value="吃">吃
           <input type="checkbox" v-model="hobby" value="喝">喝
           <input type="checkbox" v-model="hobby" value="玩">玩
           <input type="checkbox" v-model="hobby" value="乐">乐
      </p>
      <p>
          是否选中
          <input type="checkbox" v-model="ischecked">
      </p>

</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            username:"",
            pass:"",
            sex:"男",
            hobby:[],
            ischecked:false,
        }
    })
</script>
</body>
</html>

2.v-for数组变化会更新页面吗

哪些数组方法会导致v-for更新页面
push,pop,shift,unshift,splice,sort,reverse;
Vue.set是定义在构造函数上的；
this.$set是定义在原型对象上

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">
            {{item}}
        </li>
    </ul>

    <button @click="reBtn">翻转</button>
    <button @click="jBtn">截取前三个</button>
    <button @click="upBtn">点击改掉第一个元素的值</button>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["aaa","bbb","ccc","ddd","eee","fff","ggg"]
        },
        methods:{
            reBtn(){
                this.arr.reverse()
            },
            jBtn(){
                this.arr = this.arr.slice(0,3)
            },
            upBtn(){
                // 数据变  视图不变
                // this.arr[0]="hello"
                // console.log(this.arr)

                // vue 提供了一个Vue.set  或者是this.$set
                this.$set(this.arr,0,"hello")

                // 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
            }
        }
    })
</script>
</body>
</html>

3.动态class

v-bind给标签的clss设置动态的值
<标签 :class=“{类名：布尔值}”></标签>

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">
            {{item}}
        </li>
    </ul>

    <button @click="reBtn">翻转</button>
    <button @click="jBtn">截取前三个</button>
    <button @click="upBtn">点击改掉第一个元素的值</button>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["aaa","bbb","ccc","ddd","eee","fff","ggg"]
        },
        methods:{
            reBtn(){
                this.arr.reverse()
            },
            jBtn(){
                this.arr = this.arr.slice(0,3)
            },
            upBtn(){
                // 数据变  视图不变
                // this.arr[0]="hello"
                // console.log(this.arr)

                // vue 提供了一个Vue.set  或者是this.$set
                this.$set(this.arr,0,"hello")

                // 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新
            }
        }
    })
</script>
</body>
</html>

4.动态的style

<!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>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .main{
            color:red;
        }
        .box{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="app">
   <p :class="{main:bool,box:num>9}">值为true样式引用</p>
   <button @click="num++">Num++</button>

   <p :style="{color:colorStr}">动态style样式</p>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
           bool:true,
           num:9, 
           colorStr:"blue",
        },
        methods:{
           
        }
    })
</script>
</body>
</html>

5.修饰符

1.事件修饰符:
@事件.修饰符 = “methods里的函数”

<!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>Document</title>
    <script src="./js/vue.js"></script>
    <style>
       .box{
           width: 300px;
           height: 300px;
           background-color: yellow;
       }
       .small{
           width: 200px;
           height: 200px;
           background-color: red;
       }
    </style>
</head>
<body>
<div id="app">
    <!-- 阻止事件冒泡 -->
       <div class="box" @click="fn2">
           <div class="small" @click="fn1">
               <button @click.stop="fn">按钮</button>
           </div>
       </div>
    <!-- 阻止默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="fn">超链接</a>

    <!-- 事件只执行一次 -->
    <button @click.once="fn">点我</button>
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
          
        },
        methods:{
           fn(){
               alert("fn")
           },
           fn1(){
               alert("fn1")
           },
           fn2(){
               alert("fn2")
           }
        }
    })
</script>
</body>
</html>

2.表单修饰符：

<!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>Document</title>
    <script src="./js/vue.js"></script>
    <style>
       .box{
           width: 300px;
           height: 300px;
           background-color: yellow;
       }
       .small{
           width: 200px;
           height: 200px;
           background-color: red;
       }
    </style>
</head>
<body>
<div id="app">
    <!-- .lazy  从input事件变为change事件实现数据同步-->
    <input type="text" v-model.lazy="username">
    {{username}}

    <hr>
    <!-- 如果想自动将用户的输入值转为数值类型 -->
    <input type="text" v-model.number="num">
    {{num}}

    <!-- 自动过滤用户输入的首尾空白字符 -->
    <input type="text" v-model.trim="username">
</div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
          username:"",
          num:9
        },
        methods:{
           fn(){
               alert("fn")
           }
        }
    })
</script>
</body>
</html>
weixin_51339105
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
02-Vue按键修饰符,自定义指令
乐百寿
08-27 632
Vue键盘事件，自定义指令
vue常用指令、修饰符
Senora的博客
06-24 1108
vue常见指令和修饰符以及涉及到的前端面试题
VUE---常见指令修饰符
m0_64498202的博客
01-08 441
常见指令修饰符
vue学习笔记:v-model指令的修饰符
杨威的博客
04-29 1739
v-model指令的修饰符有三个，分别是： 1.number 作用：自动将用户的输入值转为数值类型。 示例：<input type="text" v-model.number="age"> 2.trim 作用：自动忽略输入内容的首尾空白字符 示例：<input type="text" v-model.trim="userName"> 3.lazy 作用：双向绑定时，当光标离开时才更新对应的变量 示例：<input type="text" v=model.laz
vue的v-on指令的修饰符
qq_44788119的博客
05-08 252
vue的v-on指令的修饰符 stop：阻止事件冒泡 capture:设置捕获事件（在父级元素上设置一个capture) self:只有自己的事件被促发了，才会执行 once:事件只执行一次 prevent:阻止默认事件 vue的键盘事件 键盘事件的链接 keyup:鼠标按下时 keydown:鼠标抬起时 keypress:按下抬起间促发 ...
vue16：指令修饰符
m0_73919066的博客
05-21 263
vue的基础指令及修饰符
qq_45839045的博客
04-04 821
vue基础-插值表达式 目的: 在dom标签中, 直接插入内容 又叫: 声明式渲染/文本插值 语法: {{ 表达式 }} <template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> </div> </templ
vue指令修饰符、自定义指令
此鱼非闲鱼也的博客
04-20 1050
1、vue指令修饰符 指令名称:参数.修饰符 = "值" 比如 v-bind:value.number = “msg” （1）不同指令有不同的参数，也有不同的修饰符 （2）相同指令下的修饰符可以连续使用，但不能连着使用别的指令下的修饰符 <div id="app"> <!-- .lazy 取代input监听change事件 --> &...
vue中常用的指令修饰符
m0_72560900的博客
01-07 668
在Vue.js中，指令修饰符用于在指令后面以点号（.）形式添加特殊后缀，以表示对指令的特定行为或修饰。这些指令修饰符提供了在特定情境下更精细控制指令行为的方式。
vue3 v-model自定义修饰符写法
weixin_45441173的博客
08-05 1102
vue3 v-model自定义修饰符写法
to-do-list-vue:待办事项清单-vue
03-06
Vue还提供了事件修饰符，如`.prevent`阻止默认行为，`.stop`阻止事件冒泡等，以增强事件处理的灵活性。 Vue的计算属性和侦听器也是其强大之处。计算属性允许我们定义基于其他数据的衍生数据，例如，我们可以有一个...
Vue.js中 v-model 指令的修饰符详解
10-17
v-model 指令默认会在 input 事件中加载输入框中的数据（中文输入法中输入拼音的过程除外）。这篇文章通过实例代码给大家介绍Vue.js中 v-model 指令的修饰，感兴趣的朋友跟随小编一起看看吧
vue-ripple-directive:纹波效应作为Vue指令
05-23
物质纹波效应材质纹波效果作为Vue指令。 该指令适用于您希望实现这种波纹效果的任何元素。安装 npm install vue-ripple-directive --save重要通知如果附加指令的位置相对，则该指令将更好地工作。 尽管该指令将尝试...
vue事件修饰符和按键修饰符用法总结
12-03
事件修饰符是以点`.`开头的指令后缀，用于在事件处理函数中添加额外的行为。以下是一些常见的事件修饰符： 1. `.prevent`：这个修饰符用于调用 `event.preventDefault()`，阻止浏览器的默认行为。例如，表单提交时...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1190
vue切换主题
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
最新发布
xiejunlan的博客
07-11 1382
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 776
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
Vue的常见指令
m0_63624484的博客
07-09 571
它的作用就是我们可以动态的定义属性的值，比如常见的<img src = "1.jpg">我们如果想要修改图片就需要获取到DOM对象，然后再重新填充，但是如果使用v-bind，v-show作用和v-if一样，只是当它为true或者false都会生成DOM对象；style表示样式，同样我们也可以用vue绑定style，实现样式属性的动态生成。接下来，我们实现经常在网页上看见的多选项选择时，选到哪个，哪个就会高亮显示。所以说，vue主要是实现对数据的操作，而js是对DOM对象的操作。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 767
模糊搜索功能 每个网站都要用得到
vue常用指令修饰符
08-29
Vue常用的指令修饰符有以下几种： 1. `.prevent`：阻止默认事件的触发。例如，`@click.prevent`会阻止点击事件的默认行为。 2. `.stop`：停止事件冒泡。它会阻止事件进一步传播到父元素。例如，`@click.stop`会...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值