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 ...
随机推荐
- 【算法笔记】B1019 数字黑洞
1019 数字黑洞 (20 分) 给定任一个各位数字不完全相同的 4 位正整数,如果我们先把 4 个数字按非递增排序,再按非递减排序,然后用第 1 个数字减第 2 个数字,将得到一个新的数字.一直 ...
- MyEclipse配置，每次打开server中都没有weblogic
最近在myeclipse新配了个weblogic,结果每次打开myeclipse在server中都看不到weblogic,得重新去配置页面走一遭才能出现.很麻烦. 后来在网上找了找,找到一个办法: 在 ...
- P3648 [APIO2014]序列分割
传送门 首先容易证明,得分和切的顺序没有关系 所以直接默认先切左边再切右边就好了 然后显然可以 $dp$ 一开始想的是设 $f[i][j]$ 表示切了 $i$ 次,此次把 $j$ 和 $j+1$ 分开 ...
- ASP.NET中类的多语言编译
App_Code 文件夹中同时使用多种语言编程的方法 在web.config文件里,加入如下的配置 <configuration> <system.web> <comp ...
- 2.6 Rust Slice Type
字符串操作 fn first_word(s: &String) -> usize { let bytes = s.as_bytes(); for (i, &item) in by ...
- JSON中的坑
坑一. 在使用localStorage时,我们会给一个key存取一个value,这个value可以是一个普通的字符串,也可以是一个对象,如果是一个字符串,我们就需要通过JSON.stringify来转 ...
- UnxUtils让windows下的dos命令变为linux下的命令
一.UnxUtils UnxUtils是一个可以支持在Windows下使用linux命令的工具,用习惯了linux之后,感觉Windows的dos命令实在是太难用了,发现了这个工具,非常的小,装了它之 ...
- LinuxShell脚本编程基础4-条件测试与条件判断
1.条件测试(test,[]) #! /bin/bash echo "请输入登陆的用户名:" read name1 if test "$name1" = &qu ...
- ios UITableView 搜索
自己实现 UITableView 搜索,相对于使用 UISearchDisplayController 来说自己写稍微麻烦了那么一点点,但是更加灵活.主要就是用一个字段区分出当前是搜索还是非搜索,然后 ...
- CSS的margin属性：详解margin属性
在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗 ...