VUE框架知识点整理_vue框架知识点总结

VUE框架知识点整理

一、父组件与子组件通信

1、组件中data属性
组件对象也有一个data属性，只是这个data属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据

原因：在于vue让每个组件对象都返回一个新的对象，因为如果是同一个对象，组件在多次使用会相互影响，写在函数中为局部变量，调用data中的值时，都会新创一个内存空间，调用者指向这个空间的值这样组件间就不会相互影响

2、父向子传递数据
通过props向子组件传递数据

<!-- 父组件  -->
<cpn :cInfo='info'></cpn>

export default{
	data:{
		info: 10
	}
}
1
2
3
4
5
6
7
8

<!-- 子组件  -->
<div>{{cInfo}}</div>

export default{
	props:{
		cInfo: {
			type: Number,
			// type 为Object或数组时为函数 default(){ return [] }
			default: 0
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

3、子向父组件通信
通过事件向父组件发送消息，需要自定义事件来完成
在子组件中通过$emit()来触发事件
在父组件中 通过v-on来监听子组件事件

<!-- 子组件  -->
export default{
	methods: {
        click() {
          this.$emit('itemClick'[,item])
        }
      }
}
1
2
3
4
5
6
7
8

<!-- 父组件  -->
<cpn @itemClick="cpnClick"></cpn>

export default{
	methods: {
		cpnClick([item]) {
			...
		}
	}
}
1
2
3
4
5
6
7
8
9
10

4、父子组件的访问方式
父组件访问子组件：使用$refs

<!-- 子组件  -->
<div>{{currentIndex}}</div>

export default {
	data() {
        return {
          currentIndex: 0
        }
    }
}
1
2
3
4
5
6
7
8
9
10

<!-- 父组件  -->
<cpn ref="cpn"></cpn>

export default{
	//将父组件的 index 值传递给子组件的 currentInex
	click(index) {	    
        this.$refs.cpn.currentIndex = index        
      },
}
1
2
3
4
5
6
7
8
9

二、路由

1、URL的hash
锚点，本质上是改变window.location的href属性，我们可以直接赋值location.href来改变hash,但页面不刷新HTML5的 history模式
history.pushState(data, title, targetURL) -----栈结构
history.replaceState(data, title, targetURL) ------没有回退
传给目标路由的信息,可为空
目前所有浏览器都不支持,填空字符串即可
目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data
history.back()==history.go(-1) ------回退一步
history.forward()==history.go(1) -----进一步

2、VUE-router
2.1 vue中默认的是URL的hash，在router的实例中配置mode：‘history’

• 标签：跳转<router-link to="跳转属性" tag="元素"> ，渲染<router-view>
• 在函数中跳转：this.$router.push(’/home’)

2.2 传递参数 params和query

• params: 动态路由：$router.params.id == path: ‘/user/:id’ 可获取路径中的id值，传递后的路径 ‘/user/123’
  函数中使用：this.$router.push(’/user’+this.userId)

• query:配置路由时普通配置 ‘/user’, 传递方式：query对象中的key，value作为传递，路径：/user?id=123
  函数中使用：this.$router.push( {path:’/user’,query: {key:value} })

2.3 $router和$route的区别

• $router 为VueRouter实例，跳转路由 $router.push(‘home’)
• $route 为当前router对象，可以获取name path query params （理解为路径）

2.4 导航守卫
vue-router提供的导航守卫主要用来监听路由的进入和离开的
vue-router 提供了beforEach 和 afterEach 两个钩子函数，它们会在路由的即将进入 和 离开之前触发

to:即将进入的目标的路由对象
from：当前导航即将离开的路由对象
next: 调用该方法后，才能进入下一个钩子
router.beforEach((to ,from, next) => {

})
router.afterEach((to, from) => {

})
1
2
3
4
5
6
7
8
9

2.5 keep-alive
vue中内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

• include – 字符串或正则表达式，只有匹配的组件会被缓存
• exclude – 字符串或正则表达式，任何匹配的组件都不会被缓存(name属性)
  router-view也是一个组件，如果直接被包在keep-alive 里面，所有路径匹配的视图组件都会被缓存

<keep-alive>
	<router-view/>
</keep-alive>
1
2
3

activated()和deactivated() 是keep-alive的两个函数

三、VUEX

vuex是专门为vue.js应用程序开发的状态管理模式，它采用了集中式存储管理 应用的所有组件的状态，并以相应的规则状态以一种可预测的方式发生变化
状态管理： 多个组件共享的变量全部存储在一个对象里面，vuex就是为了提供这样一个在多个组件间共享状态的插件
概念图

vuex核心概念

• state : 单一状态树，能够让我们直接的方式找到某个状态的阶段，之后的维护和调试，方便管理和维护
• mutation：状态更新，vuex的state状态更新的唯一方式，提交mutation
  参数被称为是mutation的载荷(Payload)
  第一个参数固定 是state， 第二个参数代表commit的全部参数

 	mutations:{
        事件名: (state, index) => {
             state.index = index
        }             
    },
1
2
3
4
5

methods:{
	shijian() {
		this.$store.commit('事件名',index)
	}
}
1
2
3
4
5

• action : 异步提交

actions:{
        事件名: (context) => {
             context.commit('事件')
        }             
    },
1
2
3
4
5

methods:{
	shijian() {
		this.$store.dispatch('事件名')
	}
}
1
2
3
4
5

• getters: 与computed类似

getters:{
	id: state => {
		return ...
	}
}
1
2
3
4
5

• module: 可以将store分割成模块，每个模块有自己的state,mutations,actions,getters

四、axios网络请求

axios的功能特点

• 在浏览器中发送XMLHttpRequests请求
• 在node.js中发送http请求
• 支持Promise异步编程
• 拦截请求和响应
• 转换请求和响应数据

axios 请求方式 – axios(config)

axios({url: '',
	params: {
		id: 1,
		page:10
	}
}).then(res => {
	...
})
1
2
3
4
5
6
7
8

发送并发请求 – 使用axios.all可以放入多个请求的数组，axios.all([])返回的结果是一个数组，使用axios.spread可就数组分开

axios.all([axios.get('url'),
		axios.get('url',{params:{id:1,page:10}})
]).then(axios.spread(function (allresult1, allresult2) {
    debugger//打印可以拿到所有的返回值
    allresult1== 第一个请求的返回值
    allresult2== 第二个请求的返回值
  }));
1
2
3
4
5
6
7

全局配置

axios.default.baseURL = 'http:/localhost:8080'
axios.default.timeout = 5000 //超时时间(毫秒)
1
2

常见的配置选项：
get请求时 传参为params
post请求时 传参为data

axios的实例

const instance = axios.create({})
1

封装

export function request(config){
	const instance = axios.create({
		baseURL = 'http:/localhost:8080',
		timeout = 5000
	})
	// 2.axios的拦截器
    // 2.1.请求拦截的作用
    instance.interceptors.request.use(config => {
      return config
    }, err => {
      // console.log(err);
    })

    // 2.2.响应拦截
    instance.interceptors.response.use(res => {
      return res.data
    }, err => {
      console.log(err);
    })

    // 3.发送真正的网络请求
    return instance(config)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

五、目录

Vue.cli3的目录结构

• dist – 打包的包
• public – 静态目录
• src – 源代码
• browserslistrc – 浏览器相关情况
• .gitignore – git忽略文件
• .editorconfig – 约束
• babel.config.js – ES语法转换
• vue.config.js – 自定义配置

六、生命周期

常用的几个钩子函数

• created() : 请求数据
• mounted()：挂载数据
• destroyed()：组件销毁(清理定时器等)

七、数组函数

数组函数 - - Vue是响应式的，数据变化时，Vue会自动检测数组的变化，视图对应的更新

• push() - - - 数组后追加（可以追加多个），并返回新的长度

• pop() - - - 最后一个删除，并且返回删除元素的值(数组为空时，不改变数组，并返回undefined)

• shift() - - - 第一个元素删除，返回数组的第一个元素

• unshift() - - - 数组前添加（可以追加多个），返回新的长度

• sort() - - - 排序

• reverse() - - - 反转

• splice() - - -
  -删除：传递一个参数(index) 删除对应及之后的数据，传递第二个参数(你要删除的个数)
  -替换：第二个参数，表示我们替换几个元素，后面参数为用于替换的元素
  -插入：第二个参数传入0，后面参数为插入的元素

• split() - - - 将一个字符串以参数分割 ，返回数组

• join() - - - 将数组转化为一个字符串，一传入的字符串参数分割，返回字符串

• …Array - - - 数组里的每一项拆分下来

• fillter() - - - 参数为回调函数，必须返回一个boolean值，返回为true时，函数会自动将这次回调的n加到新数组中，false时，函数会过滤这次的n

• map() - - - 返回的值时处理后的值

• reduce - - - 对数组中所有的内容进行汇总，后一个参数为开始值

const nums = [10, 20, 111, 222, 4444, 40, 50]
let total = nums.fillter(n = > return n < 100)
.map(n => return n * 2)
.reduce((preValue, n) => {return preValue + n},0)
1
2
3
4

七、对象函数

		const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        console.log(Object.keys(person));//["name", "age", "language"]
        console.log(Object.values(person));//["jack", 21, Array(3)]
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

        const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };

        //{a:1,b:2,c:3}
        Object.assign(target, source1, source2);

        console.log(target);//["name", "age", "language"]

        //3）、对象的函数属性简写
        let person3 = {
            name: "jack",
            // 以前：
            eat: function (food) {
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用，对象.属性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
                console.log(this.name + "在吃" + food);
            }
        }

        person3.eat("香蕉");

        person3.eat2("苹果")

        person3.eat3("橘子");

        //4）、对象拓展运算符

        // 1、拷贝对象（深拷贝）
        let p1 = { name: "Amy", age: 15 }
        let someone = { ...p1 }
        console.log(someone)  //{name: "Amy", age: 15}

        // 2、合并对象
        let age1 = { age: 15 }
        let name1 = { name: "Amy" }
        let p2 = {name:"zhangsan"}
        p2 = { ...age1, ...name1 } 
        console.log(p2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

以上仅为个人学习笔记总结，请大佬指点(^_^)。。。