美年旅游项目自记录Day02

一、前段框架Vue.js学习

工具： HBuilderX iDE

MVVM模式：模型、视图、视图模型

可通过官网快速入门进行上手vue官网

常规HelloWorld练习

		
		

			{{message}}
		
	
		

MVVM本质是MVC的改进，viewmodel作为model与view的中间层，将view的状态和行为抽象化，实现视图、模型的双向数据绑定，达到M、V的分离解耦。

1、常用系统指令（重点）

• v-on事件（等同于@）

        v-on:click(等同于@click)

		

			{{message}}
			

			
			赋值2
		
		
		

        v-on:keydown(等同于@keydown)

		

			输入：
		
		
		

        v-on:mouseouver

        还有更多操作，此处不一一演示

• v-text与v-html：文本

• v-bind：属性

        v-bind可省略，但要:开头

	
		
		
		
		

	
	

		

			
Fionn
			
Fionn
			
Fionn
			
			
Fionn
			
			
Fionn
			Fionn
		

		
	

• v-model：

        用于读取视图数据（表单回显）

    
	
	
	
	
	
    

    
	
			
	

		用户名：{{username}}

		
		
	
			
	    
		大班
		中班
		小班
	    
	    {{sel}}
	    

	    同意用户协议

	    
{{danCheck}}
	    西瓜
	    苹果
	    黄瓜
	    
{{duoCheck}}
	    男
	    女
			
	    

	    
	    
{{tarea}}
	
    
    

• v-for

        用于操作array/集合的遍历

        其中参数顺序不能变

	
		
		
		
	
	
		

			

				{{item}}
			

			

				{{index}} --- {{obj.id}} --- {{obj.name}}
			

			

				{{idx}} -- {{key}} -- {{val}} 
			

            

                第几次循环{{cnt}}
            
		

		
	

•  v-if与v-show

        v-if可对比jq核心标签

        v-show 类似input标签的hidden类型 visibility

	
		
		
		
	
	
		

			
这是使用了v-if的p标签
			
这是使用了v-else的p标签

			
这是使用v-show的p标签

			
A
			
B
			
C
			
NOT A/B/C
		

		

	

简单小结：v-on（事件处理）、v-text/v-html（文本处理）、v-bind（属性绑定）、v-model（表单回显）、v-for（循环数据）、v-if（判断）、v-show（是否显示）

2.Vuejs的生命周期

vue对象的创建、赋值、显示、改值、销毁的全过程

创建对象前，模型数据、el视图元素，不可获取，差值表达式未解析，视图区域不能显示

创建对象后， 模型数据可以获取，el视图元素不可获取，差值表达式未解析，视图区域不能显示

Dom对象挂载前，模型数据，el视图元素可获取，差值表达式未解析，视图区域不能显示

Dom对象挂载后，模型数据，el视图元素可获取，差值表达式解析，视图区域可以显示

更新数据前，模型数据发生改变，但是视图（view）并未改变

更新数据后，view改变

对象销毁前后，所有的东西都可获取

3.Vuejs ajax（异步请求处理）

• vue-resource（不在更新）
• axios