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 ...
随机推荐
- 2019 CCPC-Wannafly Winter Camp Day1 (Div2, onsite)
solve:4/11 补题:6/11 A 机器人 补题:zz 这是一道分类讨论的题目,有一个规律就是如果必须要从第一个区到第二个区,那么最多转区两次(1到2一次,2到1一次),然后分类讨论即可,只要细 ...
- HTML学习-01
1.标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接. 2.如果<head>里面设置了base,那么后面的img图片需要添加的相对路径. 3.不能使用工 ...
- EXCEL 使用宏 打水印
Sub 宏1() ' ' 宏1 宏 //用于调整列宽 加边框 ' ' 快捷键: Ctrl+w ' ActiveCell.Cells.Select ActiveCell.Cells.EntireColu ...
- 每一次要fix的pr
1.TODO一定要加自己名字 2.写代码考虑别人的阅读,比如event这样很general的名字不要用,所以不用from sqlalchemy import event, 要用import sqlal ...
- UnxUtils让windows下的dos命令变为linux下的命令
一.UnxUtils UnxUtils是一个可以支持在Windows下使用linux命令的工具,用习惯了linux之后,感觉Windows的dos命令实在是太难用了,发现了这个工具,非常的小,装了它之 ...
- emacs窗口半透明
转自 http://blog.csdn.net/dsjlzh/article/details/7804733 ;; transform window;; Anchor: March Liu (刘鑫) ...
- unity制作人物残影-绘制的方法
这里是利用skinnedMeshRenderer原理做的 所以脚本需要挂在带这个组件的模型上 模型shader 必须要有个_Color参数属性,并且这个值可以调节颜色,会改变人物整体的透明度 [代码下 ...
- 【c++】explicit 隐式类类型转换
上代码 #include <iostream> #include <sstream> using namespace std; class A { public: A(cons ...
- ASP.NET能知道的东西
ASP.NET能知道的东西 获取服务器电脑名: Page.Server.ManchineName 获取用户信息: Page.User 获取客户端电脑名:Page.Request.UserHostNam ...
- Hadoop实战之四~hadoop作业调度详解(2)
这篇文章将接着上一篇wordcount的例子,抽象出最简单的过程,一探MapReduce的运算过程中,其系统调度到底是如何运作的. 情况一:数据和运算分开的情况 wordcount这个例子的是hado ...