4、Vue指令v-once、v-pre、v-model


1、v-once

v-once:只渲染一次,之后的重新渲染,元素及其所有的子节点将被视为静态内容并跳过。因为它使用缓存中的值,不再使用vm中的值,数据也就不再变化。这可以用于优化跟新性能。

<body>
    <div id="app">
        <!-- 使用v-once,只会在初始化的时候插入一次值 当数据发生变化时,视图不再发生更新 -->
        <h2 v-once>{{ dec }}</h2>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"v-once渲染"
           }
       })
    </script>
</body>

当没使用v-once时:修改vm中dec的值后,页面刷新。
在这里插入图片描述
当使用v-once时:修改vm中dec的值后,页面不刷新。
在这里插入图片描述

2、v-pre

v-pre:不使用vue语法进行渲染,跳过元素和他的子元素的编译过成。相当于不编译指令。

<body>
    <div id="app">
        <h2 v-pre>{{ dec }}</h2>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"v-pre渲染"
           }
       })
    </script>
</body>

在这里插入图片描述

3、v-model

3.1、v-model介绍

v-model:表单元素的双向数据绑定。数据更新元素会更新、元素更新数据也会更新。本质上v-model是value和input事件的语法糖。

<style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="dec">
        <br>
        <p v-cloak>{{dec}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:""
           }
       })
    </script>
</body>

在这里插入图片描述
在这里插入图片描述
在这个例子中,我们可以看到input输入了什么,p标签里面的插值表达式的值就为多少,同样的,我们设置vm.dec的值的时候,input上面的值也会随之发生变化,它们之间是双向数据绑定的。同时在这个例子中,我们运用了v-cloak,当没有使用v-cloak的时候,我们不停刷新页面的时候,会发现刷新的瞬间p标签里面的内容是如上显示的{{dec}}。
在这里插入图片描述
①、上面的例子是input中type的值为text的情况,即当为文本输入框的情况,这里,当使用的是复选框的时候,即type的值为checkbox时的情况:

<style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="checkbox" v-model="hobby">爱好
        <p v-cloak>{{hobby}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"",
               hobby:""
           }
       })
    </script>

在这里插入图片描述
在这里插入图片描述
我们可以看到当我们勾选了”爱好”之后,返回的vm.hobby的值为true,当我们取消勾选后,返回的值为false。
当我们做如下修改的时候:

<script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"",
               hobby:[]
           }
       })
</script>

即将hobby修改成空的数组,即[]。我们发现返回的值为:
在这里插入图片描述
在这里插入图片描述
当我们给input设置value值的时候即:

 <input type="checkbox" v-model="hobby" value="haha">爱好

在这里插入图片描述
在这里插入图片描述

<div id="app">
        <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 v-cloak>{{hobby}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"",
               hobby:[]
           }
       })
    </script>

在这里插入图片描述
②、同样的也可以完成双向绑定。在单选框里面,也存在这样的双向绑定。

<div id="app">
       <input type="radio" name="life" v-model="hobby" value="吃饭">吃饭
       <input type="radio" name="life" v-model="hobby" value="学习">学习
        <p v-cloak>{{hobby}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               dec:"",
               hobby:[]
           }
       })
    </script>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2、v-model修饰符

3.2.1、.lazy

使用change事件而非input事件,如果不需要实时更新,则可以用.lazy。

<div id="app">
        <p>没有添加修饰符</p>
        <input type="text" v-model="meg">
        <p>添加修饰符.lazy</p>
        <input type="text" v-model.lazy="meg">
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               meg:'修饰符'
           }
       })
    </script>

在这里插入图片描述
在上面例子中,上面是没有添加.lazy的v-model,下面是添加了.lazy的v-model,他们最主要的区别在于添加.lazy的元素没办法实时更新,需要input标签内容发生改变时,才会改变v-model绑定的值,如上面的例子,我们对第一个input进行修改的时候,下面的值会随着变化,而对第二个修改的时候,之后按回车或者其他onchange事件后,才会修改对应的值。

3.2.2、.number

.number:因为v-model绑定数据是一个字符串,会将数据中的字符串转为number类型。

<div id="app">
        <input type="text" v-model.number="num">
        <p v-cloak>{{num}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               num:'1'
           }
       })
    </script>

在这里插入图片描述
在这里插入图片描述

.number的作用就是当我们输入的文本的内容以数字开头的话,那么后面的非数字内容就会被忽略掉,此时msg的格式为number格式。但是当我们输入的内容是以字符串开头的话,那么就会将msg的值修改成字符串的格式,那么就无法忽略字符串的内容。

3.3.3、.trim

.trim:去掉前后的空格

 <div id="app">
        <input type="text" v-model.trim="num">
        <p v-cloak>{{num}}</p>
    </div>
    <script src="./Vuejs/vue2-6-12.js"></script>
    <script>
       var vm = new Vue({
           el:"#app",
           data:{
               num:''
           }
       })
    </script>

在这里插入图片描述

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值