【Vue】二、Vue组件以及axios入门

最新推荐文章于 2023-04-09 15:42:08 发布

Zangjiji

最新推荐文章于 2023-04-09 15:42:08 发布

阅读量174

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Zangjiji/article/details/109163079

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【Vue】二、Vue组件以及axios入门

1、组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。

就比如说下面这张图可以抽象成

图的整体是一个小方框，每一个小框又是一个新的方框，其可以重复使用。

demo：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!--拿message，有点像el表达式-->
<div id="dirty">
<!--    和jj进行绑定-->
    <zhangjunjie></zhangjunjie>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>
//定义一个叫zhangjunjie的组件
    Vue.component("zhangjunjie",{
        //里面的模板是一个li标签
            template: '<li>你好！！</li>\n'
        }
    );

    var dirty = new Vue({
        // 拿到id为dirty的对象
        el : '#dirty',
            data:{
                jj : ""
            },


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

可以的!

如果我想加入一些参数，让其动态取值又该咋办呢？

我们先将定义的component中加入props标签

 Vue.component("zhangjunjie",{
 			//相当于给组件定义了一个叫canshu的属性
            props:['canshu'],
			//输出参数即可
            template: '<li>{{canshu}}</li>\n'
        }
    );

之后我们将zhangjunjie标签修改一下

<div id="dirty">
<!--    循环遍历jj中的值，然后将item的值绑定给canshu那个属性-->
    <zhangjunjie v-for="item in jj" v-bind:canshu="item"></zhangjunjie>
</div>

完整代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!--拿message，有点像el表达式-->
<div id="dirty">
<!--    循环遍历jj中的值，然后-->
    <zhangjunjie v-for="item in jj" v-bind:canshu="item"></zhangjunjie>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>


<script>
    Vue.component("zhangjunjie",{
            props:['canshu'],
            template: '<li>{{canshu}}</li>\n'
        }
    );

    var dirty = new Vue({

        // 拿到id为dirty的对象
        el : '#dirty',
        //定义一个jj数组
            data:{
                jj : ["jj","lily","mvp"]
            },


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

最后输出完全ok！

2、Axios异步通信

什么是axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

在vue中，我们可以使用axios发送请求（当然ajax也可以！）

使用axios 我们首先现在项目中导入一个axios的cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在说axios之前，我们首先要先了解一下vue的生命周期

Vue 实例生命周期

Vue主要有如下几个周期

beforeCreate
created
beforeMount
mounted
- beforeUpdate
- updated
beforeDestroy
destroyed

具体大家可以去

https://segmentfault.com/a/1190000011381906

看看，这里不说嘞

我们这里是要通过mounted这块来完成数据的渲染，所以要使用mounted函数

这里首先我们先伪造一个json数据

{
  "age" : 18,
  "name": "zjj",
  "hobbys": ["睡觉","吃饭"],
  "Igot": {
    "name": "zhh",
    "cur": "aas"
  }

}

然后通过axios的get方法来获取json中的相关值，这里get请求模板如下：

axios.get('链接')
  .then(function (response) {
   //拿到之后所干的事儿
  })

这里我们在mounted函数中写一下get请求

 mounted(){//钩子函数
            axios.get('./hello.json').then(console.log(responce.data))
        }

运行发现完全ok！

那我们如何将获取到的值渲染到页面上？

首先我们要在vue对象中使用data()方法接收返回值，这里我们定义返回值为info

data(){
    return{
        info:{
        "age" : null,
        "name": null,
        "hobbys": [null,null],
        "Igot": {
        "name": null,
            "cur": null

    }
        }
    }
},

这里的info要与json中的数据格式相同，具体内容为null就行。

然后我们修改一下axios中get的代码，使responce中的值传入到info中

            axios.get('./hello.json').then(responce=>(this.info = responce.data))

我们试着拿一下

<div id="dirty" >
   <div>{{info.age}}</div>
    <div>{{info.name}}</div>

    <div>{{info.hobbys}}</div>
    <div>{{info.Igot}}</div>


</div>

可！

axios的其他信息大家可以参照axios的官方文档查阅，这里就不多赘述了！

Zangjiji

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue】二、Vue组件以及axios入门

【Vue】二、Vue组件以及axios入门1、组件化应用构建组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树。就比如说下面这张图可以抽象成图的整体是一个小方框，每一个小框又是一个新的方框，其可以重复使用。demo：<!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
复制链接

扫一扫