标签：button float click 配置 load position idt relative classname
demo-01：用户信息采集
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <script src="vue.min.js"></script> 6 <style> 7 body { 8 position:relative; 9 } 10 html,body { 11 width:100%; 12 height:100%; 13 overflow:hidden; 14 margin:0; 15 padding:0; 16 } 17 .mask { 18 background:rgba(0,0,0,0.5); 19 position:absolute; 20 top:0; 21 bottom:0; 22 left:0; 23 right:0; 24 } 25 .mask .box { 26 position:absolute; 27 background:#fff; 28 padding:30px; 29 top:50%; 30 left:50%; 31 transform:translate(-50%,-50%); 32 text-align:center; 33 border-radius:20px; 34 } 35 </style> 36 <script> 37 window.onload = function(){ 38 new Vue({ 39 el:"body", 40 data:{ 41 name:"", 42 age:"", 43 list:[], 44 show:false, 45 now:-1 46 }, 47 methods:{ 48 add:function(){ 49 this.list.push({ 50 name:this.name, 51 age:this.age 52 }); 53 this.reset(); 54 }, 55 reset:function(){ 56 this.name = ""; 57 this.age = ""; 58 }, 59 delete:function(){ 60 this.show = false; 61 if(this.now == "all"){ 62 this.list = []; 63 }else { 64 this.list.splice(this.now,1); 65 } 66 }, 67 confirm:function(index){ 68 this.show = true; 69 this.now = index == -100 ? "all" : index; 70 } 71 } 72 }) 73 } 74 </script> 75 </head> 76 <body> 77 <label for="name">用户名：</label><input type="text" id="name" placeholder="请输入用户名" v-model="name"> <br> 78 <label for="age">年龄：</label><input type="text" id="age" placeholder="请输入年龄" v-model="age"> 79 <br> 80 <input type="button" value="确定" v-on:click="add()"> 81 <input type="button" value="重置" v-on:click="reset()"> 82 <table cellpadding="10px" border="1" border-collapse="no"> 83 <caption>用户信息表</caption> 84 <thead> 85 <tr> 86 <td>索引</td> 87 <td>用户名</td> 88 <td>年龄</td> 89 <td>操作</td> 90 </tr> 91 </thead> 92 <tbody> 93 <tr v-for="item in list"> 94 <td>{{$index+1}}</td> 95 <td>{{item.name}}</td> 96 <td>{{item.age}}</td> 97 <td><button v-on:click="confirm($index)">删除</button></td> 98 </tr> 99 <tr v-show="list.length == 0"> 100 <td colspan="4">暂无数据</td> 101 </tr> 102 <tr v-show="list.length != 0"> 103 <td colspan="4"><button v-on:click="confirm(-100)">删除全部</button></td> 104 </tr> 105 </tbody> 106 </table> 107 <div class="mask" v-show="show"> 108 <div class="box"> 109 <h3>确认删除{{now=="all"?"所有":"第"+(now-0+1)}}项吗？</h3> 110 <button v-on:click="show=false">取消</button> 111 <button v-on:click="delete()">确认</button> 112 </div> 113 </div> 114 115 </body> 116 </html> <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <script src="vue.min.js"></script> 6 <style> 7 body { 8 position:relative; 9 } 10 html,body { 11 width:100%; 12 height:100%; 13 overflow:hidden; 14 margin:0; 15 padding:0; 16 } 17 .mask { 18 background:rgba(0,0,0,0.5); 19 position:absolute; 20 top:0; 21 bottom:0; 22 left:0; 23 right:0; 24 } 25 .mask .box { 26 position:absolute; 27 background:#fff; 28 padding:30px; 29 top:50%; 30 left:50%; 31 transform:translate(-50%,-50%); 32 text-align:center; 33 border-radius:20px; 34 } 35 </style> 36 <script> 37 window.onload = function(){ 38 new Vue({ 39 el:"body", 40 data:{ 41 name:"", 42 age:"", 43 list:[], 44 show:false, 45 now:-1 46 }, 47 methods:{ 48 add:function(){ 49 this.list.push({ 50 name:this.name, 51 age:this.age 52 }); 53 this.reset(); 54 }, 55 reset:function(){ 56 this.name = ""; 57 this.age = ""; 58 }, 59 delete:function(){ 60 this.show = false; 61 if(this.now == "all"){ 62 this.list = []; 63 }else { 64 this.list.splice(this.now,1); 65 } 66 }, 67 confirm:function(index){ 68 this.show = true; 69 this.now = index == -100 ? "all" : index; 70 } 71 } 72 }) 73 } 74 </script> 75 </head> 76 <body> 77 <label for="name">用户名：</label><input type="text" id="name" placeholder="请输入用户名" v-model="name"> <br> 78 <label for="age">年龄：</label><input type="text" id="age" placeholder="请输入年龄" v-model="age"> 79 <br> 80 <input type="button" value="确定" v-on:click="add()"> 81 <input type="button" value="重置" v-on:click="reset()"> 82 <table cellpadding="10px" border="1" border-collapse="no"> 83 <caption>用户信息表</caption> 84 <thead> 85 <tr> 86 <td>索引</td> 87 <td>用户名</td> 88 <td>年龄</td> 89 <td>操作</td> 90 </tr> 91 </thead> 92 <tbody> 93 <tr v-for="item in list"> 94 <td>{{$index+1}}</td> 95 <td>{{item.name}}</td> 96 <td>{{item.age}}</td> 97 <td><button v-on:click="confirm($index)">删除</button></td> 98 </tr> 99 <tr v-show="list.length == 0"> 100 <td colspan="4">暂无数据</td> 101 </tr> 102 <tr v-show="list.length != 0"> 103 <td colspan="4"><button v-on:click="confirm(-100)">删除全部</button></td> 104 </tr> 105 </tbody> 106 </table> 107 <div class="mask" v-show="show"> 108 <div class="box"> 109 <h3>确认删除{{now=="all"?"所有":"第"+(now-0+1)}}项吗？</h3> 110 <button v-on:click="show=false">取消</button> 111 <button v-on:click="delete()">确认</button> 112 </div> 113 </div> 114 115 </body> 116 </html>
事件指令：@click.stop="" // stop:阻止冒泡
@click.prevent="" // prevent:禁止默认行为
@keyup.enter="" // enter / up / down / left / right ......键盘事件 键盘码判断 简写
| 指令 | 全写 | 简写 |
| 绑定数据 | v-model | 无 |
| 绑定事件 | v-on:click | @click |
| 绑定属性 | v-bind:src | :src |
只有在html片段的指令中，可以直接写json中配置的变量名；
属性绑定特殊点：
1.:class=""三种形式：
| :class="[classname1 , classname2 ......]" | classname为json中data内配置的健，对应的值是css中的类名 |
| :class="{classname1 : bool1 , classname2 : bool2 ......}" | classname为css中类名，bool为json中data内配置的数据 |
| :class="objname" | objname为json中配置的对象名，配置规则如第二种 |
2.:style="" 与 :class类似，只是 值 变为对象
官方推荐第三种，对象形式。
花括号指令三种形式：
| {{ data }} | 普通绑定 |
| {{ *data }} | 一次性绑定 |
| {{{ data }}} | 可以识别html标签内容的绑定 |
过滤器注意点：
{{ "DOSOQLDFDO" |lowercase |capitalize }} // 注意：每一组过滤器要用空格隔开，不能紧挨着
标签：button float click 配置 load position idt relative classname
原文地址：http://www.cnblogs.com/wangxiaohang/p/7366772.html
