1、指令的格式

1.1. 指令的概念

指令是指带有v-前缀的特殊属性,指令的职责是当其表达式的值改变时,相应的将某些行为应用到DOM上。

1.2. 指令必须是html的属性

指令只能以带前缀的html属性形式出现。

1.3. 指令的参数

   有的指令能接受参数,可以在指令后以冒号指明。

1.4. 指令的修饰符

修饰符是以“.”指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如 .prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()

.once修饰符告诉指令只处理一次事件。

1.5. 指令的缩写

Vue.js为v-bind和v-on指令提供了缩写语法:

2、条件指令(v-if)

Vue.js的指令中有一些用作条件渲染的指令,他们是v-if、v-else、v-else-if指令。这些条件指令执行的流程与编程语言条件语句相同。

 V-if是真正的条件渲染,因为他会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。

   意思就是V-if这种条件指令,他在显示和隐藏元素的时候是通过操作dom来完成,比如条件成立时,vue会创建这个元素,并将其加到dom上。当条件不成立的时候,vue会销毁这个元素(从dom中删除)。这种实现方式跟css显示和隐藏元素截然不同。要注意。。。。

3、条件指令(v-show)

V-show是另一个条件渲染指令。无论表达式条件是否成立,v-show都会将内容添加到DOM中,条件成立就用CSS将内容显示出来,否则就用CSS把内容隐藏。这跟v-if是截然不同的!!!!!

4、v-bind指令

V-bind指令为属性绑定特定的值。

所有的属性都可以用v-bind指令绑定。

样式属性用v-bind指令绑定动态值的做法非常普遍。里面的例子中,isActive为true的时候,控件的class属性值为active

我们可以在参数中传入更多属性用来动态切换多个class,动态css也可以与普通的class属性共存。

我们还可以绑定一个数据对象或者是数组。

5、列表渲染指令(v-for)

V-for 指令可以把数组里的数据渲染输出到模板中。

在v-for块中,我们拥有对父作用域属性的完全访问权限。V-for还支持一个可选的第二个参数为当前项的索引。

在v-for块中,我们可以获取对象的key和value

6、VUE指令的更多相关文章

  1. Vue指令总结---小白同学必看

    今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...

  2. 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  3. vue指令总结(二)

    一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...

  4. vue指令与$nextTick 操作DOM的不同之处

    异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...

  5. vue指令概览

    原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...

  6. vue 指令中el 的 parentNode 为空的问题

    在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_h ...

  7. vue指令用法

    vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...

  8. Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  9. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  10. vue指令大全~~~

    是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑 ...

随机推荐

  1. 创建readonly只读用户脚本

    身为一名运维工作人员,保证服务器的安全是必要项,当开发人员或测试人员需登录到服务器查看日志等操作时,可只给定特定的权限防止误操作的惨况产生. 以下脚本内容均为我本人环境,如有更改可自行修改. ~]# ...

  2. 为 Jupyter Notebook指定虚拟环境的 Python 解释器

    说明:本机系统为 win10 64 位, base 是集成于 Anaconda3 的 64 位的python,以下是创建虚拟环境 py366-32,安装 3.6.6 版的 32 为python,把 3 ...

  3. js检测手机类型(android,ios,blackberry,windows等)

    var isMobile = { Android: function() { return navigator.userAgent.match(/Android/i); }, BlackBerry: ...

  4. WooCommerce代码合集整理

    本文整理了一些WooCommerce代码合集,方便查阅和使用,更是为了理清思路,提高自己.以下WooCommerce简称WC,代码放在主题的functions.php中即可. 修改首页和分类页面每页产 ...

  5. c语言中的数据类型的最大最小值

    #include <float.h>#include <limits.h> int   n1 = INT_MIN;int   n2 = INT_MAX;float f1 = F ...

  6. VIJOS-P1282 佳佳的魔法照片

    洛谷 P1583 魔法照片 洛谷传送门 JDOJ 1396: VIJOS-P1282 佳佳的魔法照片 JDOJ传送门 Description 一共有n个人(以1--n编号)向佳佳要照片,而佳佳只能把照 ...

  7. python基础之八:知识小结及补充

    一.python2 与python3 的区别 1.在2中print后可带扣号,也可不带,3中必须带,否则报错! #print 'hello python2' print('hello python3' ...

  8. django -- web框架的本质

    web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 下面代码是一个简单的socket服 ...

  9. [东西]EquationCalcular

    名称:EquationCalcular 版本:V1.0.0 更新日期:2015/9/27   简要介绍:本工具用于计算范围比较有限的方程及方程组,仅仅局限于n元一次方程组,欢迎需要的小学生和初中生来玩 ...

  10. java插入代码块

    粘贴1: 当代码写到一定程度之后,就会发现很多代码都被重复地敲了N多遍,甚至毫不夸张地说:闭着眼睛都能敲出来.大量地敲这些重复地代码,除了锻炼敲键盘的速度,基本上没有其他益处,但是长期下来会浪费很多时 ...