指令(Directives) 是带有v- 前缀的特殊属性,指令属性是单一的js表达式.

指令的职责就是表达式的值发生变化时,在DOM中做出相应的回应.

如下例子:

实例

<div id="app">
     <p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({ el: '#app', data: { seen: true } })
</script>

实例:根据时间切换2段文本内容

<div id="app">
<ul>
<li v-show="ok">
我是老大
</li>
<li v-show="!ok">我是老二</li>
</ul> </div> <script>
var vm = new Vue({
el: '#app',
data: {
ok: true
}
}) setInterval(function () {
vm.ok = !vm.ok;
},2000)
</script>

Vue指令的概念的更多相关文章

  1. 6、VUE指令

    1.指令的格式 1.1. 指令的概念 指令是指带有v-前缀的特殊属性,指令的职责是当其表达式的值改变时,相应的将某些行为应用到DOM上. 1.2. 指令必须是html的属性 指令只能以带前缀的html ...

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

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

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

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

  4. 【前端vue开发】Hbuilder配置Avalon、AngularJS、Vue指令提示

    偶尔也会研究一下前端内容,因为Hbuilder是基于eclipse开发的,所以用起来倍感亲切啊,而且在我尝试使用的几款前端开发工具中,Hbuilder的表现也是相当出色地,可以访问Huilder官网下 ...

  5. Vue.js核心概念

    # 1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效 ...

  6. vue指令总结(二)

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

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

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

  8. vue指令概览

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

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

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

随机推荐

  1. Cocos2d-x 脚本语言Lua基本数据结构-表(table)

    Cocos2d-x 脚本语言Lua基本数据结构-表(table) table是Lua中唯一的数据结构.其它语言所提供的数据结构,如:arrays.records.lists.queues.sets等. ...

  2. hdu 1258 Sum It Up (dfs+路径记录)

    pid=1258">Sum It Up Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  3. 利用栈Stack实现队列(Queue)

    实现说明: 入队时,将元素压入s1; 出队时,推断s2是否为空,如不为空,则直接弹出顶元素:如为空.则将s1的元素逐个"倒入"s2.把最后一个元素弹出并出队; 这个思路,避免了重复 ...

  4. 淘宝数据库OceanBase SQL编译器部分 源代码阅读--生成物理查询计划

    SQL编译解析三部曲分为:构建语法树,制定逻辑计划,生成物理运行计划. 前两个步骤请參见我的博客<<淘宝数据库OceanBase SQL编译器部分 源代码阅读--解析SQL语法树>& ...

  5. java web项目的部署

    java web项目的部署 我刚开始学着编写java web项目,着实遇到不少麻烦,感觉JAVA真难侍候,好多东西都是手动.手动. 就拿这个web项目在tomcat上的部署来说吧.我在项目的build ...

  6. USACO 刷题有感

    最近每天都尽量保持着每天一道USACO的题目,呵呵,一开始都是满简单的,一看题目基本上思路就哗啦啦地出来了,只不过代码实现有点麻烦,花了一些时间去调试,总体感觉还不错,但是越往后做,应该就很难保持一天 ...

  7. android 使用AlarmManager定时启动service

    private static AlarmManager am; private static PendingIntent pendingIntent; /** * 使用 AlarmManager 来 ...

  8. Joseph问题 (线段树)

    Joseph问题似乎是入门题,就是那个报数出圈的问题,不过它暴力模拟的复杂度是O(nm)的,如果题目的数据范围达到了30000,那就超时了.怎么用线段树维护呢? 我们可以这么考虑,每次我们其实要查询在 ...

  9. Django的CBV方式讲解

    CBV使用配置 路径url的配置 cbv 顾名知义就是通过类的方法来调用,我们在url中配置为如下路径 url(r'^cbv.html/', views.Cbv.as_view()), 这里的Cbv是 ...

  10. 测试DNS服务的命令

    测试DNS服务的命令 dig dig用于测试dns系统,因此不会查询hosts文件进行解析. dig - DNS lookup utility dig [@global-server] [domain ...