vue之指令系统
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。
在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上。
OK,接下来我们一一介绍我们的指令系统的用法。
一、条件渲染
1.1 v-if
表示条件渲染
在vue中,我们使用v-if指令,将当前的dom元素设置
<p v-if='show'>显示</p>
注意:show变量,是数据属性中存储的值。要么真(true)要么假(false)。该属性值为true的时候,p标签显示,反之则不显示。
也可以添加一个v-else块。
<div v-if='show'>显示</div>
<div v-else>隐藏</div>
另外还有v-else-if块,它是2.1.0新增的。
<div v-if="type==='thunder'>
打雷
</div>
<div v-else-if="type==='rain'>
下雨
</div>
<div v-else>
雷阵雨
</div>
1.2 v-show
根据条件展示元素的选项 v-show
指令。用法大致一样:
<p v-show='ok'>网站导航</p>
如果ok数据属性值为false,则隐藏。为true,则展示。
不同的是带有 v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS 属性 display
注意:v-show不支持v-else块
1.3 v-if vs v-show
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。
1.4 v-if与v-for一起使用
v-for指令,后面马上介绍到。
当v-if与v-for一起使用时,v-for具有比v-if更高的优先级。
二、class与style绑定
2.1 v-bind
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性。所以我们可以用 v-bind
处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind
用于 class
和 style
时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
比如我们可以
2.1.1 绑定字符串
<span v-bind:title='time'>鼠标悬停几秒后当前时间</span>
data:{
time: `页面加载于${new Date().toLocaleString()}`,
}
当鼠标悬停在span标签几秒之后,会显示time的值。
2.1.2 绑定HTML Class
我们在js中常用操作dom的css样式属性的方法有很多,在vue中可以直接使用v-bind:class来给每个标签元素添加class。
对象语法
我们可以传给 v-bind:class
一个对象,以动态地切换 class:
...
data:{
isRed:true
}
<div v-bind:class='{box1:isRed}'></div>
如果有按钮的话,我们可以通过点击按钮动态的切换class。此外,v-bind:class
指令也可以与普通的 class 属性共存
<div class='a' v-bind:class='{box1:isRed,box2:isGreen}'></div>
和如下data:
data:{
isRed:true,
isGreen:fasle
}
效果如下
有这么一个css样式:
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
background-color: green;
}
那么我们在文档结构中可以加一个
<button v-on:click ='clickHandler'>切换</button>
使用v-on绑定js中所有的事件。这里我们是绑定了点击事件。(后面会介绍)
在实例化options参数中添加如下配置:
methods:{
clickHandler(){
this.isGreen = !this.isGreen;
}
}
2.1.3 数组语法
我们可以把一个数组传给v-bind:class,以应用一个 class 列表:
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为:
<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 class,可以用三元表达式:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这样写将始终添加 errorClass
,但是只有在 isActive
是 true时才添加 activeClass
。
不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
三、事件处理
3.1 监听事件
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
<div id='app'>
<button v-on:click = 'count+=1'>加{{count}}</button>
<p>点了{{count}}次</p>
</div>
var app = new Vue({
el:'#app',
data:{
count:0
}
})
结果为:当我点击的按钮的时候,下面p标签的数据也会发生变化,同时button的文字也会发生变化。
3.2 事件处理方法
然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on
指令中是不可行的。因此 v-on
还可以接收一个需要调用的方法名称
<div id='app'><button v-on:click = 'countClick'>加{{count}}</button><p>点了{{count}}次</p></div>
var app = new Vue({
el:'#app',
data:{
count:0
},
methods:{
countClick(){
this.count+=1;
}
}
})
3.3 为什么在HTML中监听事件
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on
有几个好处:
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。
当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
指令 | 简写 |
v-bind | : |
v-on | @ |
四、列表渲染
4.1 一个数组列表的v-for
用v-for把一个数组对应为一组的元素。
用 v-for
指令根据一组数组的选项列表进行渲染。v-for
指令需要使用 item in items
形式的特殊语法,items
是源数据数组并且 item
是数组元素迭代的别名。
另外:v-for
还支持一个可选的第二个参数为当前项的索引。
4.2 一个对象的v-for
用 v-for
通过一个对象的属性来迭代。
vue之指令系统的更多相关文章
- Vue学习第一天:Vue.js指令系统
1. 如何使用Vue.js? 1.1 直接引入 - <script src="./statics/vue.min.js"></script> - 引入之后在 ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- Vue小白篇 - Vue 的指令系统 (1) v-text、v-html
v-text:相当于innerText v-html:相当于innerHTML <div id="box"> {{ msg }} <div v-text=&quo ...
- Vue.js-02:第二章 - 常见的指令的使用
一.前言 在上一章中,我们了解了一些在使用 Vue 进行开发中经常会遇到的基础概念,与传统的前端开发不同,Vue 可以使我们不必再使用 JavaScript 去操作 DOM 元素(还是可以用,但是极度 ...
- Vue.js-03:第三章 - 事件修饰符的使用
一.前言 熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能.不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这 ...
- Vue.js-04:第四章 - 页面元素样式的设定
一.前言 前端开发中有三大件:HTML.CSS.JavaScript,在前面的学习中,不管是学习 Vue 的指令系统还是 Vue 的事件修饰符,主要还是针对的是我们在前端开发中的 JavaScript ...
- Vue的基础使用
渐进式的前端框架 vue react augular 作者: 尤雨溪 facebook 谷歌公司 前端框架和库的区别 功能上的不同: jquery库:包含DOM(操作DOM)+请求,就是一块功能. a ...
- vue入门一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- day 81 Vue学习一之vue初识
Vue学习一之vue初识 本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...
随机推荐
- Sql server连接数据库报错相关
情况一:此版本的 SQL Server 不支持用户实例登录标志. 解决方法: 方法1:在连接属性的设置里边,点高级,将User Instance 设置为false,默认的true(我在中没有找到相应的 ...
- 使用jquery操作session
摘要: 今天分享的是使用jquery来处理session.我们将使用sessionStorage对象,它类似与localStorage对象,只是sessionStorage是用来储存session数据 ...
- 使用editorconfig配置你的编辑器
摘要: 在团队开发中,统一的代码格式是必要的.但是不同开发人员使用的编辑工具可能不同,这样就造成代码的differ.今天给大家分享一个很好的方法来使不同的编辑器保持一样的风格. 不同的编辑器也有设置代 ...
- c++单例设计模式---17
原创博文,转载请标明出处--周学伟 http://www.cnblogs.com/zxouxuewei/ 全局变量在项目中是能不用就不用的,它是一个定时炸弹,是一个不安全隐患,特别是在多线程程序中, ...
- 上机题目(0基础)- 用数组实现记事本(Java)
用java实现一个记事本程序,记录记下的按键,代码例如以下: package com.java.test; import java.awt.Graphics; import java.awt.even ...
- 九度 1464:Hello World for U
题目描述: Given any string of N (>=5) characters, you are asked to form the characters into the shape ...
- 递归的几个demo
/** * Created by root * Description : 递归函数 */ object RecursionTest { def main(args: Array[String]): ...
- Elasticsearch 5.4.3 聚合分组
第一个分析需求:计算每个tag下的商品数量 GET /ecommerce/product/_search { "aggs": { "group_by_tags" ...
- react设置多个className
在一个元素上设置样式,有一个固定的样式,然后还有一个使用三元运算符根据条件添加的样式. 比如说有一个固定样式"title": <div className="tit ...
- 解决layui下拉选择框只能选择不能手动输入文字
审查元素可以看到,layui的select下拉框是用input和div模拟出来的,所以,如下例子,我的解决方法是:$('.mySelect').find('input').removeAttr(&qu ...