这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天

计算属性

是指通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值，可以被模板结构或method使用

语法格式：所有的计算属性都要放到computed中去。计算属性要定义成方法格式

computed:{
    //rgb作为欸一个计算属性，被定义成了方法格式
    rgb(){
    return `$rgb{this.r},${this.g},${this.b}`
    }
}

特点：

a.定义的时候定义为方法   

b.使用时当属性

好处：

a.实现了代码的服用   

b.只要计算属性中以来的数据源变化了，则计算属性会自动重新求值

axios使用

axios是一个专注于网络请求的库

语法：

axios传递参数方式

axios（{
parames:()//URL中的查询参数，GET
data：（）//请求体参数，POST
）}

加上await，这样就是一个结果值，而不是promise实例

因为axios在拿到数据的时候套了一层壳，所以我们需要解构赋值，解构出data属性，重命名为res

axios.get,axios.post

vue-cli

单页面应用程序（SPA）

指的是一个web网站只有唯一一个HTML网页，所有的功能与交互都在这唯一的一个页面内完成

vue-cli

简化了程序员基于webpack创建工程话的Vue项目的过程

安装： npm install -g @vue/cli 查询：vue -v

快速生成工程化的Vue项目——vue create 项目名称

选择最后一项：手动选择要安装哪些功能

Bable：解决兼容性；CSS Pre-processors：css预处理器

就是把安装的插件配置文件放到独立文件

若不小心在框里选中，导致其停滞不动解决：ctrl+c

local：本机访问地址；Network：局域网访问地址

注意访问网址时，不能关闭终端窗口，否则会无法访问

vue项目中src构成

vue项目运行流程

通过把main.js把App.vue渲染到index.html的指定位置

例如：

vue部分（test）：
<template>
<div> <h3>test<h3></div>
</template>
 
main.js部分
import Testfrom './test.vue'
new Vue({
el:'#Test'
//把render函数指定的组件，渲染到HTML页面中
render:h=>h(Test)
})
main.js的方式二
new Vue({
render:h=>h(Test)
}).$mount('#app')//就是替换掉原来app的部分，就相当于原来el指定范围