vue2.0基础2

vue基础

• axios
• vue-cli

一、axios

axios 是什么？

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

axios 的基本语法:

使用：
下载
引入

axios 发起get请求

axios({
    method:"GET",
    url:'http://www.baidu.com',
    params:{}
}).then(function(result){
    console.log(result)
})

axios 发起post请求

axios({
    method:"POST",
    url:'http://www.baidu.com',
    data:{
        name:"zys",
        age:29
    }
}).then(function(result){
    console.log(result)
})

【注意】

• 调用 axios 方法请求的返回值是 Promise 对象；
• 如果调用某个方法的返回值是一个Promise实例，前面可以加一个 关键字 await ；

axios结合await和async使用！！！

$('button').click(async function(){
   const res =  await axios({
        method:"GET",
        url:'http://www.baidu.com',
        parmas:{}
    })
    console.log(res.data)
})

解构赋值

• 把解构出来的 data 的值使用冒号重命名给res；

$('button').click(async function(){
   const {data : res} =  await axios({
        method:"GET",
        url:'http://www.baidu.com',
        parmas:{}
    })
    console.log(res.data)
})

最常用的axios请求！！！！！！

//get请求
$('button').click(async function(){
   const {data : res} =  await axios.get('url',{
       params:{id:1}
   })
   console.log(res)
})

//post 请求
$('button').click(async function(){
   const {data : res} =  await axios.post('url',{
      {name:'zys',age:20}
   })
   console.log(res)
})

二、vue-cli

1、vue-cli是什么？

vue-cli 是vue.js开发的标准工具，基于webpack快速构建项目结构的工具；

• 快速构建vue项目
• webpack的基本配置已经自动配置好；

2、如何创建项目？

• 确认node，npm已经安装；
  • node -v; npm -v
• 安装vue-cli
  • npm install -g @vue/cli
  • vue -V 看版本号是否安装成功
• 在你想要创建项目的路径下，输入 cmd,enter进入命令行工具；
• vue create 项目名
• 按照指示，根据项目的依赖按需选择，进行创建；

vue-cli的安装及使用

一、 node 和npm

• 1、在安装vue-cli前，要确认自己的电脑是否安装了node和npm
• 2、查询版本如下（vue脚手架支持node@4.xx以上）
• 能查到版本号就是已经安装成功了

node -v    查询node版本
npm  -v    查询npm版本

二、全局安装vue-cli

1、安装命令
npm install -g vue-cli    // -g是安装到全局
 
2、安装完成后查看是否安装成功

vue -V

三、初始化项目

1、在你想要创建项目的路径下，输入 cmd,enter进入命令行工具；

2、 vue create 项目名

• 按照指示，根据项目的依赖按需选择，进行创建；

3、初始化完成后，会提示开启脚手架的命令，如下

4、cd yyb 为进入项目文件夹，然后npm run dev启动脚手架

5、启动成功，打开http://localhost:8080即可

好，到这步vue-cli的安装和运行就完成了

四、脚手架的目录文件

1、目录介绍
node_modules  项目所需要的依赖
public
 - favicon.ico 图片
 - index.html  项目中的唯一的 html文件

src
  - assets 存放项目的静态资源，比如images，css
  - components  封装的，可复用的组件，存放在这个目录下
  - main.js 是项目的入口文件，整个项目的运行，要先执行 main.js(webpack会先打包main.js)
  - app.vue 是项目的根组件，
babel.config.js
  - 是创建项目时选择的babel等插件配置在单独的文件中；就是这个；

package.json 是项目的包配置文件,只单纯记录本项目的依赖

package-lock.json 会详细的记录项目依赖的版本号及依赖的依赖的版本号

vue项目的运行流程

通过 main.js 把 app.vue 渲染到 指定区域 中 index.html文件中；

//引入 Vue，得到Vue实例
import Vue from 'vue';
//导入 app根组件，为了把根组件渲染到指定区域；
import App from './App.vue'

new Vue({
  //render函数指定把 某个组件app,渲染到指定区域html页面中
  render: h => h(App)
}).$mount('#app')

//等价于
new Vue({
  el:"#app",
  //render函数指定把 某个组件app,渲染到指定区域html页面中
  render: h => h(App)
})

vue中的 $mount 和el:''属性完全一样；