Vue学习03-component组件+Axios异步通信+slot插槽

最新推荐文章于 2023-03-05 17:12:38 发布

不可观测的喵呜机

最新推荐文章于 2023-03-05 17:12:38 发布

阅读量284

点赞数

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

本文链接：https://blog.csdn.net/weixin_43971670/article/details/116427279

版权

Vue学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue组件

本文仅仅为本人学习vue的简易笔记，内容不严谨，有瑕疵，请慎重浏览

文章目录

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

<div id="app">
    <!--v-bind:yuyan绑定的是下面组件中的props:[]-->
    <xialakuang v-for="item in items" v-bind:yuyan="item"></xialakuang>

</div>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script type="text/javascript">
    //自定义一个Vue组件component
    Vue.component("xialakuang",{
        //必须用props:[]来接受v-bind绑定的值
        props:['yuyan'],
        //template就是模板
        template:'<ul>{{yuyan}}</ul>'
    });
    var app = new Vue({
        el: "#app",
        data:{
            items:["Java","Python","PHP"]
        }
    });  
</script>

</body>
</html>

实现效果：
在这里插入图片描述

Vue：Axios异步通信

何为Axios？

Axios是一个开源的可以用在浏览器和NodeJS的异步通信框架，它的主要作用就是实现 AJAX异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 node.js 中创建 http 请求
支持 Promise API [JS 中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据

以下为data.json代码：

{
      "age": 20,
      "name": "小米",
      "schoolInfo": [
        {
          "School_name": "清华"
        },
        {
          "School_name": "北大"
        }
      ],
      "url": "https://www.baidu.com/"
}

以下为html代码：

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

<div id="app">
    <div>{{info.age}}</div>
    <div>{{info.name}}</div>
    <!-- 超链接需要用v-bind：href绑定data中的返回的url数据 -->
    <a v-bind:href="info.url">点我跳转</a>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入axios的cdn文件 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data(){
            return{
                //请求返回参数名，必须和json字符串一致
                info:{
                    age: null,
                    name: null,
                    url: null
                }
            }
        },
        mounted(){
            //钩子函数  链式编程  是ES6新特性
            // 这里then()可以简单理解为，在执行完get()后再执行then()中方法
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    });
</script>

</body>
</html>

实现效果:
在这里插入图片描述

slot插槽

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

<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in ItemsList" v-bind:item="item"></todo-items>
    </todo>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script type="text/javascript">
    //slot 插槽
    Vue.component("todo",{
        template: "<div>\n" +
                    "<slot name='todo-title'></slot>"+
                    "    <ul>\n" +
                    "        <slot name='todo-items'></slot>" +
                    "    </ul>\n" +
                  "</div>"
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: "<div>{{title}}</div>"
    });
    Vue.component("todo-items",{
        props: ['item'],
        template: "<li>{{item}}</li>>"
    })

    var vm = new Vue({
        el:'#app',
        data: {
            title: "列表",
            ItemsList: ["Java", "Web", "Python"]
        },
    })
</script>

</body>
</html>