vue中实际使用

最新推荐文章于 2022-04-06 00:25:27 发布

嘻嘻哈哈-fang

最新推荐文章于 2022-04-06 00:25:27 发布

阅读量124

点赞数

文章标签： key值的基本使用 axios基本介绍 vue生命周期计算属性computed

本文链接：https://blog.csdn.net/ff186345/article/details/103680215

版权

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>

嘻嘻哈哈-fang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中实际使用

key值的基本使用有时候标签长得太像，vue也不一定能识别用法： <div key="1"></div> // 这里的key也可用于属性绑定，兄弟标签间，最好独一无二的值(常结合for一起使用，用于for循环里面的索引值传递给key,以达到for的每一次都是独一无二)，如: <div v-for="(item,index) in list...
复制链接

扫一扫