美文网首页
Vue.js 内部指令

Vue.js 内部指令

作者: 封燐 | 来源:发表于2019-08-08 18:39 被阅读0次

基本指令

v-cloak
解决初始化慢导致页面闪动,一般与 display: none; 结合使用。
v-once
定义它的元素和组件只渲染一次。

条件渲染指令

v-if

v-if 后面接的是等号,等号后的内容必须是布尔值。
v-else
v-else-if
Vue 在渲染元素时,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,解决方法:对不想让其复用的标签或元素加上唯一的 key

<div v-if="type === 'name'">
  用户名:<input type="text" placeholder="请输入用户名" key="name">
</div>
<div v-else>
  邮箱:<input type="text" placeholder="请输入邮箱" key="email">
</div>

v-show

v-show 后面接的是等号,等号后的内容必须是布尔值。

v-if 和 v-show 的比较

v-if 实时渲染,页面需要显示就渲染,不需要就移除。
v-show 元素只渲染一次,永远存在于页面中,只是改变了其 display 属性为 display: none; 。当需要频繁切换页面时,使用 v-show 。

v-for

写在要遍历的元素上。
(1) 遍历(数组中的)多个对象:

<ul>
  <li v-for="item in arr">{{item.name}}</li>
</ul>

带索引的写法:

<ul>
  <li v-for="(item, index) in arr">{{index}}------{{item.name}}</li>
</ul>

(2) 遍历一个对象的多个属性:

<span v-for="value in obj">{{value}}</span>

带索引的写法:

<span v-for="(value, key, index) in obj">{{index}}---{{key}}---{{value}}</span>

数组更新

改变数组的一系列方法:

  • push()
    在数组末尾添加元素,返回添加元素后的数组长度。
  • pop()
    删除数组最后一个元素,返回该元素。
  • shift()
    删除数组的第一个元素, 返回该元素。
  • unshift()
    在数组的头部添加元素,返回添加元素后的数组长度。
  • splice()
    可以添加或者删除元素,返回删除的元素组成的数组。
    arr.splice(start, count, addElement1, addElement2, ...);第一个参数表示开始的位置,第二个参数表示删除元素的个数,第三个及更多的参数表示要被插入数组的元素。
    如果只提供第一个参数,等同于将元素组在指定位置拆分成两个数组。
var a = [1, 2, 3, 4];
a.splice(2) // [3, 4]
a // [1, 2]
  • reverse()
    颠倒数组。
  • sort()
    排序数组,默认为字典顺序,可传入函数作为参数自定义排序方式。
[1101, 10111, 111].sort()
// [10111, 1101, 111]

[1101, 10111, 111].sort(function (a, b) {
  return a - b;
})
// [111, 1101, 10111]

两个数组变动 Vue 检查不到:

  1. 改变数组的指定项
    app.arr[1] = 'car' 这样写无效。
    解决方法:使用 Vue 提供的 set 方法,Vue.set(app.arr, 1, 'car')
  2. 改变数组的长度
    app.arr.length = 1 这样写无效。
    解决方法: 使用 splice 方法,app.arr.splice(1)

方法和事件

v-on 绑定的事件类似于原生的 onclick 等写法。
如果方法中有参数,而你绑定事件时没写括号,会默认传入原生事件对象 event 。

修饰符

  • .stop :阻止事件冒泡
  • .prevent :阻止默认事件
  • .self :只是作用于元素本身而不是子元素时调用
  • .once : 事件只触发一次

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.13="submit">

相关文章

网友评论

      本文标题:Vue.js 内部指令

      本文链接:https://www.haomeiwen.com/subject/yblodctx.html