Vue基础语法

 

目录

1. 插值（Interpolation）

案例：

效果图：

     

2. 指令（Directives）

2.1 什么是指令？

2.2 常见指令示例

v-if / v-else-if / v-else： 

 v-for：

 下拉框

 动态参数

3. 过滤器（Filters）

3.1 什么是过滤器？

3.2过滤器的使用案例

4. 计算属性和监听器（Computed Properties & Watchers）

4.1 计算属性的作用

计算属性的主要用途：

计算属性的优势：

4.2 计算属性示例

4.3 监听器的作用

主要用途：

何时使用监听器：

4.4 监听器示例

 购物车案例：

---

1. 插值（Interpolation）

 1.1、文本

        1.2、html

        1.3、属性

        1.4、class、style绑定

        1.5、表达式

案例：

	
		
		
		
		
		
	
	
		
		

			
文本
			{{msg}}
			
html解析
			{{msg2}}

			
Class与style绑值
			

			
属性
			
			
表达式
			{{number + 1}}

			{{str.substring(0, 5).toUpperCase()}}

			{{ok ? '行' : '不行'}}
		
		
		
	

效果图：

     

2. 指令（Directives）

2.1 什么是指令？

在Vue.js中，指令（Directives）是一种特殊的带有前缀 v- 属性，用于为DOM元素提供特定的行为或功能。指令允许您在模板中添加一些额外的功能，以便更好地控制和交互页面元素。Vue.js提供了一系列内置指令，同时也支持自定义指令。

2.2 常见指令示例

v-if / v-else-if / v-else： 

用于条件渲染，根据条件显示或隐藏元素。

	
		
		
		
		
		
	
	
		
		

			工资：
			
怎么这么牛逼
			
看得过去
			
加油，可以起飞
		
 
	
	
	
 

 效果图：

 v-for：

 用于循环渲染，通过遍历数组或对象的元素，生成重复的元素。

	
		
		
		
		
	
	
				

					
v-for
					{{a}}  

					{{u.name}}  

					{{i}}  
				
				
	

效果图：

 

 下拉框

	
		
		
		
		
	
	
		
		

				
				{{h.name}}
				
			 
				

				{{h.name}}
				

		
 
	
	
 

 效果图：

 动态参数

	
		
		
		
		
	
	
				

					
动态参数
					
					点击有惊喜
				
				
		
		
		
		
	

 效果图：

3. 过滤器（Filters）

3.1 什么是过滤器？

在Vue.js中，过滤器（Filters）是一种用于格式化或处理模板中的数据的功能。它们允许您以一种简单、声明性的方式来处理文本输出，将数据按照特定的规则进行转换、过滤或格式化，然后在视图中显示。

3.2过滤器的使用案例

	
		
		
		
		
		
	
	
		

			
局部过滤器
			{{ msg }}

			{{ msg | filterA }}
			
局部过滤器串行使用
			{{ msg }}

			{{ msg | filterA }}
			{{ msg | filterA | filterB }}
			
局部过滤器传参
			{{ msg | filterC(0, 5) }}

			
全局过滤器
			{{ time }}

			{{ time | fmtDataFilter }}
		
		
	

 效果图：

4. 计算属性和监听器（Computed Properties & Watchers）

4.1 计算属性的作用

• 算属性的用途和优势。

计算属性（Computed Properties）是Vue.js中一个重要的概念，用于处理派生数据以及在模板中动态计算属性值。它们有许多用途和优势，下面讨论一下它们的主要用途和优势：

计算属性的主要用途：

1. 派生数据： 计算属性常用于从已有的数据属性派生出新的数据。这些新数据可以是原始数据的转换、组合、过滤等操作的结果。
2. 复杂逻辑封装： 如果模板中需要使用一些复杂的逻辑来计算属性值，将这些逻辑封装在计算属性中，可以使模板更加简洁和易读。
3. 缓存和性能优化： 计算属性会自动进行缓存，只有当依赖的数据发生变化时，才会重新计算。这可以有效减少不必要的计算，提高性能。

计算属性的优势：

1. 简化模板： 使用计算属性可以将模板中的复杂逻辑和计算移到组件的计算属性中，使模板更加清晰和简洁。这使得模板更易于维护和理解。

2. 高性能： 计算属性的缓存机制确保了只有在相关数据发生变化时才会重新计算，避免了不必要的计算，提高了性能。

3. 可重用性： 计算属性可以在同一个组件内的不同地方多次使用，提高了代码的重用性。

4. 依赖跟踪： Vue.js会自动跟踪计算属性依赖的数据，确保在依赖数据变化时，计算属性会及时更新。

5. 可测试性： 计算属性使得对组件进行单元测试更加容易，因为它们的计算逻辑可以独立测试。

总的来说，计算属性是Vue.js中的一个强大工具，它们简化了模板中的逻辑处理，提高了性能，并使代码更加清晰和可维护。在开发Vue.js应用程序时，合理使用计算属性有助于提高开发效率和代码质量。

4.2 计算属性示例

	
		
		
		
		
	
	
		

		
计算属性
		单价：
		数量：
		小计：{{count}}
		
		
	

效果图：

4.3 监听器的作用

在Vue.js中，监听器（Watchers）用于监视数据的变化，并在数据发生变化时执行特定的自定义逻辑。它们提供了一种更加灵活和精确地响应数据变化的方式，用于处理一些特殊的需求和场景。以下是监听器的主要用途以及在何种情况下使用它们：

主要用途：

1. 执行异步操作： 监听器常用于执行异步操作，例如通过 AJAX 请求获取数据，然后根据获取的数据更新组件的状态。

2. 深度监听： 某些情况下，您可能需要深度监听对象或数组的变化，以便在嵌套属性或数组元素发生变化时触发特定的操作。监听器可以通过设置deep选项来实现深度监听。

3. 自定义逻辑： 当需要在数据发生变化时执行一些自定义逻辑，而不仅仅是更新视图，监听器是一个强大的工具。例如，根据用户选择的选项更新相关数据。

4. 性能优化： 监听器可以用于精确控制哪些数据的变化会触发重新计算或更新，从而提高性能。

何时使用监听器：

1. 异步数据更新： 当需要在数据变化后执行异步操作（例如发起网络请求）时，可以使用监听器。这确保了数据的一致性和可靠性。

2. 深度监听： 当您需要深度监听对象或数组的变化时，以便检测嵌套属性的变化，监听器可以派上用场。

3. 自定义验证或处理逻辑： 如果需要进行自定义的数据验证或处理，以确保数据的合法性，可以使用监听器来实现。

4. 计算属性无法满足需求： 当某些场景下，计算属性不足以满足特定需求，例如需要在多个数据属性之间进行复杂的逻辑操作时，可以使用监听器。

4.4 监听器示例

	
		
		
		
		
	
	
				

					
监听属性
					千米:
					米:
				
				
		
		
		
		
	

效果图：

 

 购物车案例：

    
    
    
    
  
  


    

        
购物车示例
        

            

                

                    
商品
                    
价格
                    
数量
                    
小计
                
            
            

                

                    
{{ product.name }}
                    
￥{{ product.price }}
                    

                        +
                        {{ product.quantity }}
                    
                    
￥{{ product.subtotal }}
                
            
        
        
总价: ￥{{ total }}
    

    

效果图：