基本指令

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. Codeforces Round #191 (Div. 2) A. Flipping Game(简单)

    A. Flipping Game time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  2. Jeson老师写的nginx切割脚本

    #Jeson #Email:jeson@iaskjob.com #变量定义:access.error日志文件列表 NGINX_LOG=(imoocc_com_access iaskjob_com er ...

  3. 强制换行CSS样式

    语法: word-wrap : normal | break-word 取值: normal :? 默认值.允许内容顶开指定的容器边界 break-word :? 内容将在边界内换行.如果需要,词内换 ...

  4. void指针和NULL指针

    Void指针和NULL指针 Void指针: Void指针我们称之为通用指针,就是可以指向任意类型的数据.也就是说,任何类型的指针都可以赋值给Void指针. 举例: #include<stdio. ...

  5. PHP 快速建立一个对象

    前言 PHP 中的数组(尤其关联数组)是经常使用的 —— 因为方便.在一些框架中也经常见到返回数组格式的配置参数.然而有些时候可能需要对象而非数组类型的配置参数,在查阅网络资料后找到了方法,作以记录. ...

  6. ssh连接不上排查方法总结

    //常见报错信息 # No route to host --> server端没有开机或是网络不通(这个原因很多,最简单的是网线没有插.还有就是可能会是网卡down了等) 如果是网卡down了i ...

  7. 访问公网WebService服务

    接下来,我们演示如何访问公网webservice服务. 我们以访问 http://www.webxml.com.cn/zh_cn/index.aspx 为例,主要演示手机号码归属地查询服务(使用说明书 ...

  8. [ python ] 接口类和抽象类

    接口类 继承有两种用途:1. 继承基类的方法,并且做出自己的改变或者扩展(代码重用)2. 申明某个子类兼容于某基类,定义一个接口类interface,接口类定义了一些接口名且未实现接口的功能,子类继承 ...

  9. SP 页面缓存以及清除缓存

    JSP 页面缓存以及清除缓存 一.概述 缓存的思想可以应用在软件分层的各个层面.它是一种内部机制,对外界而言,是不可感知的. 数据库本身有缓存,持久层也可以缓存.(比如:hibernate,还分1级和 ...

  10. 企业级-Mysql双主互备高可用负载均衡架构(基于GTID主从复制模式)(原创)

    前言:          原理与思想        这里选用GTID主从复制模式Mysql主从复制模式,是为了更加确保主从复制的正确性.健康性与易配性.这里做的是两服务器A,B各有Mysql实例331 ...