从零开肝Vue2.0(day05)

1. 使用axios 和 json-server 模拟前端与后端的数据交互
   首先，在电脑上安装json-server 并在项目中导入axios
   json-server 的安装：

   npm install -g  json-server 
   

   在项目中导入axios (要在你的项目路径下使用该命令)

   npm i axios
   

   准备一个使用的json文件，模拟后台数据
   如：创建一个db.json文件，里面内容如下
   {
   “students”: [
   {
   “id”: “1”,
   “name”: “李利”,
   “age”: 21,
   “sex”: “女”,
   “deptId”: “2”
   },
   {
   “id”: “2”,
   “name”: “汪峰”,
   “age”: 22,
   “sex”: “男”,
   “deptId”: “1”
   },
   {
   “id”: “3”,
   “name”: “陈依”,
   “age”: 23,
   “sex”: “女”,
   “deptId”: “2”
   },
   {
   “id”: “4”,
   “name”: “章涛”,
   “age”: 23,
   “sex”: “男”,
   “deptId”: “1”
   }
   ]
   }
   在该文件目录下使用命令 json-server -w db.json
   如下所示
   
   之后就可以使用axios来获取数据了

例：使用get方法来获取数据

		<script>
		    axios.get('上方获取的地址').then(
	        response =>{
	        //成功的话，在控制台打印成功并输出获得的json数据
	          console.log('请求成功',response.data) 
	        },
	        error =>{
	        //错误的话，在控制带打印错误的原因
	          console.log('请求失败',error.message)
	        }
     )
		</script>

可以将以上代码放到一个方法或生命周期函数中来调用，得到结果如下

2. 插槽
   默认插槽的使用：

   父组件：<App/>
   子组件 <Test/>
   首先，在父组件中引用子组件
   	<div>
   		<Test>
   			//在这里添加插入的标签等，如：插入图片
   			<img ..........>
   		</Test>
   	</div>
   在子组件中，使用 <slot></slot> 来接受父组件中插入的东西 如：
   	<div>
   	<slot></slot>
   	</div>
   	最后的渲染效果位置会随着solt的改变而改变
   

   具名插槽的使用：（当有多个solt的时候）

   在上面代码的基础上 
   	直接给每个使用的slot起个名字，如下
   	<slot name="test"></slot>
   	再将 要插入的标签等，匹配到对应的slot名字，如下：
   	<img slot="test" ......... >
   	这样就可以使用多个slot，不同的slot名字可以对应不同的插入内容
   

   作用域插槽 ：(当数据在子组件而需要在父组件中获取时，可以使用作用域插槽)

   在上面的代码基础上 
   首先，使用slot标签在子组件中来绑定父组件需要的数据，如下
      <slot :test="num"></slot> 绑定子组件中的num
    在父组件中接收值
         <template scope="test">
           <h2>
             {{test}}
           </h2>
         </template>  
    使用template中的scope属性来接受传来的值，并为传来的值取名为test，这个名字可以自行定义
    这里使用的是默认slot来实现数据的传输，如果有多个slot可为其加上name。