Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解

前言

    前面我们学习了Vue的基础入门，接下来我们学习有关Vue的模板语法，学习Vue语法能提高我们的前端开发效率

  Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom，结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少

一，插值

1.1 文本

          {{msg}}

	
		

			
文本
			 {{msg}}
		
		
	

1.2 html

      使用v-html指令用于输出html代码   

	
		
		
		
	
	
		

			 
html解析
		      

		
		
		
	
	

1.3 属性

	
		
		
		
	 
	
	
	
		

			  
属性
			    

		
		
		
	
	

1.4 表达式

	
		
		
		
	 
	
	
	
		

			
			 
			
			 
			 
			 {{num+10}},
			 {{warm.substr(9,15)}},
			 
			 {{ok==1?'被打了':'不行我要还回去'}}
		
		
		
	
	

二，指令

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

	
		
		
		
	
	
		
			

				
v-if...的使用
				

				丑男
				看得过去
				小帅
				美男子
				吴彦祖
			
				
			
		
		
	

2.v-show

与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码:style="display:none"

	
		
		
		
	
	
		
			

				
v-if|v-else|v-else-if的使用
				

				丑男
				看得过去
				小帅
				美男子
				吴彦祖
			
				 
>v-show-成为大神的人
 
				 
v-if-成为大神的人


			
		
		
	

3 v-for

类似JS的遍历：

   遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

      遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

html代码：

    
    
    
    
    
    




    
v-for的使用
    下拉框：
    
        {{h.name}}
    

    复选框：
    

        {{h.name}}
    



 

4 动态参数：

     从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数

    ...

   同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

  点击事件

   注1：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

	
		
		
		
	
		
			

				
动态参数
				
				点击
			
		

三，过滤器

3.1 局部过滤器

  vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：双花括号插值与v-bind表达式，过滤器应该被添加在js表达式的尾部，使用管道运算符 " | "

	
		
		
				
	
	
		
		

            {{msg}}

			{{msg|single}}

			{{msg|param(0,2)}}
		
		
	

3.2 全局过滤器

拷入date.js（日期格式化）放入项目js目录中，在页面中引入。
定义全局过滤器 

    
    
    
    
 
    




    
全局过滤器
    {{time}}

    {{time | fmtDateFilter}}

四，计算属性&监听器

4.1 计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。

使用场景：当一个属性需要复杂的逻辑运算之后才能获取其值，可以使用计算属性，在一个计算属性中可以完成各种复杂的逻辑，包括运算，方法调用等，只要最终返回一个结果就可以了

语法：computed:{}

    
    
    
    



    单价：
    数量：
    总价：

4.2 监听器

    
    
    
    




    
监听属性
    千米：
    米：



 

五、购物车实现

购物车代码：

 





  

    
购物车
    

      

        

          
商品名
          
数量
          
单价
          
小计
        
      
      

        

          

            
{{ item.name }}
          
          

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

            
{{ subtotal(item) }}
          
        
      
      

        

          

          

            
总计{{ count() }}