key值的基本使用
有时候标签长得太像,vue也不一定能识别
用法:
<div key="1"></div> // 这里的key也可用于属性绑定,兄弟标签间,最好独一无二的值(常结合for一起使用,用于for循环里面的索引值传递给key,以达到for的每一次都是独一无二),如: <div v-for="(item,index) in list" :key="index"></div>
功能:当我们写的一些html标签相似度太高时,vue识别的时候是有可能 识别不出来 的,加上key相当于加了个编号 ,让vue更准确的识别出来,不至于我们在进行一些值修改什么的时候出错。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <button @click="isShow=!isShow">点我切换</button> <!-- 不加key值前,在input框输入值了切换,vue是识别不出来的 加入key值,给标签加了一个身份,这时它就能识别了 --> <div v-if="isShow"> <!-- <div v-if="isShow" key="1"> --> <p>用户名</p> <input type="text" placeholder="请输入姓名"> </div> <div v-else> <p>密码</p> <input type="text" placeholder="请输入密码"> </div> </div> <script src="./vue.js"></script> <script> new Vue({ el: "#app", data: { isShow: true }, methods: { } }) </script> </body> </html>
axios基本介绍
为什么用axios?
-
原生的ajax过于麻烦,调用不方便。
-
jquery相比ajax过于宠大,我们有时候公公只需要一个网络接口请求功能。
-
axios只做接口请求,体积较小,网络加载会快些,而且功能还挺丰富如(请求拦截,数据 返回拦截等)
axios之config配制模式使用
//axios(config)模式 axios({ method: '请求方法如:post.get', url: '请求接口路径', //post需要传递的参数 data: { xxx: 'oooo' }, //设置请求头:multipart/form-data或者application/x-www-form-urlencoded //get接口地址上需要传递的参数 params: { ID: 12345 } }).then(response=>{console.log("成功的处理");}) .catch(error=>{console.log("错误的处理");});
vue生命周期之beforeCreate、==created==、beforeMounte 、==mounted==、beforeUpdate 、updated
-
beforeCreate (创建前): 不能访问data和methods , 能创建data和methods,
在当前 vue实例生命周期,只会执行一次
-
created (创建后): 能访问data与methods 不能访问vue渲染的dom,
在当前 vue实例生命周期,只会执行一次
-
beforeMounte (渲染前): 不能访问dom,装备渲染,还没渲染完成
-
mounted (渲染后): 完成了dom渲染 第一个能访问dom的生命周期
-
beforeUpdate (更新前): 数据已更新,但是页面还没完成渲染
-
updated(更新后): 数据已更新,且页面已完成渲染
计算属性computed
对data中数据进行二次加工,同时不改变data中的数据,且改变data数据能实时地响应的改变
用法:
//计算属性都是写在vue中的computed对象下面的 // 计算属性实质是一个函数 ,它的值就是它return的结果 // 我们可以直接当属性去使用它 所以使用时就是:计算属性名字, computed: { 计算属性名字() { return 需要返回的结果,这里也是计算属性的值 } }
作用:对data中数据进行二次加工,同时会实时的响应data中数据变化 ,data中数据变了,它立马会改变,同时不改变data中的数据,自己得到的结果 也会缓存 起来当属性使用。
计算属性实质就是一个函数 ,只不过函数return什么,它的结果 就是什么,它可以直接当一个属性去使用
计算属性基本使用demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <p>{{msg}}</p> <p>{{msg.split("").reverse().join("")+"."}}</p> <br> <br> <br> <br> <p>{{msg.split("").reverse().join("")+"."}}</p> <br> <br> <br> <p>{{msg.split("").reverse().join("")+"."}}</p> <h3>{{formatMsg.length}}</h3> <h3>{{formatMsg}}</h3> <h3>{{formatMsg}}</h3> <h3>{{formatMsg}}</h3> <h3>{{formatMsg}}</h3> </div> <script src="./vue.js"></script> <script src="./axios.js"></script> <script> new Vue({ el: "#app", data: { msg: "abcde" }, computed: { // 计算属性实质是不是一个函数 ,它的值就是它return的结果 // 因为我们可以直接当属性去使用它,它一定要放在computed formatMsg() { return this.msg.split("").reverse().join("") + 123 } }, methods: { } }) </script> </body> </html>