一只编程猪
一只编程猪

iview笔记

iview笔记

1.Layout 布局
Layout标签是布局容器 //Sider标签中必须要有的属性和事件：
//value属性：是需要写v-model来双向绑定数据的

头部
//collapsible属性: 是否可收起，设为false后，默认触发器会隐藏
侧边栏 //collapsed-width属性:是触发器的一个样式
内容 //hide-trigger属性:是隐藏默认触发器，隐藏默认触发器后想使用自己的，写个按钮后改变value值就可以了
底部
//on-collapse事件:展开-收起的回调，返回值是true或false

2.Grid 栅格 //24栅格
//Row一行
//Col标签是中的span属性是：一行分为四块，每块占用6栅格



3.Menu 导航菜单

//Menu标签是盛放导航菜单的容器
//SubMenu标签是导航菜单的父级
//MenuItem标签的导航菜单的子级 

	
      								
     							
Menu标签上的属性：	theme  主题和mode 菜单类型：horizontal水平和vertical垂直
Menu标签中的两个事件: onSelect 监听你选择了哪个menuItem
		    onopenNames 监听的是SubMenu
 SubMenu有个必填项：name
 MenuItem也有一个必填项：name
跳转的最直接关系的属性：  to  有两种写法: 第一种是根据你的路由path决定  带有父级的路由：父级/子级path
	 	                              	第二种是一个对象  是根据你的路由的name值决定的

4.Router 路由

vue-router步骤 带有‘//’ 是后面加上的可以忽略

第一步：
安装vue-router
cnpm install vue-router --save

第二步：

在src中创建router文件夹，然后再router文件夹中创建两个文件
				//index.js ：在里面引入vue-router 然后实例化一个router：Const router = new router(这里面有一个参数，是引入的router文件夹中的另一个文件)
				//router.js：在里面写上所有的router列表
在main.js中导入在src目录下的router文件夹中的index.js文件路径
import router from '@/router'

第三步：
在导入的vue-router路径里找到index.js中再导入vue-router的对象

第四步：
然后再main.js中挂载路由到vue实例，只是挂载
new Vue（{
router， //挂载路由到vue实例，全局就能使用
}）

第五步：
真正创建是在index里，是把当前文件中的router.js文件注册到router对象当中
import Vue from ‘vue’
import Router from ‘vue-router’
import router from ‘./router’

const router = new Router（{
	router
}）；

export default router; 	//然后把router导出

使用router路由的步骤：
第一步：
先写个组件，然后挂载到router.js中

	{
	    path:'/test',   //如果是根路径一定要加/
	    name:'test',
	    meta:{	       //是元数据
	          
	          title：'test',
	          hideInMenu:false,
	    }
	    component :() => import("@/views/test/test.vue"),
	    
	    children:[	//这是子路由
	         {
		path:'test1/：name',	//如果想要传值，就在path上写/：要传递的值 如果要访问这个路径就一定要传值
		name:'test1',	//想要接收传过来的值  使用 {{ $.router.params.name }} 这种方式是用  ”/张三“来传值
		meta:{	       	//想要接收传过来的值  使用 {{ $router.query.username }} 这种方式是用？”username=张三“  来传值	
	          
	                    title：'test1',
	                    hideInMenu:false,
	                }

		 component :() => import("@/views/test/test1.vue"), 	//注意：不要写在meta里
	          }，
	          {
		path:'test2',
		name:'test2',
		meta:{	       //是元数据
	          
	                    title：'test2',
	                    hideInMenu:false,
	                }

		 component :() => import("@/views/test/test2.vue"),	//注意：不要写在meta里
	          }
	     ]			
	},

5.axios 异步请求

axios的实现步骤：
第一步:
删除main.js中的关于axios的所有配置

第二步:
为了测试.我们先暂时关闭postcss.config.js中的跨域

第三步:
在src/config/index.js中配置baseUrl
export const baseURL = process.env.NODE_ENV === “production” ?
‘http://localhost:9001’
:
‘http://www.phonegap100.com/’

第四步:
在main.js中引用config/index.js
import config from ‘@/config’

第五步:
在lib文件夹中创建axios.js文件
这个文件在做什么用?
通过类来创建axios的包装后的实例
包装什么了?
请求拦截,
响应拦截
拼接请求头(config)

第六步:
在lib文件夹中创建index.js文件
这个文件的作用是 把 axios的真正的实例进行导出,
方便其他组件进行引用
import HttpRequest from ‘@/lib/axios’
const axios = new HttpRequest();
export default axios;

第七步:
在src/api文件夹下创建相关业务的文件夹并创建index.js

第八步:
在src/api/xxx/index.js中写入业务的请求方法

第九步:
在相关的vue组件中使用业务的请求方法
1.导入
import {getData} from ‘./api/user’;
2.使用
getData().then(res => {
this.data = res.data.result;
});
思路：
第一步：触发事件，发起请求，配置合并
第二步：拦截请求，如果无异常则通过
第三步：后台响应，响应拦截，最后返回数据包

6.Card 卡片
//隐藏边框