美文网首页
第五章 内置指令

第五章 内置指令

作者: Andy丶Go | 来源:发表于2018-07-04 18:51 被阅读6次

1、v-cloak,不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,常用来和 css 的 display:none; 配合使用来解决页面初始化慢而导致的页面闪动,但在具有工程化的项目里是不需要使用的。

// CSS 里加这一句
[v-cloak] {
    display:none;
}

2、v-once,不需要表达式,作用是让定义它的元素或组件(包括元素或组件的所有子节点)只渲染一次,不再随数据的变化而重新渲染,将被视为静态内容,业务中很少用到。

3、v-if => v-else-if => v-else,如果需要一次判断多个元素时,可以在 template(Vue.js 内置元素) 上使用条件指令,渲染时不会包含该元素;Vue 在渲染元素时,出于效率考虑会复用已有元素而非重新渲染,如想避免请添加 key 属性,且 key 值必须唯一。

4、v-show,与 v-if 用法基本一致,只不过带有 v-show 的元素始终会被渲染并保留在 DOM 中,它只是简单地切换元素的 CSS 属性 display 来实现元素的显示或隐藏;v-show 不支持 <template> 元素,

5、v-if 是“真正”的条件渲染,一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

6、数组更新:
Vue 包含了一组观察数组变异的方法,它们也将会触发视图的更新,这些方法如下:push()、pop()、shift()、unshift()、splice()、sort()、reverse(),可以打开控制台,然后给数组调用变异方法:

app.items.push({ message: 'Baz' });

相比之下,也有非变异数组的方法,例如:filter()、concat() 和 slice() ,这些不会改变原始数组,但是会返回一个新数组,所以当使用非变异方法时,可以用新数组替换旧数组:

app.items = app.items.filter(function (item) {
  return item.message.match(/Foo/)
})

相关文章

  • 第八章 vue.js-自定义指令(基础篇)

    在第五章中我们已经介绍了需要Vue内置的指令,比如v-if、v-show等,这些丰富的内置指令能满足我们的...

  • 15. Angular的内置指令(过滤器)

    AngularJS中自定义指令处理 以ng开头的指令都是内置指令。 内置指令是AngularJS已经处理,使用内置...

  • 第五章 内置指令

    1、v-cloak,不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,常用来和 css ...

  • Angular--使用内置指令

    什么是内置指令 内置指令 是选择性的包含内容、在不同的内容片段之间进行选择以及重复内容 常用内置指令1.ngIf2...

  • 内置指令

    基础ng属性指令 ng-hrefng-srcng-disabledng-checkedng-readonlyng-...

  • 内置指令

    Vue.js的指令是带有特殊前缀"v-"的HTML特性,它绑定一个表达式,并将一些特性应用到DOM上。 v-bin...

  • 内置指令

    1.v-text指令 v-text指令