Vue基础语法（插值、指令、过滤器、计算属性与监听属性）

目录

插值

 指令

 过滤器

 计算属性和监听属性

Vue购物车结算案列 

---

插值

    1.文本

    2.html

    3.属性

    4.class、style绑定

    5.表达式

双大括号插值（Mustache语法）：
双大括号插值是Vue中最常用的插值语法，使用双大括号{{ }}将表达式包裹起来，表达式将会被求值后显示在HTML中。

{{msg}}

 案列

源码

	
		
			
			
		
		
	
	
		

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

			
			
表达式
			{{num+1}}
			{{warn.substr(0,2)}}
			
			{{ok==1?'大聪明':'臭傻逼'}}
		
		
	

 指令

在Vue中，指令是用于将特定行为应用于DOM元素的特殊属性。Vue提供了许多内置指令，可以用于处理常见的DOM操作和数据绑定

v-bind插值：v-bind指令用于在HTML属性中插入动态的数据。可以简写为:。

上述代码中，:src将会把imageSrc变量的值作为src属性的值进行插值。

v-on插值：v-on指令用于在HTML事件处理程序中插入动态的方法。可以简写为@。

Click Me

上述代码中，@click将会将handleClick方法插入到click事件处理程序中。

v-html插值：v-html指令用于将数据作为原始HTML插入到元素中。

上述代码中，htmlString变量的值将会被作为原始HTML插入到

元素之中。

v-text插值：v-text指令用于替代双大括号插值，将指定的数据直接作为文本内容插入到元素中。

上述代码中，message变量的值将会作为

元素的文本内容。
 

 

源码

	
		
		
		
		
	
	

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

		麻花佬
		屌丝
		叼毛
		良好青年
		靓仔
		60以下 麻花佬
		60-70 屌丝
		70-80 叼毛
		80-90 良好青年
		90以上 靓仔
		
v-show
		v-if与v-show的区别？

		展示
		展示
		
v-for
		{{a}}  
		  {{i}}
		
		
			{{h.name}}
		
		
		

			{{h.name}}
		
		
		
动态参数
		
		点我
	
	
		
	

 过滤器

在Vue.js中，过滤器（Filters）是一种用于格式化文本输出的特殊函数。它可以应用于绑定表达式中的数据，在渲染过程中将数据转换为所需的格式。

 

源码

	
		
		
		
		
		
	
	

		
局部过滤器基本应用
		{{msg}}

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

		{{msg | filterB}}
		
局部过滤器传参
		{{msg | filterC(3,10)}}

		
全局过滤器
		{{time}}

		{{time | fmtDateFilter}}
	
	
		
	

date.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();
};

 计算属性和监听属性

计算属性（Computed）：计算属性是根据其他属性的值计算得出的属性，它会根据依赖的属性自动更新。

监听属性（Watch）：监听属性允许你在某个属性发生变化时执行自定义的逻辑。

 源码

	
		
			
			
		
	
	
		

			
计算属性
			单价：
			数量：
			小计：{{count}}
			
监听属性
			千米：

			米：
		
		
	

计算属性跟监听属性的区别

计算属性和监听属性是Vue中用于处理数据变化的两种方法，它们的主要区别如下：

1. 计算属性：

   • 计算属性是Vue中的一个特殊属性，用于定义一个依赖其他属性计算得来的属性。
   • 计算属性会根据它所依赖的属性的变化而自动重新计算，只有当依赖属性发生变化时，计算属性才会重新求值。
   • 计算属性的值会被缓存起来，只有当依赖的属性发生变化时，才会重新计算。

2. 监听属性：

   • 监听属性是通过watch选项来定义的，用于监听某个属性的变化，并在属性变化时执行特定的逻辑。
   • 监听属性需要显式地定义监听函数，并在函数中处理属性变化时的逻辑。
   • 监听属性适用于需要监听并处理属性变化的情况，可以执行更复杂的逻辑，如异步操作或调用其他方法。

总结来说，计算属性适用于通过其他属性计算得到的属性值，而监听属性适用于需要监听并处理属性变化的情况。计算属性会自动计算并缓存值，而监听属性需要显式地定义监听函数来处理属性变化。

Vue购物车结算案列 

结合我们当前学的内容简单的写一个结算

	
		
			
			
		
	
	
		

		  
		  

		    

		      

		        
商品名称
		        
单价
		        
数量
		        
小计
		      
		    
		    

		      

		        
{{ item.name }}
		        
{{ item.price }}
		        

		          -
		          {{ item.quantity }}
		          +
		        
		        
{{ calculateSubtotal(item) }}
		      
		    
		    

		      

		        
总计：
		        
{{ calculateTotal() }}