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 ...
随机推荐
- mssqlServer大量数据快速插入：SqlBulkCopy
SqlBulkCopy类,为微软的一个大量数据快速插入.直接上代码 表结构: namespace SqlBulkCopy的演示 { using System.Data.SqlClient; publi ...
- 转如何检查数据库是否处于一致性的状态 以及 如果在DG 库上备份，恢复成一个主库
##sample 0 不完全恢复之后,open resetlogs之前,怎么快速的检查数据库是否处于一致性的状态?https://blog.csdn.net/msdnchina/article/det ...
- Kong在windows10的hyperV CentOS上安装
1.启用hyperV manager 2.下载CentOS 3.给CentOS共享网络,添加Legacy NetWork Adapter 4.启动CentOS后安装kong(官网可查) 5.安装Pos ...
- php codeception
前言 本测试用例只针对yii2 basic框架而写,若要支持其他框架,请自行查看phpcodeception指导(需要FQ)http://codeception.com/ yii2 basic默认已经 ...
- Net操作Excel，不依赖服务器端环境配置（终极方法NPOI）转。
这是起因,为什么会需要用到这个,主要是分析了一下为什么从oledb那个方式换成这个方式.文章见链接 http://www.cnblogs.com/Jerseyblog/p/6410703.html 前 ...
- linux(ubuntu-16.1) 下安装 odoo10 新版
1.虚拟机(VMware)中安装 ubuntu-16.1(网络适配器选择桥接模式). 安装成功后,运行 ubuntu 提示 "CPU已被客户机操作系统禁用" 时,需要修改配置文件解 ...
- MongoDB数据库初探 --- 认识与安装 && Mongoose安装
注意: monogdb数据在使用之后必须及时 mongodb.close()否则后台崩溃. 第一部分: MySQL数据库是关系型数据库,但是使用node开发时多用MongoDB数据库,两者各有优势,所 ...
- 关于reduce的使用方法
var rowData=[ {data:4,date:'06',code:'cr_3',name:'桥吊3'}, {data:1,date:'03',code:'cr_1',name:'桥吊1'}, ...
- 修改MyEclipse8.5的workspaces
到MyEclipse8.5的安装目录下 我安装在D盘,路径为:D:\Genuitec\MyEclipse 8.5\configuration\config.ini 打开config.ini文件: ...
- java.lang.RuntimeException Unable to instantiate application Caused by: java
参考:http://blog.csdn.net/xufazhong/article/details/71155528 dependencies { classpath 'com.android.too ...