Vue

Posted 2021-06-26 默辨

tags:

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

文章目录

1、基本指令测试案例
2、Axios
- - 2.1、Axios处理并发请求
3、Vue的生命周期

该篇博文根据B站UP主编程不良人的课程——【编程不良人】2021最新Vue全家桶系列教程整理而出

本文是对之前学习过的Vue知识点的一个复习和补充

1、基本指令测试案例

1.1、入门案例

1）不同选择器测试

案例一：分别使用id选择器和类选择器进行测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{msg}}
</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: "#app", //指定vue实例作用的范围
    data: {
        msg: "hello mobian"
    }
});
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="bpp">
    {{msg}}
</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: ".bpp",
    data: {
        msg: "hello mobian"
    }
});
</script>

注意事项：

作用要素建议放在body内部，而不要放在在body上。即不要将el指向<body>标签和<html>标签
页面解析顺序为由上到下，所以Vue获取相关要素时，相关要素已经要已经加载。即可以把Vue语法放在页面的最后
Vue内部各个元素之间使用逗号隔开
在定义选择器样式时，可以使用任意的CSS选择器，比如类选择器、id选择器。但更推荐使用id选择器

2）测试运算

案例二：对获取数据进行相关的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--算术运算-->
    {{msg + "123"}} <p></p>

    <!--逻辑运算-->
    {{msg == "123"}} <p></p>

    <!--调用js方法-->
    {{msg.toUpperCase()}} <p></p>

    {{ age+1 }} <p></p>
    {{ age == 24 }} <p></p>
    {{ age == '24' }} <p></p>
    {{ age == "24" }} <p></p>


</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: "#app",
    data: {
        msg: "hello mobian",
        age: 24
    }
});
</script>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6CfVT5p7-1623142505120)(Vue（二）.assets/image-20210405103240978.png)]

1.2、v-text和v-html

v-text：用来获取data中的数据将数据以文本的形式渲染到指定的标签内部，类似于javascript中的innerText

v-html：用来获取data中数据将数据重包含的html标签先解析在渲染到指定标签的内部，类似于JavaScript中的innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <h2>{{msg}}+'这里有msg'</h2>
    <h2 v-text="msg">这里有msg</h2>
    <h2 v-html="msg">这里有msg</h2>
</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: "#app",
    data: {
        msg: "hello mobian<a href='http://www.baidu.com'>点我</a>"
    }
});
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nC541jfC-1623142505124)(Vue（二）.assets/image-20210405114509797.png)]

结论：

使用v-text渲染数据会直接覆盖标签里面的内容
使用v-html渲染数据会解析msg里面的html标签
使用v-text可以避免插值闪烁。即数据会渲染时，不会由{{msg}}状态变为具体内容，而是由空白直接渲染出来。

1.3、v-on事件绑定

js事件三要素：

事件源：事件的源头，一般指html标签
事件：如onclick（单击）、dbclick（双击）、onkeyup（键盘抬起）、mouseenter（鼠标移入）、mouseleave（鼠标移出）…
事件处理程序：事件处理函数 function(){}

定义一个按钮，每次点击后，显示的数字＋5

这里的函数定义方式和单击事件的定义方式为ES6的语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <h2>{{ age }}</h2>
    <input type="button" value="点我" @click="addAge(5)" />

</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        age : 23,
        fatherOld : 50,
    },
    methods: {
        addAge(number){
            this.age = this.age + number;
        }
    }
})
</script>

1.4、v-show和v-if

两个标签都是用来控制页面中的标签是否展示或隐藏，使用示例 v-if= “true”，当然我们也可以使用Vue中data的变量来控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <h2 v-if="isShow">默辨</h2>
    <h2 v-show="isShow">默辨2</h2>
</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: '#app',
    data: {
        isShow:true
    },
    methods: {}
})

</script>

同样是隐藏，但是两者隐藏的方式是不一样的：

v-if：底层是通过控制dom元素实现，即这个隐藏是在dom树上删除该节点
v-show：底层是通过CSS样式实现的，即这个隐藏是样式的隐藏，元素节点还在dom树上。数据量大时推荐使用该标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-emFjhnnB-1623142505126)(Vue（二）.assets/image-20210409095219953.png)]

1.5、v-for

遍历获取数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h3>遍历对象</h3>
    <h5 v-for="(value, key ,index) in student">
        {{ value}}
        {{ key}}
        {{ index}}
    </h5>

    <h3>遍历数组</h3>
    <h5 v-for="(value, index) in place">
        {{ value}}
        {{ index+1}}
    </h5>

    <h3>遍历数组中的对象</h3>
    <!--为了利于Vue进行标签的区分，所以此处绑定一个key标签，该标签对于结果没有影响-->
    <h5 v-for="(value, index) in people" :key="value.id">
        {{ index}} {{value.name}} {{value.age}} {{value.hobby}}
    </h5>
</div>
</body>
</html>
<script src="../vue/vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        msg: "hello mobian",
        student: {name: "mobian", age: 12, class: 17},
        place: ["深圳", "北京", "成都", "重庆", "杭州"],
        people: [{
            id:"1",
            name: "mobian",
            age: 21,
            hobby: "跑步"
        }, {
            id:"2",
            name: "zhangsan",
            age: 11,
            hobby: "跳远"
        }, {
            id:"3",
            name: "wangwu",
            age: 21,
            hobby: "踢足球"
        }],
    },
})
</script>

测试结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S7A3NEci-1623142505127)(Vue（二）.assets/image-20210410102308459.png)]

注意事项：以下说明来源Vue官网

即我们在使用v-for遍历获取对象内容时，尽可能的为我们的value绑定一个唯一的key，且类型为数字或字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jiOTH7uP-1623142505128)(Vue（二）.assets/image-20210410103121877.png)]

1.6、v-model

用来绑定form表单标签中的value属性，然后交给vue实例进行管理，常作用的标签input、select、checkbox、button…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{ msg }}</h2>
    <input type="text" v-model="msg"/>

</div>
</body>

</html>
<script src="../vue/vue.js"></script>
<script>

new Vue({
    el: '#app',
    data: {
        msg: "hello mobian",
    },
    methods: {}
})

</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-expV3D4J-1623142505130)(Vue（二）.assets/image-20210410103918188.png)]

当我们修改输入框中的值，直接会影响到Vue的data中的msg值。

曾经我们修改一个form表单中的数据的过程：

查询对应的数据，渲染到界面
修改对应的值
获取对应元素节点的内容值
将获取到的值，传递到后端，完成修改

现在使用Vue修改form表单中的数据过程：

查询对应的数据，渲染到界面
修改对应的值（由于Vue的双向绑定机制，我们这里表面上除了修改的前端视图的值，还修改了Vue的data中的数据）
直接将data中的数据传递给后端

1.7、综合小案例——实现备忘录

该测试案例，结合了v-for、v-show、v-on事件、v-model等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>备忘录功能实现</h2>
    请输入备忘录内容<input type="text" v-model="context" value=""/> <input type="button" @click="addItems" value="添加到备忘录"/>

    <!--备忘录信息为空时，显示空提示-->
    <h4 v-show="items.length == 0">当前备忘录没有信息</h4>
    <li v-for="item ,index in items" :key="">{{index+1}}.{{ item }}
        <a href="javascript:;" v-on:click="deleteItems(index)">删除</a>
    </li>

    <h2>当前备忘录中共：{{ items.length}}条</h2>

    <input typeVSCode自定义代码片段(vue主模板)
 VSCode自定义代码片段11——vue路由的配置
 VSCode自定义代码片段11——vue路由的配置
 VSCode自定义代码片段11——vue路由的配置
 VSCode自定义代码片段2——.vue文件的模板
 VSCode自定义代码片段13——Vue的状态大管家