vuejs-指令详解

文章目录

v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除;否则,对应元素的一个克隆将被重新插入DOM中,代码如下:

由于v-if是一个指令,需要将它添加到一个元素上。但是如果想要切换多个元素,则可以把<template>元素当做包装元素,并在其上使用v-if,最终的渲染结果不会包含它。代码如下:

v-show

v-show指令是根据表达式的值来显示或者隐藏html元素。当v-show赋值为false时,元素被隐藏。查看DOM时,会发现元素上多了一个内联样式style="display:none"
如图所示:
vuejs-指令详解

注:v-show不支持<template>语法
一般来说,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁的切换,则使用v-show较好;如果在运行时条件不大可能改变,则使用v-if较好。

v-else

v-else就是javascript中的else的意思,它必须跟着v-if或者v-show使用。如下代码:

将v-show用在组件上时,因为指令的优先级v-else会出现问题,所以不要这样做。我们可用用另一个v-show替换v-else。

v-model

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。代码如下:

除了以上用法,在v-model指令后面还可以添加多个参数(number、lazy、debounce)。

1.number

如果想要用户的输入自动转换为Number类型(如果原值的转换结果为NAN,则返回原值),则可以添加一个number特性。

2.lazy

在默认情况下,v-model在input事件中同步输入框的值与数据,我们可以添加一个lazy特性,从而将数据改到在change事件中发生。代码如下:

3.debounce

设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如,在input中输入内容时要随时发送Ajax请求),那么它较为有用。

v-rePEat

v-repeat(已经废除)指令基于源数据重复渲染元素。可以使用$index来呈现相对应的数组索引。不细讲。

数组变动检测

vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:push(), pop(), shift(), unshift(), splice(), sort(), reverse()

vue.js还增加了两个方法来观测变化:set、set、remove。

我们应该尽量避免直接设置数据绑定的数组元素,因为这些变化不会被vue.js检测到,因而也不会更新视图渲染。可以使用$set方法:

remove是remove是splice的语法糖,用于从目标数组中查找并删除元素:

注:ECMAScript5无法检测到新属性添加到一个对象上或者在对象上删除。要处理这种情况,Vue.js增加了三种方法:add(key,value)、add(key,value)、set(key,value)、$delete(key,value),这些方法可以用来添加和删除属性,同时触发视图更新。

内置过滤器

1.filterBy(0.12版本)

 实现如图所示:

vuejs-指令详解

在输入框中输入’专车’,得到如图所示的结果:

vuejs-指令详解

2.orderBy(0.12版本)

实现降序排列,例:

结果:

  • 专车
  • 顺风车
  • 出租车
  • 快车

v-for

使用$index来获得相应的数组索引。

结果:

  • 0 – 滴滴 – 顺风车
  • 1 – 滴滴 – 专车

注:vuejs1.0.17及以后低版本支持of分隔符,更接近javaScript遍历器语法。

有时我们可能想重复一个包含多个DOM元素的块,可以使用<template>,如:

v-for也支持整数

代码如下:

或者

v-text

v-text指令可以更新元素的textContent.

得到的结果一样。

v-html

v-html指令更新元素的innerHTML。

注:不建议在网站上直接动态渲染任意HTML片段,很容易导致Xss攻击。

v-bind

v-bind指令用于响应更新HTML特性,将一个或者多个attribute,或者一个组件prop动态绑定到表达式。v-bind可以简写为:

在绑定class或者style时,支持其他类型的值,如数组或对象。如:

结果如图:

vuejs-指令详解

如果没有参数时,可以绑定到一个对象。注意,此时class和style绑定不支持数组和对象(对象key会转换为小写)。代码如下:

结果如图:

vuejs-指令详解

在绑定prop时,prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。修饰符为:

.sync——双向绑定,只能用于prop绑定。

.once——单次绑定,只能用于prop绑定。

.camel——将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定,通常用于绑定用驼峰命名的SVG特性,比如viewBox。

v-on

v-on指令用于绑定事件监听器。事件类型由参数指定。

如果访问原始DOM事件,可以使用$event传入方法。

完整例子:

###事件修饰符

### 按键修饰符

全部的按键别名:enter,tab,delete,esc,space,up,down,left,right

v-ref

在父组件上注册一个子组件的索引,便于直接访问。不需要表达式,必须提供参数id。可以通过父组件的$refs对象访问子组件。

v-el

为DOM元素注册一个索引,方便通过所属实例的els访问这个元素。可以用v−el:some−el设置this.els访问这个元素。可以用v−el:some−el设置this.els.someEl。

通过this.$els获取相应的DOM元素:

this.$els.msg.textContent //’hello’

this.$els.otherMsg.textContent //’world’

在新的vuejs中,简单起见, v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用。

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 css 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

css代码:

html:

未经允许不得转载:一点博客-青梅煮码-共享博客 » vuejs-指令详解
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏