Vue的详细教程--基础语法【上】

Welcome Huihui's Code World ! !

接下来看看由辉辉所写的关于Vue的相关操作吧

目录

Welcome Huihui's Code World ! !

一.插值

1.文本

2.html

3.属性&class绑定&style绑定

4.表达式

二.指令

1.v-if&v-else&v-else-if

2.v-show

3.v-for

三.动态参数

四.过滤器

1.局部过滤器

2.全局过滤器

五.计算属性&监听属性

1.计算属性

2.监听属性

 六.购物车案例

效果

代码

---

一.插值

1.文本

	
		
		
		
	
	
		
			

				
文本
				{{content1}}
			
		
		
	

2.html

	
		
		
		
	
	
		
			

				
文本
				{{content1}}
				
html
				

			
		
		
	

注意！！！

3.属性&class绑定&style绑定

	
		
		
		
	
	
		
		
			

				
				
class
				

			
		
		
	

4.表达式

	
		
		
		
	
	
		
		
			

				
表达式
				{{content4+2}}

				{{content5.substr(0,4)}}

				
				{{content6==1 ?'是的':'不细啊'}}
			
		
		
	

二.指令

1.v-if&v-else&v-else-if

	
		
		
		
	
	
		
			

				
v-if...
				

				情商低
				情商忽上忽下
				情商一般
				中等情商
				高情商
			
				
			
		
		
	

2.v-show

3.v-for

	
		
		
		
	
	
		
			

				
v-if...
				

				情商低
				情商忽上忽下
				情商一般
				中等情商
				高情商
				
v-if和v-show的区别
				if
				show
				
v-for
				{{a}}  

				{{d.name}}  

				{{i}}  

				
				
					{{h.name}}
				

				
				

					{{h.name}}
				
				
			
		
		
	

三.动态参数

	
		
		
		
	
		
			

				
动态参数
				
				click
			
		

四.过滤器

1.局部过滤器

	
		
		
		
	
	
		
			

				
动态参数
				
				click
				
				
局部过滤器
				{{content}}

				{{content | filter1}}

				

				{{content}}

				{{content | filter1 | filter2}}

				
过滤器传参
				{{content | filter3(4,9)}}

				

				
				
			
		

2.全局过滤器

	
		
		
		
	
	
		
			

				
动态参数
				
				click
				
				
				
全局过滤器
				{{time}}

				{{time | all }}
				
			
		

五.计算属性&监听属性

1.计算属性

	
		
		
		
	
	
		
			

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

2.监听属性

	
		
		
		
	
	
		
			

				
监听属性
				千米：
				米：
			
		
		
	

 六.购物车案例

效果

代码

  

    
购物车
    

      

        

          
商品
          
数量
          
单价
          
小计
        
      
      

        

          

            
            
{{ item.name }}
          
          

            -
            {{ item.quantity }}
            +
          
          
{{ item.price }}
          

            
{{ calculateSubtotal(item) }}
          
        
      
      

        

          

          

            
总计{{ calculateTotal() }}
          
        
      
    
  

 好啦，今天的分享就到这了，希望能够帮到你呢！