Vue架构下JS使用笔记

一、前言

之前学过一点js、vue、react，正式使用还是最近的工作内容
前端核心在我理解主要是h5+js的开发编写，nmp、node.js 这些了解太少，涉及太浅就不去扯淡了

二、开始使用

1、h5主要依赖于众多组件：Element、Bootstrap、EasyUi

均有一些使用经验，初学最开始使用过Bootstrap，简单上手方便，但是太丑了，看到EasyUI很好看，但是bug一大堆，后来使用Element是折中选择

组件获取莫过于npm安装和<script> 导入js，看个人选择

组件的使用直接看官方文档之类的更方便https://element.eleme.cn/#/zh-CN/component/installation

前端页面万变不离其宗，先布局-组件选择-组件填充-假数据编写-假数据填充-接口请求-真实数据填充

2、JS页面逻辑编写

2.1 先看js的总体代码简单结构

let app = new Vue({
    el: '#app',
    data: {},
    methods: {},
    mounted: {},
    created: {},
    watch: {},
    computed: {}
});

data 不用多说，数据集，两种json数据格式 {} 对象和 []数组，该页面的全局变量
methods 方法体集，声明各种各样的方法，发送请求，更新修改数据，控制组件等等
created 和 mounted 初始化执行，但created 更保险，在html组件加载前执行
watch 监听器，某个值变化触发，用处不大，但有用
computed 计算，没用过

2.2 编写逻辑

1、data 中初始化一些数据，created 初始化一些方法并更新一些data中的数据，这就构成页面显示默认数据

2、html 显示默认数据，比如下拉框、多选项等字典，或者这个组件一开始是否展示，完成初步数据显示

3、执行页面操作各种按钮、下拉框、输出框等触发事件，调用函数

4、函数或执行请求，或计算数据，或控制组件，或展示、隐藏数据

5、回显数据

三、axios 发送请求

官网地址：http://www.axios-js.com/zh-cn/docs/

1、GET请求

axios.get('/user',{
    params:{
        name:name,
        pass:pass
    }
})
.then(function (response) {//响应成功后
    
}.catch(function (error) { // 请求失败处理
    console.log(error);
});

2、POST请求

axios({
    method: 'post',
    url: '/dmppackage/toutiao/pushDmpPackage',
    data: {
        user: user,
        pass: pass
    }
})
.then(function (response) {//响应成功后
    
}.catch(function (error) { // 请求失败处理
    console.log(error);
});