vue学习记录

vue中常用的指令
v-model
双向数据绑定，一般用于表单元素

v-for
对数组或对象进行循环操作，使用的是v-for

<li v-for="value in arr">{{value}}</li>

<li v-for="(v,k) in arr">{{k}}={{v}}</li>

<!-- 可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，变化的替换，不变的不替换

官方解释：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

-->

<li v-for="(user,index) in users">
{{index+1}},{{user.id}},{{user.name}},{{user.age}}
</li>

v-on
用来绑定事件，用法：v-on:事件="函数" v-on:click="" 简写方式 @click="" vue方法里的this表示当前vue实例 vue方法访问vue方法或数据都要用this,不能直接访问

v-show/v-if
用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建

指令能直接访问vue实例中的数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="">
</head>
<body>

    <div id="app">
        <button @click="flag=!flag">显示或隐藏</button>

        <div style="width: 100px;height: 100px;background: red;" v-if="flag"></div>
    </div>


    <script type="text/javascript">
        window.onload=function(){
            new Vue({
                el:"#app",
                data:{
                    flag:false
                }
            });
        }
    </script>

</body>
</html>

用户管理例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <script src="bootstrap/jquery.min.js"></script>
    <script src="bootstrap/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="text-center">添加用户</h2>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="userName" class="control-label col-lg-2 col-md-offset-2">姓名：</label>
                <div class="col-md-6">
                    <input type="text" id="userName" class="form-control" v-model="user.name" placeholder="请输入姓名"></input>
                </div>
            </div>
            <div class="form-group">
                <label for="userAge" class="control-label col-lg-2 col-md-offset-2">年龄：</label>
                <div class="col-md-6">
                    <input type="text" id="userAge" class="form-control" v-model="user.age" placeholder="请输入年龄"></input>
                </div>
            </div>
            <div class="form-group">
                <label for="userEmail" class="control-label col-lg-2 col-md-offset-2">邮箱：</label>
                <div class="col-md-6">
                    <input type="text" id="userEmail" class="form-control" v-model="user.email" placeholder="请输入邮箱"></input>
                </div>
            </div>
             <div class="form-group text-center">
                <input type="button" value="添加" class="btn btn-primary" @click="addUser">
                <input type="reset" value="重置" class="btn btn-primary">
             </div>
        </form><!-- form-horizontal -->

        <hr>
        <table class="table table-bordered table-hover" >
            <caption class="h3 text-center text-info"> 用户列表</caption>
            <thead>
                <tr >
                    <th class="text-center">序号</th>
                    <th class="text-center">姓名</th>
                    <th class="text-center">年龄</th>
                    <th class="text-center">邮箱</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user,index) in users" class="text-center">
                    <td >{{index+1}} </td>
                    <td >{{user.name}} </td>
                    <td >{{user.age}} </td>
                    <td >{{user.email}} </td>
                    <td > <button class="btn btn-danger btn-sm"  data-toggle="modal" data-target="#del" @click="nowIndex=index">删除</button> </td>
                </tr>
                <tr >
                    <td colspan="5" class="text-right"> <button class="btn btn-danger " data-toggle="modal" data-target="#del"  @click="nowIndex=-1">删除所有</button></td>
                </tr>
            </tbody>
        </table>
        <!-- 模态框，弹出框 -->
        <div class="modal fade" id="del">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
                       <button class="close" data-dismiss="modal"> 
                           <span>&times;</span>
                       </button>
                       <div class="modat-titile" v-show="nowIndex!==-1">确定要删除{{users[nowIndex]?users[nowIndex].name:''}}吗？</div>
                       <div class="modat-titile" v-show="nowIndex===-1">确定要删除所有用户吗？</div>
                     </div>
                     <div class="modal-body text-center">
                         <button class="btn btn-primary" data-dismiss="modal">取消</button>
                         <button class="btn btn-primary" data-dismiss="modal" @click="deletUser">确定</button>
                     </div>
                 </div>
             </div>
        </div>
    </div>
     



    <script type="text/javascript">
        new Vue({
            el:".container",
            data:{
                users:[
                  {name:'蜡笔小新',age:'5',email:'[email protected]'},
                  {name:'樱桃小丸子',age:'3',email:'[email protected]'}
                ],
                user:{},
                nowIndex:-1
            },
            methods:{
                addUser:function(){
                   this.users.push(this.user);
                   this.user={};
                },

                deletUser:function(){
                    if (this.nowIndex===-1) {
                        this.users=[];
                    }else{
                        this.users.splice(this.nowIndex,1);
                    }
                    
                }

            }
        }); 
    </script>
</body>
</html>

{{msg}}

//配置是否允许vue-devtools检查代码，方便调试，默认为true，生产环境中需要设置为false
Vue.config.devtools=false;

//阻止vue启动时生成生产消息(提示消息)
Vue.config.productionTip=false;

事件对象$event

包含事件相关信息，如事件源、事件类型、偏移量
target、type、offsetx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件简写和事件对象$event</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="print($event)" >点我</button>
    </div>


    <script type="text/javascript">
        new Vue({
            el:"#app",
            methods:{
                print:function(e){
                   console.log(e.target.innerHTML); //点我
                }
            }

        });
    </script>
</body>
</html>

阻止事件冒泡：
a)原生js方式，依赖于事件对象 e.stopPropagation();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和默认行为</title>
    <script src="js/vue.js"></script>
</head>
<body>
     <div class="app">
          <div @click="show3()">
              <p @click="show2()">
                  <button @click="show1($event)">点我</button>
              </p>
          </div>
     </div>

     <script type="text/javascript">
         new Vue({
             el:".app",
             methods:{
                show1:function(e){
                      e.stopPropagation();
                  console.log("11111");
                },
                show2:function(){
                  console.log("22222");
                },
                show3:function(){
                  console.log("33333");
                },
             }
         });
     </script>

</body>
</html>

b)vue方式，不依赖于事件对象e.preventDefault();
@click.stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和默认行为</title>
    <script src="js/vue.js"></script>
</head>
<body>
     <div class="app">
          <div @click="show3()">
              <p @click="show2()">
                  <button @click.stop="show1()">点我</button>
              </p>
          </div>
     </div>

     <script type="text/javascript">
         new Vue({
             el:".app",
             methods:{
                show1:function(){
                      
                  console.log("11111");
                },
                show2:function(){
                  console.log("22222");
                },
                show3:function(){
                  console.log("33333");
                },
             }
         });
     </script>

</body>
</html>

阻止默认行为：
a)原生js方式，依赖于事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和默认行为</title>
    <script src="js/vue.js"></script>
</head>
<body>
     <div class="app">
         <a href="https://www.baidu.com" title="" @click="change($event)">默认跳转到百度</a>
     </div>

     <script type="text/javascript">
         new Vue({
             el:".app",
             methods:{
               change:function(e){
                  e.preventDefault();
               }
             }
         });
     </script>

</body>
</html>

vue方式 @click.prevent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和默认行为</title>
    <script src="js/vue.js"></script>
</head>
<body>
     <div class="app">
         <a href="https://www.baidu.com" title="" @click.prevent="change()">默认跳转到百度</a>
     </div>

     <script type="text/javascript">
         new Vue({
             el:".app",
             methods:{
               change:function(){
                 console.log('不跳转');
               }
             }
         });
     </script>

</body>
</html>

键盘事件

原生js 按键的判断（回车）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div class="app">
        <input type="text" @keydown="show($event)">
    </div>

    <script type="text/javascript">
        new Vue({
            el:".app",
            methods:{
               show:function(e){
                  if(e.keyCode==13){
                      console.log('你按了回车键');
                  }
               }
            }
        });
    </script>
</body>
</html>

vue方式按键的判断（回车）简化按键的判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div class="app">
        <input type="text" @keydown.13="show()">
    </div>

    <script type="text/javascript">
        new Vue({
            el:".app",
            methods:{
               show:function(){
                  
                      console.log('你按了回车键');
                  
               }
            }
        });
    </script>
</body>
</html>

回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up

默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div class="app">
        <input type="text" @keydown.a="show()">
        <input type="text" @keydown.f1.prevent="show1()">
    </div>
    <script type="text/javascript">
       Vue.config.keyCodes={
            a:65,
            f1:112
        }

        new Vue({
            el:".app",
            methods:{
               show:function(){
                  
                      console.log('你按了a键');
                  
               },
               show1:function(){
                  
                      console.log('你按了f1键');
                  
               }
            }
        });
    </script>
</body>
</html>

事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

input的修饰符

v-model.lazy.number.trim

属性绑定和属性的简写
v-bind 用于属性绑定， v-bind:属性=""

属性的简写：
v-bind:src="" 简写为 :src=""

猜你喜欢