Vue.js 基础（1）

什么是Vue.js

• Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App,Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
• Vue.js是前端的主流框架之一，和Angular.js,React.js一起，并称为前端三大主流框架！
• Vue.js 是一套构建用户界面的框架，只关注视图层，他不仅易于上手，还便于与第三方库或既有项目整合（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
• 前端的主要工作？主要负责MVC中V这一层；主要工作就是和界面打交道来制作前端页面效果；

框架和库的区别

• 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架则需要重新架构整个项目
• node中的express
• 库（插件）：提供某一个小功能，对目标的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。
• 1.从jquery切换到Zepto
• 2.从EJS切换到art-template

Node（后端）中MVC与前端中的MVVM之间的区别

• MVC 是后端的分层开发概念
• MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel

Vue.js 基本代码结构和插值表达式、v-clock/v-text/v-html

    
    
    
    
    



    
    

        
{{msg}}
    
    

v-text/v-html/v-cloak

	
		
		
		
		
	
	
		

			
			
99999{{msg}}6666
			 
			 
			
123
			
123
			
			
			
			
			 
			 
			 
			 
		
		
		
	

跑马灯效果

	
		
		
		
		

	

	
		

			
			
			
			
{{msg}}
		
		
	

v-on指令和事件修饰符

事件修饰符：

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .capture 添加事件侦听器时使用事件捕获机制
• .self 只当事件在该元素本身（比如不是子元素） 触发时触发回调
• .once 事件只触发一次

- 


	
		
		
		
		
		
	

	
		

			
			 
			
			
			
			
			
			
			
			
			
			
			
			
		
			
			
			

				

					
				
			
			
			
		
		
	

vue指令之v-model和双向数据绑定

    
    
    
    
    



    

		
{{msg}}
		
		
		
		
		
		
		 
	
    

简易计算器案例

	
		
		
		
		
		
	

	
		

			
			
				+
				-
				*
				/
			
			
			
			
		
		
	

在vue中使用样式

	
		
		
		
		
		
		
	

	
		

			
			
			

			
			

			
			

           
			
这是一个很大的h1
		
		
	

对象

    
    
    
    
    



    

		
		
		
		
这是一个h1