你不能不了解的Vue【模板语法上集】!

我是默，一个在CSDN分享笔记的博主。

在这里，我要推荐给大家我的专栏《Vue》。

无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。

让我们在Vue的世界里畅游吧！

如果感觉还不错的话请记得给我点赞哦！

期待你的加入，一起学习，一起进步！

一.Vue插值 

1.文本

2.html样式渲染

 3.表达式

4.源码

	
		
		
		 
	
		
		
		
		

			
文本
			{{msg}}
			
			
样式渲染
			
			
			
表达式
			{{num+1}}
			{{warn.substring(0,2)}}
			
			{{ok==1? '你没了' : '一起上路'}}
			
			
		
		
		
	
	
	

二.插值

1.源码

	
		
		
		 
	
		
		
		

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

			不行
			还行
			一篇
			辣鸡
			ok'
			
			
v-show
			v-if 和v-show区别
			展示
			展示
			
			
v-for
			{{a}} 
			{{u.name}}
			
			
下拉框
			
				{{h.name}}
			
			
			

			{{h.name}}
			
		
		
		
	
	
	

2.v-if

2.v-if 和v-show区别

3.变量数据以及 下拉框和

---

三.过滤器

1.局部过滤器

1.1语法

new Vue({

 filters:{'filterName':function(value){}}    

});

在其中 filterName是过滤器名字，根据自己需求即可

常见的过滤器使用

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

{{ name | capitalize }}

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联    

         {{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

         {{ message | filterA('arg1', arg2) }}

1.2实例

	
		
		
		 
	
	
		
		
		

					{{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
				
			

 1.3效果展示

2.全局过滤器

2.1语法

全局过滤器

Vue.filter('filterName', function (value) {

 // value 表示要过滤的内容

});

 其核心作用为：在全局对于我们要过滤的内容进行过滤

 2.2实例

导入html界面

	
		
		
		 
	
	
		
		
	    
	    	
	    		
	    		

	    			{{msg}}_过滤之前

	    			{{msg | all}}_过滤之后
	    		
	    	
	    	
	
	
	

导入时间的js用于验证方法

//给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();
};

2.3效果图

四.计算属性&监听属性

1.计算属性

1.1语法

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

   computed:{}

1.2实例

	
		
		
		 
	
	
		
		
	    
	    	
	    		
	    

	    			千米：

	    			米：
	    		
	    	
	
	
	
	

   2.监听属性

  2.1语法

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

   watch:{}

2.2实例

	
		
		
		 
	
	
		
		
	    
	    	
	    		
	    	

	    				单价：
	    				数量：
	    				总价：
	    			
	    		
	
	
	

 5.购物车（通过Vue实现）

1.最基础代码购物车

通过纯js代码实现，没有借助其他框架代码

    
    


    
Shopping Cart
 

     

         

             
商品名字
             
商品图片
             
商品价格
             
增加商品
             
删除商品
         
     
     

         

             
小兵嘎子
             

             
￥19.99
             

                 -
                 
                 +
             
             
￥39.98
         
     
     

         

             
Total:
             
$69.95
         
     
 
    

        Checkout
    
    

 1.2效果展示

2.通过Vue来实现购物车功能 

2.1.代码

小编，使用Vue.js和jQuery库实现。用户可以通过增加或减少商品的数量来调整购物车中商品的数量，同时总计费用会实时更新。

在Vue实例中，小编定义了一个items数组，每个元素代表一个商品对象，包含了商品名字、图片路径、价格和数量，总计属性。calculateSubtotal方法用于计算每个商品的小计，calculateTotal方法用于计算购物车的总计。

页面中使用了Vue的数据绑定和事件监听，当用户点击增加或减少数量按钮时，会触发对应的Vue方法来更新商品数量，并重新计算小计和总计。最终，页面会根据数据的变化进行实时回显。

    
    
    
    


    

        

            

                

                    
商品名字
                    
商品图片
                    
商品价格
                    
商品数量
                    
商品小计
                
            
            

                

                    
{{ item.name }}
                    

                    

                    

                        -
                        
                        +
                    
                    
{{ calculateSubtotal(item) }}￥
                
            
            

                

                    
总计:
                    
{{ calculateTotal() }}￥
                
            
        
    

    

2.2展示