vue的常用指令：
1、 v-model: {{value}}会根据input里的值动态改变
<body> <div id="app"> //当加上v-once指令后，该数据不会随input而改变 <p v-once>原始数据：{{input}}</p> <p>{{input}}</p> <input type="text" v-model="input" /> </div> <script src="js/vue.js"></script> <script> //vue实例 var app = new Vue({ el: '#app',//el绑定空间 data: { input:'' } }) </script> </body> |
2、v-if: v-if="true/false/表达式"，但不能是代码。true显示，
v-show: 用法和v-if一样，唯一的区别是v-if是真是删除不显示代码，而
v-show只是在CSS中display="hide",渲染隐藏。v-if适用于修改不频繁的。
<div id="test_if"> <p v-if="show">show show show </p> <p v-if="hide">hide hide hide</p> <p v-if='height>5'>{{height}}</p> <p v-show='height>5'>{{height}}</p>//大于5就显示 </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#test_if", data:{ show:'true', hid:'false', height:8 } }); </script> |
3、v-else: *v-else不能单独使用，必须配合v-if 或者 v-else-if
与if(){}else if(){}else{} 逻辑相同
<div id="test_if"> <p v-if="score > 90">优秀</p> <p v-else-if="score > 80">良好</p> <p v-else-if="score > 60">及格</p> <p v-else="">不及格</p> <input type='text' v-model="score" /> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#test_if", data:{ score:'' } }); </script> |
4、v-for:循环遍历===》遍历数组、对象、字符串（以字母遍历）
<style> table{ width: 300px; margin: 50px auto; border: 1px solid red; text-align: center; } thead{ background-color: orangered; } </style> <body> <div id="test_for"> <table> <thead> <td>姓名</td> <td>年龄</td> <td>性别</td>???????? </thead> <tbody v-for="u in users"> <td>{{u.name}}</td> <td>{{u.age}}</td> <td>{{u.sex}}</td>???????? </tbody> </table> </div>
</body> <script src="js/vue.js"></script> <script> new Vue({ el:'#test_for', data:{ users:[{name:'zs' , age:15 , sex:'man'}, {name:'ls' , age:39 , sex:'man'}, {name:'ww' , age:24 , sex:'woman'}, {name:'zl' , age:18 , sex:'man'}, {name:'sq' , age:30 , sex:'man'} ] } });
</script> |
5、v-text\v-html 对原内容进行覆盖
<div id="context"> {{mesg}}>>>希望覆盖的内容 <p v-text='text'>希望覆盖的内容</p> <p v-html="html">解析传入代码</p> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#context", data:{ mesg:"123456",//不能覆盖，只能共存 text:'123',//可以覆盖 html:"<input type='date'/> <input type='color'/>"//覆盖同时，对传入参数进行解析 } }); </script> |
6、基本使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue01</title> </head> <body> <div id="app"> <p>{{message}}</p> <p>{{meg}}</p> </div> </body> <script src="js/vue.js"></script> <script> //vue实例 var app = new Vue({ el: '#app',//el绑定空间 data: { message:'hello vue',//消息映射 meg:'my first vue' } }) </script> </html> |
7、v-bind :动态样式绑定
v-bind:style 等同于 ：style
.testBind{ background-color: orangered; }
<div id="bind"> <img src="img/123.jpg" alt="123" width="300px" height="200px"/> <img v-bind:src=path v-bind:alt="note" width="300px" height="200px"/> <p v-for="(collega,index) in collegas" v-bind:class="index===clazzIndex? 'testBind':''"> {{collega}} <p> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#bind", data:{ collegas:[ "java学院", 'html学院', 'ui学院', '大数据学院', 'Ai学院' ], clazz:"testBind", path:"img/123.jpg", note:123, clazzIndex:3 } }); |
8、v-on:绑定事件
v-on:click="" 等同于 @click=""
<div id="test_on"> <p :style="{color:colors}">{{mesg}}</p> <button v-on:click=changecontext()>改变内容</button> <button @click=changeColor>改变颜色</button>
</div> <script src="js/vue.js"></script> <script> new Vue({ el:"#test_on", data:{ mesg:"今天天气很好", colors:"red" }, methods:{ changecontext(){ this.mesg = '我今天吃什么' }, changeColor(){ alert(123); this.colors = 'orange' } } }); </script> |
