Vue2.0中的系统指令
v-on注册事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{count}}<br />
<button v-on:click="change">点击改变count值</button><br />
{{message}}<br />
<button @click="doSomething">点击改变message值</button>
</div> <script>
new Vue({
el: '#app',
data:{
count:0,
message:20
},
methods:{
change:function(){
this.count +=1
},
doSomething:function(){
this.message -=1
}
}
})
</script>
</body>
</html>
差值表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h4>{{name + "world"}}</h4>
{{name == "Vue"? "true":"false"}}
<input type="text" value={{name}}
</div> <script>
new Vue({
el: '#app',
data:{
name:"hello "
}
})
</script>
</body>
</html>
vue-text和v-html
用来解决网速过慢而导致一开始渲染出错的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--v-text可以将一个变量的值渲染到指定的元素中-->
<span v-text="name"></span><br /> <!--
双大括号和v-text会将数据解释为纯文本，而非HTML
为了输出真正的HTML，需要使用v-html指令
-->
<span v-html="name"></span>
</div> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data:{
name:"<strong>hello</strong>"
}
})
</script>
</body>
</html>
v-cloak
v-cloak指令保持在元素上直到关联实例结束编译后自动移出，v-cloak和CSS规则如[v-cloak]{display:none;}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕，
通常用来防止{{}}表达式闪烁的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<span v-cloak>{{name}}</span>
</div> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data:{
name:"<strong>hello</strong>"
}
})
</script>
</body>
</html>
v-bind
可以给html元素或者组件动态的绑定一个或多个特性，例如动态绑定style和class
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<input type="text" v-bind:value="name" />
<input type="text" :value="name" />
<a v-bind="{href:'http://itcast.cn/index/'+id}">跳转</a>
</div> <script>
new Vue({
el: '#app',
data:{
name:"hello",
id:2
}
})
</script>
</body>
</html>
v-model双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<span>{{name}}</span><span></span><br />
<input type="text" v-model="name" />
<hr />
<form method="get"action="#">
<input type="text" id="username" v-model="user.uname" />
<input type="password" id="pwd" v-model="user.upwd" />
<input type="button" @click="submit" value="提交" />
</form>
</div> <script>
new Vue({
el: '#app',
data:{
name:"hello",
user:{uname:"",upwd:""}
},
methods:{
submit:function(){
console.log("用户名："+this.user.uname+"\n密码："+this.user.upwd);
}
}
})
</script>
</body>
</html>
v-for
通常是根据数组中的元素遍历指定模板内容生成内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<ol>
<li v-for="(item,index) in list">{{index}}-{{item}}</li>
</ol>
<ul>
<li v-for="(obj,index,key) in user">{{index}}-{{key}}-{{obj}}</li>
</ul>
</div> <script>
new Vue({
el: '#app',
data:{
name:"hello",
list:[1,2,3,4],
user:{
name:"Vue",
age:3
}
}
})
</script>
</body>
</html>
v-if和v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<span v-if="screen">你现在能看到我</span><br /><br />
<hr />
<button @click="toggle">显示隐藏切换</button>
<div v-if="isshow">使用v-if</div>
<hr />
<button @click="ggle">显示隐藏切换</button>
<div v-show="show">使用v-show</div>
</div> <script>
new Vue({
el: '#app',
data:{
screen:true,
isshow:true,
show:true
},
methods:{
toggle:function(){
this.isshow = !this.isshow;
},
ggle:function(){
this.show = !this.show;
}
}
})
</script>
</body>
</html>
【v-if和v-show的区别】
v-if和v-show都能够实现对一个元素的隐藏和显示操作，但是v-if是将这个元素添加或者移出到dom中，而v-show是在这个元素上添加style="display:none；"和移出它来控制元素的显示和隐藏
Vue2.0中的系统指令的更多相关文章
- vue2.0中router-link详解
vue2.0中router-link详解:https://blog.csdn.net/lhjuejiang/article/details/81082090 在vue2.0中,原来的v-link指令已 ...
- Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？（转）
https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...
- Vue2.0中的transition组件
组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...
- router-view在vue2.0中不显示，解决方法
学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...
- vue2.0中使用pug(jade)
第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...
- vue2.0中使用less
第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- vue2.0 中#$emit,$on的使用详解
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...
- Vue2.0中v-for迭代语法变化（key、index）【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
随机推荐
- 项目中git的使用
通常一个项目的开发周期相对较长,为了便于对过程中的项目版本进行管理,以及方便多人合作进行开发,常需要使用到版本管理控制软件,本篇介绍常用的版本控制器git,记之共享. 一.git是什么?有何特点? 用 ...
- 在线词云制作tagxedo
最近在用python制作词云的时候发现了一个更加方便快捷很好玩的词云制作网站 http://www.tagxedo.com/app.html 所以今天就来大致介绍下是怎么使用的 1.先来介绍下tagx ...
- Python学习 day13
一.可迭代对象和迭代器 1.回顾可以被for循环的对象 list.dic.str.set.tuple.文件句柄f.range().enumerate() 只有可迭代对象才能被for循环,当我们遇到一个 ...
- SystemVerilog中枚举类型注意事项
enum logic {a = 'bx, d = 1'bz}; 在SystemVerilog枚举类型中当使用logic进行声明时,注意logic为四态,所以当使用时如果声明时需要x.z态需要显式声明. ...
- app接口，如何保证是由app内部调用而非外部模拟post请求调用。
在爬虫快手主播信息的时候,发现只要我改动一下参数,比如第一页 page=1的时候,需要爬下一页,把page改为2发现提示sign验证失败了 也就是说,快手在开发的时候考虑了有人抓包到接口后,通过修改参 ...
- springboot+自定义注解实现灵活的切面配置
利用aop我们可以实现业务代码与系统级服务例如日志记录.事务及安全相关业务的解耦,使我们的业务代码更加干净整洁. 最近在做数据权限方面的东西,考虑使用切面对用户访问进行拦截,进而确认用户是否对当前数据 ...
- 011-filter模板
1 模板一 package ${enclosing_package}; import java.io.IOException; import javax.servlet.FilterChain; im ...
- 【C语言】-指向一维数组元素的指针
本文目录 一.用指针指向一维数组的元素 二.用指针遍历数组元素 三.指针与数组的总结 四.数组.指针与函数参数 说明:这个C语言专题,是学习iOS开发的前奏.也为了让有面向对象语言开发经验的程序员,能 ...
- jquery jgrid filterToolBar beforeSearch 修改postData
beforeSearch: function() { var posted_data = $("#mygrid").jqGrid('getGridParam,'postData') ...
- DDD中的EFCore
EFCore在DDD中的使用 在DDD中,我们对聚合根的操作都会通过仓储去获取聚合实例. 因为聚合根中可能会含有实体属性,值对象属性,并且,在DDD中,我们所设计的领域模型都是充血模型.所以,在对聚合 ...