vue模板语法（上）

目录

一.插值

什么是插值

建立一个html来编写插值

输出结果

二.指令

什么是指令

建立一个html来编写指令

输出结果

​编辑

动态参数

 输出结果

三.过滤器

什么是过滤器

建立一个html来编写过滤器

输出结果

 4.计算属性&监听属性

什么是计算属性监听属性

建立一个html来编写 计算属性&监听属性

输出结果

五.购物车案例

 使用HTML编写购物车

测试结果

---

一.插值

什么是插值

在Vue中，插值是一种用于将数据绑定到模板中的表达方式。Vue使用双大括号({{}})作为插值的语法，允许将Vue实例中的数据动态地显示在模板中。

使用插值可以在模板中嵌入Vue实例中的数据，如以下示例所示：

  
{{ message }}
  {{ count }}

上述示例中，{{ message }}和{{ count }}分别是Vue实例中的message和count属性的插值展示。当Vue实例中的message和count属性的值发生变化时，对应的插值内容也会自动更新。

插值不仅可以展示简单的变量，还可以进行表达式运算。例如：

  
{{ message.toUpperCase() }}
  {{ count * 2 }}

在上述示例中，message.toUpperCase()将调用Vue实例中message属性的toUpperCase()方法来将字符串转为大写形式，而count * 2将对Vue实例中的count属性进行乘法运算。

需要注意的是，插值仅能用于HTML文本内容中，而不能用于HTML属性中。Vue提供了指令(v-bind)来将数据绑定到HTML属性上。

总之，Vue的插值是一种非常方便的语法，可以将Vue实例中的数据动态地显示在模板中，实现数据和界面的绑定。

建立一个html来编写插值

	
		
		
		
		
				
				
			
			
				
				

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

						
						
表达式
						{{num+1}}
						{{warn.substr(2,3)}}
						
						{{ok==1 ? '很漂亮' : '上不上，看上了'}}
				
						
						
					

输出结果

二.指令

什么是指令

vue的指令是一种特殊的HTML属性，用于在Vue实例中对DOM元素进行操作和控制。根据用途的不同，vue的指令可以分为以下几类：内容渲染指令、属性绑定指令、事件绑定指令、双向绑定指令、条件渲染指令和列表渲染指令。

内容渲染指令用于将数据动态地渲染到DOM中，常见的内容渲染指令有v-text、v-html和v-show。

属性绑定指令用于将数据绑定到DOM元素的属性上，常见的属性绑定指令有v-bind。

事件绑定指令用于监听DOM元素的事件，并在事件触发时执行相应的操作，常见的事件绑定指令有v-on。

双向绑定指令用于实现数据的双向绑定，即数据的改变会自动更新到DOM中，DOM的改变也会自动更新到数据中，常见的双向绑定指令有v-model。

条件渲染指令用于根据条件来渲染或隐藏DOM元素，常见的条件渲染指令有v-if、v-else-if和v-else。

列表渲染指令用于根据数组或对象的数据来渲染列表，常见的列表渲染指令有v-for。

以上是关于vue的指令的概念和分类的简要介绍。

建立一个html来编写指令

	
		
		
		
		
				
	
	
		
		

				
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}}
				
				
				
		
			
				
	

输出结果

动态参数

               
动态参数
				
				点我

	

 输出结果

三.过滤器

什么是过滤器

过滤器是一种常用的设计模式，用于在处理请求或响应时对数据进行过滤或修改。在Java中，过滤器通常用于Web开发中的请求过滤和响应处理。通过将多个过滤器链接在一起形成一个过滤器链（FilterChain），请求或响应可以按照一定顺序经过多个过滤器的处理，直到达到最终的目标资源。过滤器链的每个过滤器都可以在处理请求或响应时进行相关的操作或修改。FilterChain接口定义了过滤器链的基本方法，其中包括doFilter()方法，用于执行下一个过滤器或目标资源的处理。 

建立一个html来编写过滤器

	
		
		
		
		
				
				
	
	
		
		

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

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

			{{msg | filterA}}

			{{msg | filterA | 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();
};

输出结果

 4.计算属性&监听属性

什么是计算属性监听属性

计算属性是Vue的一个特性，它具有计算能力，相当于一个函数。它可以将计算结果缓存作为一个属性使用。计算属性需要在methods或者computed中以方法（函数）的形式定义。之后可以直接使用属性名代替重复的计算，实现代码复用。计算属性会自动重新求值，只要计算原理数据任何一项发生了变化，计算属性就会立即更新，实现动态计算。计算属性支持缓存，当数据源发生变化时，会重新计算。然而，计算属性不支持异步，无法监听异步操作导致的数据变化。如果一个属性是由其他属性计算而来，可以使用计算属性实现一对一或多对一的关系。

监听属性是当被监听的属性发生变化时，回调函数会自动调用，进行相关操作。被监听的属性必须存在，才能进行监听。Vue中的watch默认不会检测对象内部值的改变，只会检测一层的改变。但是通过配置deep:true，可以监听对象内部值的多层改变。

计算属性是单向影响

监听属性是双向影响

建立一个html来编写 计算属性&监听属性

	
		
		
		
		
				
				
			
			
				
				

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

						米：
				
						
						
					

输出结果

五.购物车案例

 使用HTML编写购物车

测试结果