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 ...
随机推荐
- python爬虫之urllib库（二）
python爬虫之urllib库(二) urllib库 超时设置 网页长时间无法响应的,系统会判断网页超时,无法打开网页.对于爬虫而言,我们作为网页的访问者,不能一直等着服务器给我们返回错误信息,耗费 ...
- 4G和有线网络的自动切换
最近项目有个需求,把移动服务器设备(Ubuntu14.04)安装4G模块,但如果连接有线时,可以自动切换到有线,以降低移动流量带来的费用. 以下是我实现的方法(经过一番痛苦的摸索) 1. 脚本/opt ...
- 设置第三方的SMTP服务
取得授权码:
- 4.nginx高可用
1.大体结构 一.使用场景介绍: nginx做负载均衡,来达到分发请求的目的,但是不能很好的避免单点故障,假如nginx服务器挂点了,那么所有的服务也会跟着瘫痪 .keepalived+nginx,就 ...
- C# 父窗体与子窗体之间委托
先实例化子窗体jobForm,然后让 jobForm.TransfEvent += job_TransfEvent;显示子窗体 if (jobForm.DialogResult != DialogRe ...
- 推荐-Everything搜索工具
简介: windows操作系统下极其强大的文件搜索工具. 下载: https://www.voidtools.com/downloads/ 推荐理由: 速度之快难以想象,日常工作必备工具之一. 发现的 ...
- ifconfig command not found
CentOS minimal 命令做了修改 可以运行 ip addr
- Oracle 通过子查询批量添加、修改表数据
1.通过查询快速创建表 create table test1(id,job,mgr,sal) as () ) ---这是一个分页查询 ok,表创建成功 2.通过查询快速创建视图 create or r ...
- MySQL数据表的修改
数据表的修改包括列的增加.列的删除.约束的添加.约束的删除等. 添加单列 ALTER TABLE tbl_name ADD [COLUMN] col_name column_definition [F ...
- java 写入数据到Excel文件中_Demo
=======第一版:基本功能实现======= import com.google.common.collect.Maps; import org.apache.log4j.Logger; impo ...