我的VUE 学习之路（上）

需求：

        1.VUE 目前是前端最流行的，它一定能最能满足当下业务需求的并且具有较高的先进性，所以要学习。

        2.它作为工作在前线的前端开发的必备技能，无论是后端还是程序员都要了解一下（程序员会更知道如何更好的提供接口，项目经理也不会提无理的需求）

        总之：作为IT从业人员，具有较好的学习是行业人员基本素质。所以不要讨论LayUI，原生JS等等东西，静下来做专注于做好这件事再下结论。

预期目标：实现对VUE的基本理解

使用工具：HBuilder

方式：HTML中嵌入VUE  （这个阶段就够了）

学习渠道：VUE官网、菜鸟教程、B站视频（这里推荐千锋教育的视频）

学习前技术储备：会基本的HTML、JS、CSS

一、VUE 之我见

        VUE 与之前我接触过的类似LayUI一样都是前端框架，那么VUE为什么好呢？官网上介绍说它是渐进式框架，咋看不太好理解，个人理解为是需要的时候才调用专用的，而不是全部调用后只用到其中一点点（类似于为了春节回家特意买辆车，而VUE则是我回家的时候租辆车），其实就功能而言只关注实现，所以这不是我所最关心的点，那么什么才是我最关注的点呢？“模组化”才是我最关注的，它可以切分为N个块，实现一处模块处处使用，模块切的最小未来越灵活。这样做最大的好处在于不会后期出现因为需求的变更，修复一个BUG出现十个BUG的现象。

二、初识VUE 2.1 下载VUE 并引入 2.2 在Hbuilder中使用

	
		
			
		
		   
		
		 
		    
		    
		        {{1+1}}
				{{pwd}}
		    
			
			
				{{1+1}}
				{{pwd}}
			
		    
		    
	
	

2.3 效果

*注意不要在Hbuilder的自带的浏览器中调试,否则显示不出来VUE效果

2.4 总结

由上可见VUE 区会以JS的形式显示，并且可以灵活配置内容（显示）项目

三、VUE绑定 3.1 数据双向绑定

vue 与其它（我了解到的）前端框架最明显的区别在于它可以做到数据双向绑定

3.2 双向绑定示例

	
		
			
		
		   
		
		 
		    
		    
				{{pwd}}
				{{msg}}
		    
		    
		    
	
	

3.3 效果

 3.4 结论

有了这个就可以做到数据统一，而之前则需要要么做全部刷新、要么局部刷新、要么手动赋值。

四、VUE渲染（指令） 4.1 渲染HTML

想像一下场景：我们把商品详情存储到数据库中一定是以HTML代码的形式存储的，然后当VUE值是一个HTML的时候我们则显示的是HTML代码，显示这并不是我们想要的，那么这时就里要我们通过v-html指令完成显示。

效果

4.2 条件渲染

本质原理就是通过v-if 、v-else-if、v-else指令组合处理

	
		
			
		
		   
		   
		
		 
		    
		    
				
				
					自定义测试区1
				
				
				
					自定义测试区2
				
				
				测试	
		    
		    
		    
	
	

4.3 显示控制

有时候我们需要有些东西需要显示或者不显示，那么我们可以通过v-show指令进行完成,注意这里只是显示与隐藏，并未删除。

	
		
			
		
		   
		
		 
		    
		    
				
				
					这里是显示内容 
				
		    
		    
		    
	
	

效果

4.4 遍历

实际项目中遍历是最常见的，而VUE通过简单的v-for指令就能轻松完成，不仅数组可以遍历，而且对象也可以，注意一般是需要给key值以防止重复对比。

4.4.1 基本实现

	
		
			
		
		   
		
		 
		    
		    
				
				
					{{index}}-{{data}}
				
				
				
				
					{{data}}
					
				测试	
		    
		    
		    
	
	

4.4.2 配置的key 

key 示例

	
		
			
		
		   
		
		 
		    
		    			
				
				
					{{index}}+{{data.id}} -{{data.name}}-{{data.code}} 
					
				测试	
		    
		    
		    
		

4.4.3 数组修改处理

示例

	
		
			
		
		   
		
		 
		    
		    			
				
				
					{{data.id}} -{{data.name}}-{{data.code}} 
					
				测试	
				修改数据
		    
		    
		    
		

4.4.4 检索处理

有时候我们要做动态筛选，如下不借助于计算属性实现 的示例

	
		
			
		
		   
		
		 
		    
		    			
				
				 
				测试	
				
					{{data}}
					
				
		    
		    
		    
		

通过计算属性实现

4.5 动态创建

动态创建较常见，它是通过发v-if指令实现的，它与v-show的区别在这里是动态创建

效果1 当是true

 效果2：

4.6 class绑定控制

大多时候我们会对class进行控制，以下是一个简单的示例

	
		
			
		
		   
		   
		
		 
		    
		    
				
				
					自定义测试区1
				
				
				
					自定义测试区2
				
				
				测试	
		    
		    
		    
	
	

4.7 style绑定控制

有时候需要行内处理样式，示例如下：

	
		
			
		
		   
		   
		
		 
		    
		    
				
				
					自定义测试区1
				
				/**
				 * 括号提升优先判断处理
				 */
				
					自定义测试区2
				
				
				测试	
		    
		    
		    
	
	

五、VUE 自定义函数与事件

5.1 对于无参数函数，调用时函数是否加“（）”并不影响

5.2.尽管可以直接在事件上定义JS代码，但不推荐使用

	
		
			
		
		   
		
		 
		    
		    			
				
				
				测试	
				测试2	
				
				测试3	
				
					{{data}}
					
				
		    
		    
		    
		

5.3 处理事件冒泡最佳姿势

在VUE下非常简单，可以通过事件.stop实现【事件修饰配置】 ，如下示例

	
		
			
		
		   
		
		 
		    
		    			
				
				
				
					 aa
					
				
		    
		    
		    
		

5.4 按键获取解决方案

	
		
			
		
		   
		
		 
		    
		    			
				
				
					
				{{keystr}}
				
		    
		    
		    
		

六、表单处理

6.1绑定

绑定时要注意表单项本身存储的类型然后再找对应的变量对应。例如text用string ,单选checkbox使用Boolean,多选择checkbox 使用list

示例

	
		
			
		
		   
		
		 
		    
		    			
				
				
				
					
						
						{{item.name}} - {{item.num * item.price}} 
						-+ {{item.num}}- 
					
					sum={{getsum()}}
					
				
				
		    
		    
		    
		

6.2 表单处理修饰

v-model.lazy 节点消失后才加载

v-model.trim 去左右空格

六、VUE数据请求

        这里先只了解axios就可以了， *** 作非常简单，但有一个需要特别注意的地方就是返回值固定写在data里，所以取的时候也要指定到这里取；下面是一个简单的示例（接口是我在本机上写了一个，所以你可以使用模拟数据的形式实现 ）

	
		
			
		
		   
		   
		
		 
		    
		    			
				
				 getdata
				
					{{li}}
				
				
		    
		    
		    
		

七、VUE 计算属性

通过vue的computed实现对数据的二次处理，处理函数作为属性名直接使用。示例代码如下：

	
		
			
		
		   
		   
		
		 
		    
		    			
				
				原数据
				{{code}}
				目标（取首字母大写）
				
				计算后：{{getFistWord}}
				
		    
		    
		    
		

八、VUE 定义组件

        无论是那项互联网技术衡量是否灵活性（先进性）的重要标准：是不是足够灵活？而VUE就是组件化开发（组件可以理解为乐高中的各种模块），这样一来我们未来切的越细就越灵活。

        具个例子：有这样一个场景，项目中通常有基础数据模块，以商品管理模块我们写了一个商品管理的功能，那么必然会有一个新增功能；当我们做到采购单中我们希望在下订单的时候发现这个商品没有也可以直接新增，传统做法这两个位置就写一遍，但是后面我们发现需要对商品增加一个字段（或叫参数）【这种场景非常常见吧】，那么我们需要修改的话就要去找那些地方用到了这个需求，如果不这么做就会变成“修复了一个BUG创建N个BUG”的情况，显然这是我们想要的，我们想要什么呢？就是一处修改处处变化，这时就体现出模组化的优势。

        VUE 提供了componets方法进行注册自定义的组件,使用则是以标签的方式使用，具体如以下示例

	
		
			
		
		   
		   
		
		 
		    
		    			
				
				
				
				 说明
				
		    
		    
		    
		

需要注意事项

1.一定先注册再使用，否则找不到组件。

2.它与普通定义VUE不同的：

        2.1、采用模板（template）定义页面（换行使用转义方式）并且要保证内部的代码的顶层（外部）需有一个统一的标签包含（不能存在并级标签）否则会报错

        2.2、数据一定要有以返回值的形式（return）处理而非普直接定义直接使用

        2.3、组件间的数据（data）不能直接相互使用（相实现接着本文向下看）

        2.4、自定义的组件的方法、计算属性等写在自定义组件内才有意义、方法也是通过methods: {.....  }

        2.5、全局组件（以Vue.component定义的）可以相互使用，但局部组件（在组件内部通过components:....定义的组件）只能在定义的组件内部使用。

        

九、父子互传

        自定义组件如果不能相互访问那就失去了它存在的意义，所谓子级就是被一个组件包在内的的组件，而被包的组件叫做子组件。

方案1：通过方法props或定义方法可以互传

        9.1.父传子

                1.父中在调用标签中直接传值，也可以绑定传值，传的可以是一个值，也可以是一个对象。

                2.子中使用props接收，接收时推荐使用对象方式接收（好处在于可以做传入校验），然后再子组件中使用。

	
		
			
		
		   
		   
		
		 
		    
		    			
				
				
				
				 说明:{{code}}
				
				
		    
		    
		    
		

        9.2.子传父

        1.在外部的组件标签中使用 <自定义组件标签名 @接收存储名="自定义函数($event)">

        2.子标签内部 *** 作业务方法：this.$emit("接收存储名",传的值或对象)

示例如下：

	
		
			
		
		   
		   
		
		 
		    
		    			
				
				
				{code}} -->
		    
		    
		    
		

 方案2：通过ref实现通信（不推荐）

这种方式不仅能直接互传，还可以直接调用对应的方法

优点：简单  缺点：耦合性太强

示例如下：

	
		
			
		
		   
		   
		
		 
		    
		    			
				
				
				获取
				设置
				{code}} -->
		    
		    
		    
		

以上是两种方式实现组件互传，推荐使用前者，虽然相对有点麻烦，但这样才能体现出组件的优势。在使用前者时会最好用事件总线的方式实现，优点是可以管理多个组件状态。示例如下：

	
		
			
		
		   
		   
		
		 
		    
		    			
				
				
				{code}} -->
		    
		    
		    
		

十、动态组件

简单地说就是通过component标签中的is值（这个值就是组件名）然后动态显示相应的组件，示例如下：

	
		
			
		
		   
		   
		
		 
		    
		    			
				
				
				
				{code}} -->
		    
		    
		    
		

十二、插槽

当需要对子组件附加内容时防止把内部自定义的内容替换掉就采用在子组件定义显示

	
		
			
		
		   
		   
		
		 
		    
		    			
				
									
					上面显示：不要把这个内容清除掉
					下面显示：xxx
				
				{code}} -->
		    
		    
		    
		

十三、生命周期

顾名思义：生命周期是指组件从生到死的阶段过程，可以通过如下示例进行了解

	
		
			
		
		   
		   
		
		 
		    
		    	
				
					
				
				清除