指令(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. .NET Core/.NET之Stream简介 Rx.NET 简介

    .NET Core/.NET之Stream简介   之前写了一篇C#装饰模式的文章提到了.NET Core的Stream, 所以这里尽量把Stream介绍全点. (都是书上的内容) .NET Core ...

  2. java 开发webservice

    这几天用java开发一个webservice,搞死了.java果然很难侍候! 传说java搞webservice,有好几种途径(为什么不是一种?要搞这么多种,让人一听,头都大了.当然啦,生物多样性总是 ...

  3. javascript总结02

    1 如何打开和关闭一个新的窗口? 2 Window对象的哪个属性能返回上一个浏览页面? 3 一次或多次执行一段程序的函数是什么? 定时函数 4 如何查找并访问节点? 5 给表格新增行和单元格的方法分别 ...

  4. go语言---传值和传引用

    go语言---传值和传引用 https://blog.csdn.net/cyk2396/article/details/78893828 1.定义: b = a; b.modify(); 如果b的修改 ...

  5. gitlab调试

    Bundle complete! 104 Gemfile dependencies, 161 gems now installed.Gems in the groups development, te ...

  6. urllib2.urlopen超时未设置导致程序卡死

    没有设置timeout参数,结果在网络环境不好的情况下,时常出现read()方法没有任何反应的问题,程序卡死在read()方法里,搞了大半天,才找到问题,给urlopen加上timeout就ok了,设 ...

  7. 搞笑代码注释,佛祖保佑 永无BUG

    佛祖保佑 永无BUG 上传图片即可生成字符画,效果还不错, https://www.fontke.com/tool/image2ascii/ 神注释大全 https://github.com/Blan ...

  8. 在Linux环境下使用OpenSSL对消息和文件进行加密(转载)

    转自:http://netsecurity.51cto.com/art/201301/378513.htm 1.简介 OpenSSL是一款功能强大的加密工具包.我们当中许多人已经在使用OpenSSL, ...

  9. P2339 提交作业usaco(区间dp)

    P2339 提交作业usaco 题目背景 usaco 题目描述 贝西在哞哞大学选修了 C 门课,她要把所有作业分别交给每门课的老师,然后去车站和同学们一起回家.每个老师在各自的办公室里,办公室要等他们 ...

  10. vue.js学习文档

    1.实例化vue对象 new Vue(){ } 2.对象属性 el: 控制的属性 data: 数据存储位置 methods: 方法存储位置 template: 模板样式 computed: 计算属性 ...