14_vue_component 中文文档教程

Question

1.单文件组件 1.三个部分组成 1.template 只能存在一个根元素 2.script 3.style scoped: 样式只在当前组件内生效 2.子父级组件交互（通信） 父->子: props 数据传递类型限制（验证） 数据类型验证 多数据类型验证 必选项 默认值 obj、arr数据类型的默认值（返回Object） 子->父: emit Event 3.插槽 单个插槽 具名插槽 作用域插槽（子传父） 注意：在2.5.0之前,必须使用在template上 4.动态组件 keep-alive2.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({ userid:"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'] = AUTHTOKEN; 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 可以包含任意异步操作