14_vue_component v1.0.0

1.单文件组件 1.三个部分组成 1.template 只能存在一个根元素 2.script 3.style scoped: 样式只在当前组件内生效 2.子父级组件交互（通信） 父->子: props 数据传递类型限制（验证） 数据类型验证 多数据类型验证 必选项 默认值 obj、arr数据类型的默认值（返回Object） 子->父: emit Event 3.插槽 单个插槽 具名插槽 作用域插槽（子传父） 注意：在2.5.0之前,必须使用在template上 4.动态组件 keep-alive 2.css过度与动画 在CSS 过渡和动画中自动应用 过渡类名 v-enter：进入开始 v-enter-active；执行过程中 v-enter-to：结束动画 v-leave：离开开始 v-leave-active：离开过程 v-leave-to：离开结束 class可以配合使用第三方css动画库，如Animate.css

3.自定义指令 全局指令 Vue.directive('focus',{ inserted: function(el){ el.focus(); } }) 局部指令 directives:{ focus:{ inserted: function(el){ el.focus(); } } } Axios 1.安装 npm install axios 2.引入加载 import Axios from 'axios' Vue.prototype.$axios = Axios 3.请求 get请求： this.$axios("http://localhost:8080/static/mock/data.json",{ params:{ type:"junshi" } }).then(res=>{ console.log(res) }).catch(error=>{ console.log(error) }) psot请求： form-data: ?userId=admin&password=123 x-www-from-urlencoded:{userId: "admin",password: 123} 注意：axios接受的post请求的格式是from-data格式 this.$axios.post("http://localhost:8080/login", qs.stringify({ user_id:"admin", password: 123 })).then(res=>{ console.log(res) }).catch(error=>{ console.log(error) }) 4.全局的axios默认值 Axios.defaults.baseURL = 'http://localhost:8080'; Axios.defaults.headers.common'Authorization' = AUTH_TOKEN; Axios.defaults.headers.post'Content-Type' = 'application/x-www-form-urlencoded'; 5.拦截器 在请求then或catch处理前拦截它们

6.跨域处理 
	1.修改config中的 index.js
		proxyTable: {
	        "/api": {
	            target: "http://localhost:8080",
	            changeOrigin: true,
	            pathRewrite: {
	                '^/api': ''
	            }
	        }
	    },
	2. mian.js 中添加HOST
		Vue.prototype.HOST = '/api'
	3.使用
		this.$axios.pos  t( this.HOST + "/login",
					      {
					        userId: 'admin',
					        password: '123456'
					      }
					      ).then(res=>{
					      console.log(res)
					    }).catch(error=>{
					      console.log(error)
					    });
	注意: 此种跨域解决方案，只能适用于测试阶段，打包的时候，不会具备服务
	不能跨域了，后端解决

Mock: 数据模拟 1.自己创建JSON文件。使用get请求形式访问数据 优点： 方便快捷 缺点：只能存在get请求 2.项目中集成服务器，模拟各种接口 优点：模拟真实显示环境 缺点：泽恩加开发成本 3.直接使用线上数据 优点：真实 缺点：不一定每个项目都存在 4.数据模拟库moackjs

路由 1.安装 npm install vue-router 2.引用 import VueRouter from 'vue-router' Vue.use(VueRouter); 3.路由嵌套 1.children 2.也要给显示位置（router-view）

ElementUI 1.安装element-ui npm i element-ui -S 2.安装按需加载的依赖 npm install babel-plugin-component -D 3.修改 .babelrc { "presets": [ ["env", { "modules": false, "targets": { "browsers": "> 1%", "last 2 versions", "not ie <= 8" } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] } 4.引入组件 import { Button, Select } from 'element-ui'; Vue.use(Button) Vue.use(Select) 5.使用element-ui VueX Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

开发大型单页面应用时使用

VueX状态管理
	 view->(dispatch)Action->(Commit) Mutations->(Mutate)State->View
	 注意：Action不是必需品，如果有异步操作才可能用到，否则跨域不使用

	 使用
	 	1.安装
	 		npm install vuex --save
	 	2.引入依赖
	 		import Vuex from 'vuex'
	 		Vue.use(Vuex)
	 	3.创建 store 仓库
	 		const store = new Vuex.Store({
			  state: {
			    count: 0
			  },
			  mutations: {
			    increment (state) {
			      state.count++;
			    },
			    desment(state){
					state.count--;
			    }
			  },
			  actions:{
			  	incrementA(context){
			  		context.commit("increment");
			  	},
			  	desmentA(context){
					context.commit("desment");
			    }
			  }
			})
		4.使用
			获取数据
				this.$store.state.count
			调用 mutations 方法
				this.$store.commit('increment');
			调用 actions 
				this.$store.dispatch("incrementA");
		注意：
			Action 提交的是 mutation. 而不是直接改变状态
			Action 可以包含任意异步操作