Vue语法--完成购物车案例

一、模版语法

1.1 插值

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

html模板语法: 这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。

1.1.1 文本

        直接使用{{xxx}}的形式，标签将会被替换成为数据对象（data）上xxx属性值，当绑定的数据对象上的xxx属性值发生变化时，插值处的值也会发生变化（双向绑定）

       {{msg}}

1.1.2 html解析

如果要输出html格式的数据，需要使用v-html指令。

 

1.1.3 属性

HTML属性中的值应使用v-bind指令。类型与jQuery中的$("#xxx").attr(Name，Val)

	
		
		
		
		
		
		
	
	
		
		

			
哈哈
		
		
		
	

 

1.1.4 表达式

 Vue提供了完全的JavaScript表达式支持:

• {{str.substr(0,3)}}
• {{ number + 1 }}
• {{ ok ? 'YES' : 'NO' }}
• 我的Id是js动态生成的

这些就不一一演示了，大家自己去玩

1.2.3 动态参数

注意：在动态参数中，作为参数的变量名（如：attrname）要全部小写，否则无效 ！！

	
		
		
        
		
	
	
		
		

			
动态参数
			
			动态参数
		
	
	

Vue为v-bind和v-on这两个最常用的指令，提供了特定简写 

指令	简写	示例
v-bind:xxx	:xxx	v-bind:href 简写为 :href
v-on:xxx	@xxx	v-on:click 简写为 @click

二、过滤器

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

2.1 局部过滤器

	
		
		
        
		
	
	
		
		

            {{msg}}

			{{msg|single}}

			{{msg|param(9,10)}}
		
		
	

2.2 全局过滤器

时间转换案例： 

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};
 
function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

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

	
		
		
		
        
		
	
	
		
		

			
{{date | fmtDate}}
			无过滤器:

			{{date}}
		
		
	

三、监听器

监听属性 watch，我们可以通过 watch 来响应数据的变化
   

语法：watch:{}

示例： 米和厘米的单位换算

	
		
		
        
		
	
	
		
		

			
监听属性
			米：
			厘米：
		
	
	

四、完整购物车案例

    
    
    
    
    
    
    




    
东天帝商城
    

    

    


    

        

            

                
                
            
            
商品名称
            
商品价格
            
商品数量
            
商品总价
        

        
        

            

                
                
            
            
{{ good.name }}
            
{{ good.price }}
            

                
                
            
            
{{ good.number * good.price }}
        
        

            

                
                总价：{{ totalPrice }}
            
        
    

    

 

五、计算属性--简易购物车（无复选框）

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

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

语法：computed:{}

    
    
    
    
    
    
    
   
    



    
东天帝商城
    









    

        
        
商品名称
        
商品价格
        
商品数量
        
商品总价

    


    
男人得装
    
{{man}}
    
   
    
{{man1}}


    
和天下
    
{{smoke}}
    
   
    
{{smoke1}}


    
奥特曼变身手环
    
{{Ultraman}}
    
   
    
{{Ultraman1}}


   
总价：
    
{{sum}}