2018.7.13vue知识小结

Posted yangguoe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2018.7.13vue知识小结相关的知识,希望对你有一定的参考价值。

1               //配置是否允许vue-devtools检查代码,方便调试,生产环境中需要设置为false
2             Vue.config.devtools=false;
3             Vue.config.productionTip=false; //阻止vue启动时生成生产消息

for循环

 1 <ul>
 2              普通循环 
 3              <li v-for="value in arr">{{value}}</li> 
 4              <li v-for="value in user">{{value}}</li> 
 5 
 6              键值循环 
 7              <li v-for="(v,k) in arr">{{k}}={{v}}</li> 
 8              <li v-for="(v,k) in user">{{k}}={{v}}</li> 
 9 
10              可以直接循环包含重复数据的集合,可以通过指定:key属性绑定唯一key,当更新元素时可重用元素,提高效率,类似于vue1.0中track-by 
11              <li v-for="(v,k) in arr2" :key="k">{{v}}</li> 
12 
13             <li v-for="(user,index) in users">
14                 {{index+1}},{{user.id}},{{user.name}},{{user.age}}
15             </li>
16         </ul>

通过表单给table添加行:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>练习:用户管理</title>
  6     <script src="js/vue.js"></script>
  7     <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
  8     <script src="bootstrap/jquery.min.js"></script>
  9     <script src="bootstrap/bootstrap.min.js"></script>
 10 <body>
 11     <div class="contaienr">
 12         <h2 class="text-center">添加用户</h2>
 13         <form class="form-horizontal">
 14             <div class="form-group">
 15                 <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名</label>
 16                 <div class="col-sm-6">
 17                     <input class="form-control" id="name" placeholder="请输入姓名" v-model="user.name">
 18                 </div>
 19             </div>
 20             <div class="form-group">
 21                 <label for="age" class="control-label col-sm-2 col-sm-offset-2">年  龄:</label>
 22                 <div class="col-sm-6">
 23                     <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
 24                 </div>
 25             </div>
 26             <div class="form-group">
 27                 <label for="email" class="control-label col-sm-2 col-sm-offset-2">邮  箱:</label>
 28                 <div class="col-sm-6">
 29                     <input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">
 30                 </div>
 31             </div>
 32             <div class="form-group text-center">
 33                 <input type="button" class="btn btn-primary" value="重置"  @click="addUser">
 34                 <input type="reset" class="btn btn-primary" value="添加" >
 35             </div>
 36         </form>
 37         <hr>
 38         <!--表格-->
 39         <table class="table table-bordered table-hover">
 40             <caption class="h3 text-center text-info">用户列表</caption>
 41             <thead>
 42             <tr>
 43                 <th class="text-center">序号</th>
 44                 <th class="text-center">姓名</th>
 45                 <th class="text-center">年龄</th>
 46                 <th class="text-center">邮箱</th>
 47                 <th class="text-center">操作</th>
 48             </tr>
 49             </thead>
 50             <tbody>
 51                <tr v-for="(user,index) in users" class="text-center">
 52                    <td>{{index+1}}</td>
 53                    <td>{{user.name}}</td>
 54                    <td>{{user.age}}</td>
 55                    <td>{{user.email}}</td>
 56                    <td>
 57                        <button class="btn btn-danger btn-sm" @click="nowIndex=index"  data-toggle="modal" data-target="#del">删除</button>
 58                    </td>
 59                </tr>
 60                <tr>
 61                    <td colspan="5" class="text-right">
 62                        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1"  data-toggle="modal" data-target="#del">删除所有</button>
 63                    </td>
 64                </tr>
 65             </tbody>
 66         </table>
 67 
 68 
 69     <!-- 模态框,弹出框 -->
 70     <div class="modal fade" id="del">
 71         <div class="modal-dialog">
 72             <div class="modal-content">
 73                 <div class="modal-header">
 74                     <button class="close" data-dismiss="modal">
 75                         <span>&times;</span>
 76                     </button>
 77                     <h4 class="modal-title" v-show="nowIndex!==-1">确认要删除用户:{{users[nowIndex]?users[nowIndex].name:‘‘}} 吗?</h4>
 78                     <h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗?</h4>
 79                 </div>
 80                 <div class="modal-body text-center">
 81                     <button class="btn btn-primary" data-dismiss="modal">取消</button>
 82                     <button class="btn btn-primary" data-dismiss="modal" @click="deleteUser">确认</button>
 83                 </div>
 84             </div>
 85         </div>
 86     </div>
 87     </div>
 88 </body>
 89 </html>
 90 <script>
 91   let vm=new Vue({
 92       el:‘.contaienr‘,
 93       data:{
 94           users:[
 95               {name:‘tom‘,age:24,email:‘[email protected]},
 96               {name:‘jack‘,age:23,email:‘[email protected]}
 97           ],
 98           user:{},
 99           nowIndex:-1,
100       },
101       methods:{
102           addUser(){
103             this.users.push(this.user)
104             this.user={}
105           },
106           deleteUser(){
107               if(this.nowIndex=-1){
108                   this.users=[];
109               }else{
110                   this.users.splice(this.nowIndex,1); //从指定索引位置开始删除,删除一个
111 
112               }
113           }
114       }
115   })
116 </script>

 

以上是关于2018.7.13vue知识小结的主要内容,如果未能解决你的问题,请参考以下文章

项目:Vue+node+后台管理项目小结

走进webpack-- 小结

Vue学习小结安装依赖与数据来源

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)