vue学习记录
Posted pengc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="(v,k) in arr2" :key="k">{{v}}</li>
<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>×</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:\'110@110.com\'}, {name:\'樱桃小丸子\',age:\'3\',email:\'120@120.com\'} ], 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"VSCode自定义代码片段1——vue主模板