vue-element-vuex学习笔记

v-model和:mode的区别

:model是v-bind:model的缩写,

<child :model="msg"></child>

这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。

v-model是vue.js中内置的双向数据绑定指令，
用于表单控件以外的标签是不起作用的
(即只对表单控件标签的数据双向绑定有效)。

:model相当于v-bind:model的缩写，
v-bind动态绑定指令.

JavaScript中的map()函数

map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数的返回值。

axios的返回值有哪些

axios.response接口中存储的是如下内容：
{
    
    
    //`data`是服务器的提供的回复（相对于请求）
    data{
    
    },
 
    //`status`是服务器返回的http状态码
    status:200,
 
 
    //`statusText`是服务器返回的http状态信息
    statusText: 'ok',
 
    //`headers`是服务器返回中携带的headers
    headers:{
    
    },
 
    //`config`是对axios进行的设置，目的是为了请求（request）
    config:{
    
    }
}

$nextTick的用法·

使用场景：
场景是在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到dom。因为赋值操作只完成了数据模型的改变并没有完成视图更新。在这个时候我们需要用到

1.$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
2.理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，
3.当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

1.vue-route有两种模式：history模式和hash模式。

1. hash模式（vue-router默认hash模式）
   2.history模式

2.base: process.env.BASE_URL,
base
类型: string

默认值: “/”

应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”

vuex

vuex，你可以理解为一个存放全局变量的仓库。在这里可以存放一些各个模块中通用的变量和属性。 在小项目中使用localstorage和session, 在大项目中使用vuex,解决了组件之间统一状态
Vue的项目中，如果项目简单， 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递

但是如果是大中型项目中，很多时候都需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。这时候再使用上面的方法会让项目代码变得冗长，并且不利于组件的复用，提高了耦合度。

Vue 的状态管理工具 Vuex 完美的解决了这个问题。

import Vue from 'vue'
import Vuex from 'vuex'
 
// 告诉 vue “使用” vuex
Vue.use(Vuex)
 
// 创建一个对象来保存应用启动时的初始状态
// 需要维护的状态
const store = new Vuex.Store({
    
    
  state: {
    
    
    // 放置初始状态 app启动的时候的全局的初始值
    bankInf: {
    
    "name":"我是vuex的第一个数据","id":100,"bankName":"中国银行"}
  }
})
// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以连接到我们的应用中
export default store

router.beforeEach()

@/main.js
思路：【
	如果（即将进入的这个路由需要权限才能进入）{
    
    
	
		如果(能获取到这个老哥的userID){
    
    
			就让这个老哥进入这个路由
		}否则{
    
    
			就让这个老哥进入b这个页面
		}
		
	} 即将进入的路由不需要权限就能进入 {
    
    
	
		就让这个老哥进入这个路由
		
	}
】
对应代码：
import store from '@/assets/store'   //把这个userId获取过来
router.beforeEach((to,from,next)=>{
    
    
	if(to.meta.requireAuth){
    
    
		if(store.state.userId){
    
    
			next()
		}else{
    
    
			next({
    
    path:'/b'})
		}
	}else{
    
    
		next()
	}
})

element

prop 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 string 传入 Form 组件的 model 中的字段

this.$route.params的使用

A、传参数：

this.$router.push(name{:}^{\prime }monito{r}^{\prime },params:id:id,）B、获取参数：this.$route.params.id
C、在url中形式（url中不带参数）
http://172.19.186.224:8080/#/monitor
D、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在（项目中遇到此问题）

sessionStorage数据缓存读取

session：存储，关闭浏览器删除

保存数据：window.sessionStorage.setItem(‘key’,value);
读取数据：window.sessionStorage.getItem(‘key’);
删除单个数据：window.sessionStorage.removeItem(‘key’);
删除所有数据：window.sessionStorage.clear();
得到某个索引的key：window.sessionStorage.key(index);