分享几个可以助你提高效率的Vue指令

目录
  • 前言
  • v-model
  • v-model修饰符
  • v-cloak
  • 附：v-bind和v-model的区别
  • 总结

前言

很多使用Vue的同学往往最容易忽略的指令，由于在这里考虑到很多初学甚至还没有开始接触Vue的同学呢，在介绍v-clos之前呢就先以大家都熟知的v-model编写小dem

v-model

相信大家对v-model并不陌生，简单来讲他就是用于在表单控件以及组建上创建的双向数据绑定

首先我们搭建一个Vue的小环境，在一个html页面中引入Vue.js

下面为大家带来一个小栗子：

<body>
  <div id="app">
    <input type="text" v-model="message"><br>
    这里是文本框输入的值——{{message}}
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '你好，几何心凉!',
    },
  })
</script>

很简单的例子运行结果也无容置疑哈！

下面我们更加直白的看到双向关系

1.我们通过在控制台中去改变model中的数据

我们可以发现我们改变model中的message的值，View中的值就跟着改变了

2.我们通过在文本框改变View中的值查看model中的变化

我们发现当我们通过文本框去改变View中的值的时候，其实我们的Model中的值也随之改变了。

总结

通过上面实例你是不是对Vue的双向绑定有了更近一步的了解呢，因为我们只能通过表单元素来对View的数据进行改变，当然我们其他的表单元素也是可以的我们就不一一列举了；

v-model修饰符

1..lazy

我们在上面的动图中可以看到通过v-model绑定的文本框只要是文本框的值发生变化了就会更新到Model的数据中，很多时候我们可能连贯实现某种功能但是会影响我们的性能，所以我们用到了.lazy修饰符

他会在我们文本框失去焦点的时候再帮我们将文本框的值同步给Model

<body>
  <div id="app">
   <h3>我是测试——{{message}}</h3>
<input type="text" v-model.lazy="message">
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '',
    },
  })
</script>

来看一下效果

2..number

我们还是拿文本框举例，很多时候我们需要一些值让用户填写而这个值可能希望他是数字我们用于计算，这个时候很多同学想到很多办法，转换呀、输入后去判断等等等，但其实v-model中有一个修饰符就可以帮助我们完成这个需求

我们还是通过一个小栗子来看一下，首先我们希望两个文本框各输入一个数值我们进行求和

可以看一下结果

我们可以看到并不是我们想要的结果，他是作为拼接而不是求和，那么我们添加上.number修饰符来试试看

<body>
  <div id="app">
   <h3>我是求和——{{num1+num2}}</h3>
<input type="text" v-model.number="num1">
<input type="text" v-model.number="num2">
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '',
      num1: '',
      num2: '',

    },
  })
</script>

再来看看结果

3..trim

这个大家应该不陌生相对用的比较多，就是去除空格的，但是他只会去除文本框两端的空格，中间的不会去除哦

<body>
  <div id="app">
   <h3>我是测试——{{message}}</h3>
<input type="text" v-model.trim="message">
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '',

    },
  })
</script>

看下效果

小常识：

其实这里绑定在文本框上的v-model只不过是语法糖而已，使用 value 属性和 input 事件完成了双向的绑定，文本框的值变化了我们就触发input事件改变我们绑定的值，而同时我们文本框的value值也在与message挂钩

v-cloak

这个v-cloak究竟是做什么的，首先我们来看下面代码

<body>
  <div id="app">
   <h3>我是测试——{{message}}</h3>
  </div>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '你好几何心凉',
    },
  })
</script>

然后我们发现在页面渲染的时候，会出现以下瞬间

一闪而过立马

这种在我们实际开发过程中尤其是在我们网络状态不太好或者是后端接口响应比较缓慢的时候出现这种现象，所以就用到我们的v-cloak
其实他的原理就是 display:none 大家应该就明白了，也就是当我们data中绑定的变量具备值之前Dom元素是隐藏的，所以就不会出现上述的问题了

附：v-bind和v-model的区别

v-bind是一个单向数据绑定，映射关系：Model->View,我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。

v-model是一个双向数据绑定，映射关系：View接受的数据,传给model,model的数据再传给view。把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

总结

到此这篇关于几个可以助你提高效率的Vue指令的文章就介绍到这了,更多相关提高效率的Vue指令内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • vue.js指令v-model使用方法

    vue.js指令v-model使用方法

    vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过设置属性访问器实现的.例如: var data = { name: "erik", g

  • vue.js指令v-for使用及索引获取

    vue.js指令v-for使用及索引获取

    1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <

  • VUE元素的隐藏和显示（v-show指令)

    VUE元素的隐藏和显示（v-show指令)

    除了click单击事件,还有mouseover,mouseover等鼠标事件. dbclick双击事件. v-on:click/mouseover/mouseover/mousedown/dbclick/... v-show指令 v-show="true/false" //控制元素显示/隐藏 示例代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset

  • Vue.js常用指令汇总（v-if、v-for等）

    Vue.js常用指令汇总（v-if、v-for等）

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu

  • 详解VueJs中的V-bind指令

    引子 v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>   一.概述 v-bind  主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑

  • 分享几个可以助你提高效率的Vue指令

    分享几个可以助你提高效率的Vue指令

    目录 前言 v-model v-model修饰符 v-cloak 附:v-bind和v-model的区别 总结 前言 很多使用Vue的同学往往最容易忽略的指令,由于在这里考虑到很多初学甚至还没有开始接触Vue的同学呢,在介绍v-clos之前呢就先以大家都熟知的v-model编写小dem v-model 相信大家对v-model并不陌生,简单来讲他就是用于在表单控件以及组建上创建的双向数据绑定 首先我们搭建一个Vue的小环境,在一个html页面中引入Vue.js 下面为大家带来一个小栗子: <bo

  • 13个Pandas实用技巧，助你提高开发效率

    原作:风控猎人 整理:数据管道 归纳整理了一些工作中常用到的pandas使用技巧,方便更高效地实现数据分析. 1.计算变量缺失率 df=pd.read_csv('titanic_train.csv') def missing_cal(df): """ df :数据集 return:每个变量的缺失率 """ missing_series = df.isnull().sum()/df.shape[0] missing_df = pd.DataFram

  • python 中的9个实用技巧，助你提高开发效率

    整理字符串输入 整理用户输入的问题在编程过程中极为常见.通常情况下,将字符转换为小写或大写就够了,有时你可以使用正则表达式模块「Regex」完成这项工作.但是如果问题很复杂,可能有更好的方法来解决: user_input = "This string has some whitespaces... " character_map = { ord( ) : , ord( ) : , ord( ) : None } user_input.translate(character_map) #

  • 关于Oracle多表连接,提高效率,性能优化操作

    执行路径:ORACLE的这个功能大大地提高了SQL的执行性能并节省了内存的使用:我们发现,单表数据的统计比多表统计的速度完全是两个概念.单表统计可能只要0.02秒,但是2张表联合统计就可能要几十表了. 这是因为ORACLE只对简单的表提供高速缓冲(cache buffering) ,这个功能并不适用于多表连接查询..数据库管理员必须在init.ora中为这个区域设置合适的参数,当这个内存区域越大,就可以保留更多的语句,当然被共享的可能性也就越大了. 当你向ORACLE提交一个SQL语句,ORAC

  • 正则用(?&gt;…)实现固化分组提高效率

    具体来说,使用「(?>-)」的匹配与正常的匹配并无差别,但是如果匹配进行到此结构之后(也就是,进行到闭括号之后),那么此结构体中的所有备用状态都会被放弃(不能被回溯). 也就是说,在固化分组匹配结束时,它已经匹配的文本已经固化为一个单元,只能作为整体而保留或放弃.括号内的子表达式中未尝试过的备用状态都不复存在了,所以回溯永远也不能选择其中的状态(至少是,当此结构匹配完成时,"锁定(locked in)"在其中的状态). 例子: 比如要处理一批数据,原来格式为123.456,后来因

  • Oracle批量查询、删除、更新使用BULK COLLECT提高效率

    BULK COLLECT(成批聚合类型)和数组集合type类型is table of 表%rowtype index by binary_integer用法笔记. 例1: 批量查询项目资金账户号为 "320001054663"的房屋账户信息并把它们打印出来 . DECLARE TYPE acct_table_type IS TABLE OF my_acct%ROWTYPE INDEX BY BINARY_INTEGER; v_acct_table acct_table_type; BE

  • php 查找数组元素提高效率的方法详解

    1.php in_array方法说明 PHP查找数组元素是否存在,一般会使用in_array方法. bool in_array ( mixed $needle , array $haystack [, bool $strict = FALSE ] ) 参数说明: needle 待搜索的值,如果needle是字符串,比较是区分大小写的. haystack 用来比较的数组 strict 如果第三个参数 strict 的值为 TRUE 则 in_array() 函数还会检查 needle 的类型是否和

  • MySQL分页分析原理及提高效率

    MySQL分页分析原理及提高效率 PERCONA PERFORMANCE CONFERENCE 2009上,来自雅虎的几位工程师带来了一篇"Efficient Pagination Using MySQL"的报告,有很多亮点,本文是在原文基础上的进一步延伸. 首先看一下分页的基本原理: MySQL> explain SELECT * FROM message ORDER BY id DESC LIMIT 10000, 20\G ***************** 1. row *

  • javascript 包裹节点 提高效率

    原理基本是这样,如果传入的是字符串,那么让它们变成一个元素节点,不过这元素节点也可以有许多层,在最内层把要包裹的元素放进.把字符串变成元素节点的方法有如下几个.1,createElement,IE可以连元素属性也一起创建,但只能创建一层.2,innerHTML,不过需要对原来的字符串进行处理,IE与FF都有许多意想不到的默认行为,可以为你多加一点东西或少加一点东西.3,createContextualFragment,由于Opera的行为有点怪异,需要选中修改元素的位置.经日本人的测试,它转换字

  • MySQL中Stmt 预处理提高效率问题的小研究

    MySQL中Stmt 预处理提高效率问题的小研究

    复制代码 代码如下: DELIMITER $$ set @stmt = 'select userid,username from myuser where userid between ? and ?'; prepare s1 from @stmt; set @s1 = 2; set @s2 = 100; execute s1 using @s1,@s2; deallocate prepare s1; $$ DELIMITER ; 用这种形式写的查询,可以随意替换参数,给出代码的人称之为预处理,

随机推荐