三天学会vue学不会你捶我

一、vue 简介

1- vue是什么
	基于JavaScript开发的渐进式框架
2- vue的核心 -- MVVM
	数据驱动与组件化
3- vue的优势
	a、体积小
	b、运行效率高、方便维护
	c、双向数据绑定【数据响应式】
	d、生态丰富、学习成本低
	e、使用场景广泛
4- vue的特点 
	a、易用	-- 有html + css +JavaScript 基础即可
	b、灵活	-- 可以在库与框架之间自如伸缩
	c、高效	-- 文件小、快捷的虚拟DOM、优化方便
	
注意：库、组件、插件、框架的区别
	库	:jquery、zepto			--- 提供项目常用的方法、相当于工具包
	组件:bootstrap、swiper		--- 多个插件的集合体，提供js 结构 样式 可以快速构建页面
	插件:iScroll					--- 把项目中某一个功能进行封装
	框架:angular（MVC）、vue（MVVM）、react、uni-app	--- 库+组件的集合体

二、vue 安装

1- 下载独立版本
2- npm 安装  
	npm install vue 
		install 简写 i  		--  安装
		--save  简写 -S		--  保存
		--global 简写 -g		--  全局
3- cdn

三、内置指令

1- 什么是指令？
	带有v-的特殊属性，当用在表达式上时表达式的值会发生改变，将某些行为应用到dom上
2- 指令
	特殊-{{}}		-- 设置文本内容，将data数据展示到视图中	普通文本
	v-text 			-- 设置文本内容，将data数据展示到视图中	纯文本
	v-html			-- 设置文本内容，将data数据展示到视图中	可以解析html元素
	v-cloak			-- 解决插值页面闪烁问题
	v-on			-- 事件监听
		a、完整格式 v-on：事件名 = "事件处理函数" --- 简写： @事件名 = "事件处理函数"
		b、事件修饰符	
			.stop 	-- 阻止事件传播   v-on:click.stop
			.prevent -- 事件操作时不再重载页面 v-on:submit.prevent  
			.once -- 事件只触发一次  v-on:click.once
		c、按键修饰符
			.enter  === keyup.13  回车   v-on:keyup.enter   v-on:keyup.13
	v-show		   	   -- 显示隐藏元素 -- 根据css样式中 display属性设置的  true --- none  false --- block
	v-if  	条件渲染	   -- 显示隐藏元素 -- 根据boolean值来进行渲染dom（true） 或者 不渲染dom操作（false）  
		v-else 	条件返回false的时候执行此处
		v-else-if	上一个条件为false的时候执行此处 如果此处为true 则不继续判断 为false则继续向下判断
	v-for			-- 列表渲染 
		以下名字除了in以为都是自定义
		（item,index） in  obj
			item 	--- 元素 -- 值
			index	--- 键
			obj		--- 对象
		需要绑定key
	v-bind			-- 强制绑定属性   【给子组件传递数据   <todoList :todos="todos"/>】
		完整格式：v-bind:属性名 = "属性值"   简写：:属性名="属性值"
	v-model			-- 双向绑定  数据变视图变，视图变数据变
	v-once			-- 设置文本  只执行一次
	v-pre			-- 格式化
	c-slot			-- 插槽
3- v-text v-html {{}} 的区别
	v-text 与 {{}} 区别
		1- 相同点  设置文本
		2- 不同点  插值存在页面闪烁问题 v-text 不存在闪烁
		解决办法：
			给设置插值的父标签 添加指令v-cloak  在样式中设置 [v-cloak]{display:none}	
	v-text 与 v-html 区别
		1- 相同点 设置文本
		2- 不同点 v-text 不能解析html元素，v-html可以
4- v-show 与 v-if 的区别
	1- 操作
		v-if：向DOM树添加或者删除DOM元素    
		v-show：控制css中display属性 进行元素的显示与隐藏
	2- 编译过程	
		v-if:局部编译卸载的过程：在切换过程中，销毁或者重建 组件中的事件与子组件
		v-show:执行css的切换
	3- 编译条件
		v-if:惰性，只有条件为true的时候才会编译解析组件
		v-show:任何情况下都会自动加载，然后控制元素的显示与隐藏
	4- 性能消耗
		v-if:切换消耗高
		v-show:只有初始渲染消耗
	5- 使用场景
		v-if:改变频率不频繁
		v-show:频繁切换
5- 为什么列表渲染时要单独绑定key值
	1- 唯一标识
	2- 如果列表项自身有id区分（唯一的证明）则使用即可，如果不存在则依赖key值作为唯一标识
6- v-model双向绑定的原理
	【get 、set 此处留给你们课下分析】
	1- 观察者模式：当属性发生改变时，使用该数据的地方也会发生改变
	2- 数据劫持：object.defineproperty:给属性赋值时，程序可以感知到，从而改变属性值

四、实例对象的配置项

1- el			--	 管理dom节点的入口
2- data			--   包含多个属性的对象 -- 数据的存储（描述属性） 对象 - 函数
3- methods      --   包含多个方法的对象
4- computed		--   包含多个计算属性的对象
5- watch		--   包含多个简体属性的方法的对象
6- 过滤器
	a、全局过滤
		Vue.filter(过滤器的名字，处理函数)
	b、局部过滤	filters{}
		filters:{
			过滤器名字(value){}
		}
	c、如何使用
		{{要过过滤的信息 | 过滤器名字}}
		{{要过过滤的信息 | 过滤器名字（过滤条件）}}
	注意：如果全局过滤器与局部过滤器重名的话，那么局部过滤器优先级高
	d、组件中过滤器的全局配置
		自定义过滤器模块  设置默认向外暴露的过滤方法
		在入口模块main.js中引入过滤器模块  将接收到的过滤器模块 配置到vue实例对象中原型链的属性里即可所有的组件中都可以使用
	注意：过滤器用于：v-bind 或者插值中
7- 自定义指令  -- directive
	a、全局定义
		Vue.directive("指令名",function(el,binding){//配置指令功能})
	b、局部定义
		directives:{
			"指令的名字"(el,binding){
					el.textContent = binding.value.toLowerCase()
			}
		}
	c、使用
		v-自定义的指令名
	注意：
		el ：当前指令所在的元素
		binding[对象]：当前指令所在的组件对象
			name:指令名  ，不包括 v-
			value:指定的绑定值
			oldValue：老值
8- ref -- 标记dom元素 -- 给我当前的组件起小名
   $refs : 获取被标记的dom元素 相当于 ref标记的组件本身	
9- data在什么情况下是函数  在什么情况下是对象
	1- 对象: 普通文件 .html  
	2- 函数: 组件中 .vue
   为什么在组件中要是用 函数 ?
	因为 多个组件数据交互时，可能会出现单个组件独立使用的数据，不需要被其他组件访问，且避免组件之间的冲突，或者重名 所以设置到函数中 指在当前组件生效 关闭此组件自动销毁
10- computed 与 watch 介绍
	1- computed:计算属性
		1- 自身需要依赖另一个值得改变而使当前所在DOM更新
		2- 计算属性不可以与data中的数据重名 
		3- 计算属性的方法不需要加括号调用，方法需要单独加括号调用 因为 计算属性 不属于方法 属于属性
		4- 计算属性具有缓存机制
			当计算属性第一次获取到响应式数据时，会缓存，在后期渲染视图时，会观察响应式数据是否改变，如果改变会调用计算属性，如果没有改变会读取存储的数据，方法只用更新就会重新调用
		5- 当获取计算属性时会触发getter ，当设置修改计算机属性是会触发setter
		注意：计算属性不可以使用箭头函数，否则this不会指向这个组件的实例
	2- watch:监听属性
		1- 当检测的值发生改变时，那么对应的方法会自动执行
		2- deep 开启深度监视
			发现对象内部值得变化，可以在选项参数中指定deep：true 作为深度监视，但是监听数组的变更则不需要使用
		3- immediate
			在选项参数中指定immediate：true将立即以表达式的当前值触发回调
	3- computed 与 watch 的区别
		1- computed 中的属性不是data中的属性 而是依赖于data中的属性数据改变而改变
			watch 监测data中某个属性数据的改变而执行某项操作
		2- computed 数据具有缓存机制  watch没有

五、实例练习

选项卡 、 删除数据、全选全不选、todolist 

六、生命周期函数

beforeCreate  	--- 创建前  new Vue({}) 只执行了实例对象创建 为初始化里面的选项 例如：el 、 data 、methods、computed... ...
created			--- 创建后  new Vue({data:{},methods:{},computed:{}}) 可以使用data存储后台请求过来的数据
beforeMount		--- 挂载前  new Vue({el:"",data:{},,methods:{},computed:{}}) 生成模板字符串
Mounted			--- 挂在后  将html 渲染到 el选项指向的dom节点
beforeUpdate	--- 更新前
updated			--- 更新后
beforeDestroy	--- 销毁前
destroyed		--- 销毁后
注意：常用的生命周期方法:
		created()/mounted():发送ajax请求,启动定时器等异步任务
		beforeDestroy(): 做收尾工作,例如:清除定时器

七、vue 组件

1- 全局组件
	方式1：
		// 1- 声明且挂载组件
		Vue.component("组件名",{
			template:`<div><b></b></div>`
		})
		//2- 使用组件
		<组件名></组件名>
	方式2：
		// 1- 定义组件结构
		<template id="my-card">
			<div><b></b></div>
		</template>
		//2- 挂载组件
		Vue.component("组件名",{
			template:#my-card
		})
		
		//3- 使用组件
		<组件名></组件名>
2- 局部组件
    // 1-声明组件
	let a = {
		template:`<div><b></b></div>`
	}
	// 2- 挂载组件
	components:{
		a
	}
	//3- 使用组件
	<a></a>
3- 属性说明
	template：模板数据
	注意：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
4- 插槽
	介绍：子组件中提供给父组件使用的一个占位符  占位符：<slot></slot> 父组件可以在占位符中填充任意模板代码 ，填充的内容会替换子组件的<slot></slot>
	a、普通插槽
		<slot></slot>
	b、具名插槽
		<slot name="header"></slot>
		<slot name="main"></slot>
		<slot name="footer"></slot>
	c、作用域插槽
		插槽的样式由父组件决定，内容由子组件控制
		<span>
			<slot>{{user.username}}</slot>
		</span>
		<father>{{user.username1}}</father>
5- 组件嵌套
	 说明：组件与组件套在一起，
	 优势：使代码条例清晰、可复用性强、方便维护
	 代码说明：
		// 1-创建组件
		var componentA = {
			template:`
					<div>我是顶部导航</div>	
			`
		}
		new Vue({
			el:"#app",
			components:{
				// 2-映射组件
				"component-a":componentA
			}
		})
6- 组件通信
	1- 父传子
		1- 传递数据
		    // 1- 父级组件通过v-bind 向子级传递数据
			<child v-bind:todos="todos" :index=index></chlid>
			// 2- 子组件接收父组件传递过来的数据
			props:{
				todos:Array,
				index:Number
			}
		2- 传递标签数据 slot
			参考插槽操作
	2- 子传父
		子组件 -- 触发事件	--- 触发事件		---- $emit
		父组件 -- 修改数据	--- 监听事件		---- v-on @  $on
	3- 不限制
		vuex
		pubsub
			订阅消息   pubsub.subscribe()
			发布消息	  pubsub.publish()
	4- 祖先传子孙 -- 依赖注入
		provide ：对象或者返回一个对象的函数 该对象包含可注入其子孙的property
		inject:字符串数组或者 一个对象 key：value
		注意：provide 与 inject 绑定不是响应，是专门设置			
		Vue.component("组件名",{
			template:`<div>{{obj.name}}</div>`,
			// 子组件注入
			inject：['obj']
		})
		
		let vm = new Vue({
			el:#app,
			data:{
				obj:{  课堂练习
					name:"zhangsanfeng"
				}
			},
			// 父组件提供obj
			provide(){
				return{
					obj：this.obj
				}
			}
		})
7- $refs、$parent、$children
	$parent:父组件   在子组件中直接可以通过$parent获取到父组件的数据和方法
	$children:子组件 在父组件中直接可以通过$children 获取到父组件的方法【$children获取的是数组形式需要记住子组件的位置】
	$refs：子组件  在父组件中直接可以通过$refs获取到父组件的数据和方法 获取的是对象形式的

八、vue cli 脚手架搭建

1- vue cli 简介
2- 安装 
	a、2.X
		npm install -g vue-cli
		vue init webpack vue_demo(自定义项目名称)
		
		cd vue_demo 切换到项目目录中
		npm run dev  启动项目
		 
	b、更高版本 版本升级后  
		解决问题方式1：
			卸载原有的 vue-cli 2.9.6   npm uninstall vue-cli
			安装高版本的 vue-cli 5.0.1 npm install @vue/cli  
		解决问题方式2：
			直接升级vue-cli 版本       npm update -g @vue/cli
3- 项目结构说明
	|---node_moudule			== 项目中安装的依赖模块
	|---src						== 源码位置 开发目录
	|---|---main.js					== 打包编译的入口文件
	|---|---App.vue					== 项目页面入口文件、vue组件
	|---|---components				== 当前项目的公共子组件目录
	|---|---views					== 路由组件 -- 当前项目的其他组件
	|---|---assets					== 资源文件夹 一般放一些静态资源
	|---|---router					== 当前项目的路由文件
	|---|---store					== 当前项目的状态文件
	|--- public					== 纯静态资源	
	|---|---index.html			== 入口模块文件
	|--- babel.config.js		== babel配置文件
	|--- gitnore				== 用来过滤一些版本控制的文件
	|--- package.json			== 项目文件，记载一些命令和依赖还有简要的项目描述信息
	|--- README.md				== 介绍自己项目 ，可参照github 中star多的项目
	|--- vue.config.js			== vue实例配置文件

九、vue Router 路由

1- 简介 
2- 功能
	嵌套路由映射
	动态路由选择
	模块化、基于组件的路由配置
	路由参数、查询、通配符
	展示由 Vue.js 的过渡系统提供的过渡效果
	细致的导航控制
	自动激活 CSS 类的链接
	HTML5 history 模式或 hash 模式
	可定制的滚动行为
	URL 的正确编码
3- 原理
	a、hash （默认） 单页面程序 每次切换页面是 修改都是#后面的内容
	b、history  历史记录  back forward go
注意：路由模块来实现页面跳转的方式
	1- 直接修改地址栏
	2- router-link
	3- $router.push()
4- 配置路由器
	1):下载 npm i vue-router -S
	2):在main.js中引入 import VueRouter from 'vue-router';
	3):使用vue-router:  Vue.use(VueRouter);
	4):创建路由对象并配置路由规则 
	let router = new VueRouter({routes:[{path:'/home',component:Home}]});
	5):将其路由对象传递给Vue的实例，options中加入 router:router
	6):在app.vue中展示内容 <router-view></router-view>
5- 配置路由
	let routes = [
		{
			path:'/',
			name:'layout',
			redirect:{name:'index'},
			component:'layout',
			children:[
				{
					path:'/index',
					name:'index',
					component:()=>import('../../views/index/index.vue')
				},
				{
					name:'shop_goods_list'
					path:'/shop/goods/list',
					component:'shop/goods/list'
				}
			]
		},
		{
			path:'/login',
			name:'login',
			component:()=>import('../../views/login/index.vue')
		},
		{
			path:'*',
			redirect:{name:'index'},
		}
	]
	
6- 路由传参两种方式
	1- 声明式  
		<router-link></router-link>
		<router-view></router-view>
	2- 编程式	
		this.$router.push()
7- $router 与 $route 的区别
	$route: 路由信息对象 
		path、params、hash、query、matched、name
		1） $route.path字符串，对应当前路由的路径，总是解析为绝对路径，如 "/order"。
		2） $route.params   一个 key/value 对象，包含了 动态片段 和 全匹配片段，   如果没有路由参数，就是一个空对象。
		3） $route.query   一个 key/value 对象，表示 URL 查询参数。   例如，对于路径 /foo?user=1，则有 $route.query.user为1，   如果没有查询参数，则是个空对象。
		4） $route.hash   当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。
		5） $route.fullPath   完成解析后的 URL，包含查询参数和 hash 的完整路径。
		6） $route.matched   数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
		7） $route.name 当前路径名字
		$router 是“路由实例”对象，即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等
			$router.push和$router.replace的区别：
				1）使用push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
				2）使用replace方法不会向 history 添加新记录，而是替换掉当前的 history 记录，即当replace跳转到的网页后，‘后退’按钮不能查看之前的页面

十、vuex

1- vuex是什么  状态管理模式对象
2- 安装vuex   npm install vuex
3- 什么是状态管理模式
	a、单项数据流
		state ： 驱动应用的数据源
		view：以声明方式将state映射到视图
		actions：响应在view上的用户输入导致的状态变化
	b、多个组件共享状态
		多个视图依赖于同一状态。
		来自不同视图的行为需要变更同一状态。
4- vuex的工作流程
	创建一个store对象  在store对象中有一个state数据源对象，将state中的数据渲染到视图中 视图中通过某一个事件的触发 执行this.$store.patch()去actions中执行操作，当actions中方法执行完异步操作后 通过commit将数据提交到指定的mutations中的方法 mutations直接修改state中的数据 数据渲染到视图中
5- vuex的五个核心
	state			--- 数据源 状态对象
	actions			--- 包含多个异步处理函数的对象
	mutations		--- 包含多个直接修改state状态的方法的对象
	getters			--- 包含多个计算属性方法的对象
	module			--- 包含多个模块的对象{每一个模块中都有以上四个核心}
6- vuex的辅助函数
	mapState mapMutations mapActions mapGetters
7- 命名空间
	https://blog.youkuaiyun.com/lzb348110175/article/details/89387495

---

总结：
要想学好vue首先学好基础，然后就是努力多敲多练。 语法笔记只不过是辅助，要想学好vue就要学会去理解会用有逻辑性。努力吧，加油！