vue学习笔记（知识点，路由，vuex，axios）

IVIEW文档地址 https://iviewui.com/
vue移动端组件 mint-ui：http://mint-ui.github.io/
vue

1.父子组件传递 子传父$emit----父传子props

2.控制视图显示v-show 和 v-if

3.  如何让CSS只在当前组件中起作用：在组件中的 style 前面加上 scoped

4.ref="domName" 用法：this.$refs.domName（获取dom）

5.事件：v-model 双向数据绑定；
v-for 循环；
v-if v-show 显示与隐藏；
v-on (@)事件；v-once : 只绑定一次；v-bing（:）绑定。
6.computed和watch的使用场景:**
computed : 当一个属性受多个属性影响的时候就需要用到 computed 
watch : 当一条数据影响多条数据的时候就需要用 watch
7.@绑定多个方法：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">
8.$nextTick的使用：当你修改了data 的值然后马上获取这个 dom 元素的值，
是不能获取到更新后的值，你需要使用 $nextTick 这个回调，
让修改后的 data 值渲染更新到 dom 元素之后在获取，才能成功。
9.当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，
这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐 v-if 和 v-for 同时使用。
如果 v-if 和 v-for 一起用的话，vue中的的会自动提示 v-if 应该放到外层去。
10.修饰符
.stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡；
.prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture ：与事件冒泡的方向相反，事件捕获由外到内；
.self ：只会触发自己范围内的事件，不包含子元素；
.once ：只会触发一次。
11.delete和Vue.delete删除数组的区别
delete 只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete 直接删除了数组 改变了数组的键值。
12.spa首屏加载比较慢解决方法：
安装动态懒加载所需插件；使用CDN资源
13.使用 @click.native 。.native可以解决很多点击或者鼠标事件无效问题
原因：router-link会阻止click事件，.native指直接监听一个原生事件。
14.params和query的区别
用法：query要用path来引入，params要用name来引入，接收参数都是类似的，
分别是 this.$route.query.name 和 this.$route.params.name 。
url地址显示：query更加类似于我们ajax中get传参，params则类似于post
，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
15：vue初始化页面闪动问题
使用vue开发时，在vue初始化之前，由于 div 是不归 vue 管的，
所以我们写的代码在还没有解析的情况下会容易出现花屏现象，
看到类似于 {{message}} 的字样，虽然一般情况下这个时间很短暂，
但是我们还是有必要让解决这个问题的。首先：在css里加上 [v-cloak] { display: none; } 。
如果没有彻底解决问题，则在根元素加上 style="display: none;" :style="{display:  block }"
16.更新数组方法
push()；pop()；shift()；unshift()；splice()；sort()；reverse()
17.生命周期
beforeCreate： 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，
其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中
的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create： data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，
或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount： 执行到这个钩子的时候，在内存中已经编译好了模板了，
但是还没有挂载到页面中，此时，页面还是旧的
mounted： 执行到这个钩子的时候，就表示Vue实例已经初始化完成了。
此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点
，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的
，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated： 页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory： Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 
和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ，
 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
 
 18.created和mounted的区别
 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
 
 19.vue获取数据在哪个周期函数
 一般 created/beforeMount/mounted 皆可. 
 比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.
 
 20.`$route` 和 `$router` 的区别
 答：$router 是VueRouter的实例，在script标签中想要导航到不同的URL,
 使用 $router.push 方法。
 返回上一个历史history用 $router.to(-1)
$route 为当前router跳转对象。
里面可以获取当前路由的name,path,query,parmas等。**

vue-route
1.路由（跟页面显示跳转相关）
跳转

<router-link to="/page1">Page1</router-link>//比较少用
router.push({
 path: '/user/userId',//这是对应路由配置里面要跳转的地址
 params: { userId: 123 }//带过去的参数
 })


路由配置
页面配置
//首页为例
{
        path: '/home',
        name: '_home',
        redirect: '/home',//重定向路径
        component: Main,//这个是组件最外层的框，包括头部，侧边菜单那些
        meta: {
            hideInMenu: false,//是否显示在菜单
            notCache: true
        },
        children: [{
            path: '/home',//跳转地址
            name: 'home',//跳转名称、路由可以根据name跳转也可以根据path
            meta: {//里面的正常都是个人封装的，但是都差不多
                hideInMenu: false,
                title: '首页',//页面菜单名称
                notCache: true,//不隐藏
                icon: 'md-home'//图标名
            },
            component: () =>
                import ('@/view/single-page/home')//你相应的的文件位置
        }]
    },
    //只要配置好，正常都能成功

axios
axios文档 https://www.kancloud.cn/yunye/axios/234845
简单封装学习文档：https://www.jianshu.com/p/0ea02376ca90

axios配置相关信息
axios配置全局信息可以使用
axios.defaults.baseURL = 'http://....'//公告的地址
axios.defaults.timeout = 5000//设置超时时间
axios.defaults.headers.post = '..'
params只能在post里面设置
封装学习文档里面有封装公共信息和拦截器

常见的配置项

接口的调用
//api文件需要写的
export const getUserInfo = (token) => {
  return axios.request({
    url: 'get_info',//后端给的接口地址
    params: {//带的参数
      token
    },
    method: 'get'//请求方法
  })
}


//前端页面方法里写的
getUserInfo () {
  this.$api['account/getUserInfos']().then(data => {
    this.userAvatars = data.headImg
  })
},

要是一个方法需要同时发生两个网络请求可以用axios.all,返回结果是一个数组
axios.all([axiox({
url:'address'
}),axiox({
    url:'address',
    params:{
        name:'name',
        age:'age'
    }
})]).then(res=>{
console.log(res)
})
//要是想吧上面两个方法的返回值单独拿出来的话可以使用：
axios.all([axiox({
url:'address'
}),axiox({
    url:'address',
    params:{
        name:'name',
        age:'age'
    }
})]).then(axios.sperad((res1，res2)=>{
console.log(res)
}))

项目都会创建一个axios的实例
可以在全局创造，在外面创建一个文件，封装一个方法，在main.js引入，在其他的地方可以共同使用
this.$request({
url:''
}).then(res =>{
    
}).catch(err=>{
    
})

简单封装：

方法2

方法3（简洁）

axios拦截器：在请求或响应被 then 或 catch 处理前拦截它们
响应拦截和请求拦截
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

移除拦截器代码：var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

vuex
vueX–vue开发的状态管理：https://vuex.vuejs.org/zh/ （响应式）

在state定义要管理的状态
如：state：{
    name：'zhangsan'
}
普通提交：可以在方法中直接this.$store.commit('对应vuex方法名','参数')
也可以用getter拿数组，直接($store.getters.方法名)
getters:{
    fullname(state){
        return state.name//state.name是返回的数据
    }
}

异步操作：
在对应方法里面写this.$store.dispatch('vuex文件action里面的方法名')
在vuex中context是代表上下文

当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
主要用处是储存一个项目中多个地方都会用到的数据，主要是用在大型单页面应用
能更好地在组件外部管理状态，让需要公用的东西放在一个中间总站去管理，需要的时候去找中间总站拿。
主要用在登录状态，用户名称，头像，地理位置，购物车，商品收藏

最基本使用$store.commit(‘方法名’).提交只有就会执行该方法进行状态保存或者更改状态
getters
getters其实就是vuex里面的方法层，可以在里面做相应的操作，在页面就可以拿到经过我们操作后的数据
要是遇到使用getters还附带参数的时候，gertters的return可以返回一个function（参数名）{}，用来接收参数
Mutation
包含两部分：
1.时间类型  2.回调函数（第一个参数是state）

vux的响应式
需要用到响应式的话需要在vueX文件，在里面定义好，在store中初始化，定义好并且初始化之后就会被被放到响应式系统里面，只要在一个地方改变就会通知所有用到的地方一起改变
vue.delete("对象名"，属性名)，这个方法可以响应式的删掉某一个对象的属性
vue.set("对象名","属性名","值")可以响应式增加某个对象的值。

异步操作action替代mutation
action:{
}



简单使用
vuex文件里面的代码（正常是分开写在导入）

前端页面使用vuex代码

使用说明
1.在state中定义数据

2.Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，Getters 可以用于监听、state中的值的变化，返回计算后的结果

3.给action注册事件处理函数，当这个函数被触发时候，将状态提交到mutations中处理。actions里面自定义的函数接收一个context（上下文）参数和要变化的形参

4.mutations是一个对象里。面的方法 都是同步事务，是更改state初始状态的唯一合法方法，具体的用法就是给里面的方法传入参数state或额外的参数

5.dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)

6.commit：同步操作，写法：this.$store.commit('mutations方法名',值)

小技巧：
@submit.native.prevent可以阻止输入框输入的时候按回车导致表单提交问题
div文字超过宽度自动换行样式：white-space:normal; word-break:break-all;