vue学习笔记——组件、Axios异步通信、计算属性

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

ChienAAAy

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

阅读量224

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_29384339/article/details/107757496

版权

组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--组件：传递给组件中的值：props-->
    <chien v-for="item in items" v-bind:qc="item"></chien>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    /*定义一个Vue组件component*/
    Vue.component("chien",{
        props:['qc'],
        /*prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
          父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：*/
        template:'<h2>{{qc}}</h2>'
    })


    var vm = new Vue({
        el:"#app",
        data:{
            items:["Java","Linux","前端"]
        }
    })
</script>
</html>

Axios异步通信

有很多时候构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种，而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{info.name}}</h2>
    <h2>{{info.address.country}}</h2>
    <a v-bind:href="info.url">chienblog</a>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data(){//date函数
           return{
               info:{}
           }
        },
        mounted(){//钩子函数，链式编程，ES6新特性
            axios.get('data.json').then(response=>(this.info=response.data))
             }
    })
</script>
</html>

计算属性

计算属性关键词: computed。
这个属性具有计算的能力（这里的计算就是个函数），它就是一个能够将计算结果缓存起来的属性（将行为转换成静态的属性），可以想象为缓存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{currentTime}}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"hello vue"
        },
        computed:{
            currentTime:function () {
                this.message;
                return Date.now();//返回一个时间戳
                //当message内容改变时，重新执行方法
            }
        }
    })
</script>
</html>