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

组件

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

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

{{qc}}

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

Axios异步通信

有很多时候构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。
vue学习笔记——组件、Axios异步通信、计算属性_第1张图片


<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <h2>{{info.name}}h2>
    <h2>{{info.address.country}}h2>
    <a v-bind:href="info.url">chienbloga>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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。
这个属性具有计算的能力(这里的计算就是个函数),它就是一个能够将计算结果缓存起来的属性(将行为转换成静态的属性),可以想象为缓存。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="app">
    <h2>{{currentTime}}h2>
div>
body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

vue学习笔记——组件、Axios异步通信、计算属性_第2张图片
调用方法时,每次都需要进行计算,既然有计算过程必定产生系统开销,那如果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不常变化的的计算结果进行缓存,以节约系统开销。

你可能感兴趣的:(vue学习笔记——组件、Axios异步通信、计算属性)