基本指令

1.v-cloak

  v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none配合使用。

<div id="app" v-cloak>
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message:'这是一段文本'
}
})
</script>

  这是虽然已经加了指令v-cloak,但其实并没有起到任何作用,当网速较慢、Vue.js文件还没加载完时,在页面上会显示{{ message }}字样,直到Vue创建实例、编译模板时,DOM才会被替换,所以这个过程屏幕是有闪动的。只要加一句CSS就可以解决问题了

[v-cloak]{
display: none;
}

  在一般情况下,v-cloak是一个解决初始化慢导致页面闪动的最佳实践,对于简单的项目很实用,但是在具有工程化的项目里,比如后面学到的webpack和vue-router时,项目的HTML结构只有一个空的div元素,剩余的内容都是由路由去挂在不同组件完成的,所以不再需要v-cloak。

2.v-once

  v-once也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容。

  v-once在业务中很少使用,当需要进一步优化时,可能会用到。

条件渲染指令

1.v-if、v-else-if、v-else

  与JavaScript的条件语句if、else、else if类似,vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件。

<div id="app">
<p v-if="status === 1">当status为1时显示该行</p>
<p v-else-if="status === 2">当status为2时显示该行</p>
<p v-else>否则显示该行</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
status: 1
}
})
</script>

  v-else-if要紧跟v-if,v-else要紧跟v-else-if或v-if,表达式为真时,当前元素或组件及所有子节点将被渲染,为假时被移除。如果一次判断的是多个元素,可以在Vue.js内置的<template>元素上使用条件指令,最终渲染的结果不会包含该元素。

<div id="app">
<template v-if="status === 1">
<p>这是一段文本</p>
<p>这是一段文本</p>
<p>这是一段文本</p>
</template>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
status: 1
}
})
</script>

2.v-show

  v-show用法与v-if基本一致,只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时,元素会隐藏,查看DOM结构会看到元素上加载了内联样式display: none;

<div id="app">
<p v-show="status === 1">当status为1时显示该行</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
status: 2
}
})
</script>

  渲染后的结果为:

<p style="display: none;">当status为1时显示该行</p>

  v-show不能在<template>上使用。

3.v-if与v-show的选择

  v-if和v-show具有类似的功能,不过v-if才是真正的条件渲染,它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false,则一开始元素/组件并不会渲染,只有当条件第一次变为真时才开始编译。

  而v-show只是简单的CSS属性切换,无论条件真与否,都会被编译。相比之下,v-if更适合条件不经常改变的场景,因为它切换开销相对较大,而v-show适用于频繁切换条件。

列表渲染指令 v-for

基本用法

  当需要讲一个数组遍历或枚举一个对象循环显示时,就会用到列表渲染指令v-for。它的表达式需结合in来使用,类似item in items的形式。

<div id="app">
<ul>
<li v-for="book in books">{{ book.name }}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
books: [
{ name: '《Vue.js实战》'},
{ name: '《JavaScript语言精粹》'},
{ name: '《JavaScript高级程序设计》'}
]
}
})
</script>

  在表达式中,books是数据,book是当前数组元素的别名,循环出的每个<li>内的元素都可以访问到对应的当前数据book。列表渲染也支持用of来代替in作为分隔符,它更接近JavaScript迭代器的语法。

  v-for的表达式支持一个可选参数作为当前项的索引。

<div id="app">
<ul>
<li v-for="(book,index) in books">{{index}} - {{ book.name }}</li>
</ul>
</div>

  分隔符in前面的语句使用括号,第二项就是books当前项的索引。

  Vue在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化地复用DOM元素。替换的数组中,含有相同元素的项不会被重新渲染,因此可以大胆地用新数组来替换就数组,不用担心性能问题。

  需要注意的是,以下变动的数组中,Vue是不能检测到的,也不会触发视图更新:

    ♦ 通过索引直接设置项,比如app.books[3] = {...}。

    ♦ 修改数组长度,比如app.books.length = 1。

  解决第一个问题可以用两种方法实现同样的效果,第一种是使用Vue内置的set方法:

Vue.set(app.books,3,{
name: '《CSS揭秘》',
author: '[希] Lea Verou'
});

  另一种方法:

app.books.splice(3, 1, {
name: '《CSS揭秘》',
author: '[希] Lea Verou'
})

  第二个问题也可以直接用splice来解决:

app.books.splice(1);

Vue 2.0学习(六)内置指令的更多相关文章

  1. Vue学习之--------内置指令的使用【v-bind、v-model、v-for、v-on、v-if 、v-else、v-show、v-text。。。】(2022/7/19)

    文章目录 1.常见的内置指令 2.代码实例 3.测试效果 1.常见的内置指令 v-bind: 单向绑定解析表达式, 可简写为 :xxx v-model: 双向数据绑定 v-for : 遍历数组/对象/ ...

  2. Vue源码后记-其余内置指令(2)

    -- 指令这个讲起来还有点复杂,先把html弄上来: <body> <div id='app'> <div v-if="vIfIter" v-bind ...

  3. Vue源码后记-其余内置指令(1)

    把其余的内置指令也搞完吧,来一个全家桶. 案例如下: <body> <div id='app'> <div v-if="vIfIter" v-bind ...

  4. Vue源码后记-其余内置指令(3)

    其实吧,写这些后记我才真正了解到vue源码的精髓,之前的跑源码跟闹着玩一样. go! 之前将AST转换成了render函数,跳出来后,由于仍是字符串,所以调用了makeFunction将其转换成了真正 ...

  5. Vue 2.0学习(三)指令与事件

    指令(Directives)是Vue.js模板中最常用的一项功能,它带有前缀v-,前面已经使用过v-html.v-pre等.指令的主要职责就是当表达式的值改变时,相应地将某些行为应用到DOM上. v- ...

  6. Vue(四) 内置指令

    现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...

  7. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

  8. 2.0 vue内置指令与自定义指令

    1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...

  9. vue内置指令详解——小白速会

    指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bi ...

  10. VUE:内置指令与自定义指令

    VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...

随机推荐

  1. ⑥ 设计模式的艺术-06.建造者(Builder)模式

    场景 我们要建造一个复杂的产品.比如:神州飞船,Iphone.这个复杂的产品的创建.有这样一个问题需要处理: 装配这些子组件是不是有个步骤问题? 实际开发中,我们所需要的对象构建时,也非常复杂,有很多 ...

  2. SDUT 3917

    UMR 现在手里有 n 张康纳的表情,最上面一张是玛吉呀巴库乃.现在 UMR 如果每次把最上面的 m 张牌移到最下面而不改变他们的顺序及朝向,那么至少经过多少次移动玛吉呀巴库乃才会又出现在最上面呢? ...

  3. python初步学习-python函数(一)

    python 函数 函数是组织好的,可重复使用的,用来实现单一或者相关联功能的代码段. 函数能提高应用的模块性和代码的重复利用率. 函数定义 python中函数定义有一些简单的规则: 函数代码块以de ...

  4. 【译】第一篇 SQL Server代理概述

    本篇文章是SQL Server代理系列的第一篇,详细内容请参考原文. SQL Server代理是SQL Server的作业调度和告警服务,如果使用得当,它可以大大简化DBA的工作量.SQL Serve ...

  5. 强连通图(最多加入几条边使得图仍为非强连通图)G - Strongly connected HDU - 4635

    题目链接:https://cn.vjudge.net/contest/67418#problem/G 具体思路:首先用tarjan缩点,这个时候就会有很多个缩点,然后再选取一个含有点数最少,并且当前这 ...

  6. Angular 2.0 基础:服务

    什么是服务(Service) 在Angular 2 中我们提到的服务 service 一般指的是 哪些能够被其他组件或者指令调用的 单一的,可共享的 代码块.当然,通过服务可以将数据和组件分开,这样就 ...

  7. Java的继承和多态

    看了博客园里面的一个文章,关于java的继承和多态: class A ...{ public String show(D obj)...{ return ("A and D"); ...

  8. windows环境下搭建Redis集群

    转载请注明出处,原文章地址: https://www.cnblogs.com/tommy-huang/p/6240083.html Redis集群: 如果部署到多台电脑,就跟普通的集群一样:因为Red ...

  9. koa中间层 文件下载的请求转发

    背景: 前端用a标签发起下载文档的get请求 node中间层接到get请求后将请求转发到java后端 java后端返回文档流传递给node中间层 好处: 后端的java业务逻辑层接口.数据库不向外部暴 ...

  10. MySQL登录问题1045 (28000)处理步骤【原创】

    MySQL登录问题1045 (28000)  俩台服务器主从复制,从的同步账号无法远程登录主服务器.报错ERROR 1045 (28000): Access denied for user 'root ...