Vue模板语法集（上）

1.插值

插值：用双大括号{{}}将数据绑定到模板中，实现简单的数据渲染。例如：

{{message}}

，其中message是一个变量。

    1.1.3 属性

          HTML属性中的值应使用v-bind指令

    1.1.4 表达式

1.1.1 文本

          {{msg}

 1.1.2 html

          使用v-html

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

 效果如下：

	
		
		
		
		
		
	
	
		

			{{msg}}
			
html解析
		{{msg2}}
		
		{{msg4+1}}
	{{sb.substring(3,8)}}
		
		{{ok==1? "你好我是雪豹":"妈妈每天都给我抽点支烟，以及听雪"}}
		
		
	

2.指令：

用v-开头的特殊属性，可以实现DOM操作、条件渲染、循环、事件绑定等功能。例如：

{{message}}

，其中v-if是条件渲染的指令。

核心指令

  (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

  v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

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

  v-for：类似JS的遍历，

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

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

  v-bind

  v-on

  v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   

v-for/v-model一起绑定[多选]复选框和单选框  

使用：

	
		
		
		
		
	
	
		

			
			不及格
			及格
			中等
			良好
			优秀
			{{array}}
			{{a}}||
	          {{u.name}}喜欢{{u.hobby}}今年{{u.age}}
			

			
				
			{{h.name}}
			
			

			
{{h.name}}
			
v-show
						
v-show-上优秀学员名单
						
v-if-上优秀学员名单
		
		
	

效果：

 3.动态参数

动态参数：除了用固定的指令名称，还可以使用动态参数来动态绑定数据。例如：{{ message }}，其中v-bind动态绑定href属性的值。

	
		
		
		
		
	
	
		

			
			不及格
			及格
			中等
			良好
			优秀
			{{array}}
			{{a}}||
	          {{u.name}}喜欢{{u.hobby}}今年{{u.age}}
			

			
				
			{{h.name}}
			
			

			
{{h.name}}
			
v-show
						
v-show-上优秀学员名单
						
v-if-上优秀学员名单
		
动态参数
		
		点我
		

		
	

4.过滤器

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

局部过滤器

	
		
		
		
		
	
	
		

			
局部过滤器
			{{msg}}
			
局部过滤器串行使用
		{{msg | filterA | filterB}}
		
局部过滤器传参
			{{msg | filterC(2,5)}}
		
		
	

全局过滤器

	
		
		
		
		
		
	
	
		

			
局部过滤器
			{{msg}}
			
局部过滤器串行使用
		{{msg | filterA | filterB}}
		
局部过滤器传参
			{{msg | filterC(2,5)}}
			
全局过滤器
    没有过滤器的结果：		{{time}}
	有过滤器的结果：{{time|fmtDate}}
		
		
		
	

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

 结果：

5.计算属性监听属性

计算属性

	
		
		
		
		
	
	
		

			
计算属性
			单价：
			数量：
			小计:{{count}}
		
		
	

效果：

 改为2

计算属性特点：一方影响另一方（单向）

 监听属性：

	
		
		
		
		
	
	
		

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

效果：

 监听属性特点：两方互相影响（双向）

实战案例：

购物车：

	
	
	
	



	
购物车
	

		

		

			
物品
			
单价
			
数量
			
小计
		
		
		

		

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

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

			
总价
			
{{ total }}
		
		
	

 效果：