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+" 密码："+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；"和移出它来控制元素的显示和隐藏