vue的语法讲解（上篇）--全网最详细的解答

目录

一.插值⭐

1.1 文本插值

1.2 html

1.3 属性

1.4 表达式

二.指令⭐

  2.1 v-if/v-else-if/v-else的使用

          2.2  v-if 与v-show的区别

  2.3 v-for的使用

 2.4 下拉框的使用

2.5 复选框的使用 

2.6 动态参数 --双击与单击

三.过滤器

 3.1 局部过滤器

3.2 全局过滤器

四.计算属性和监听器（监听属性）⭐

4.1 计算属性

4.2 监听属性

五.购物车案例

 今天的分享就到这啦！！

---

一.插值⭐

        1.1 文本插值

		
		
		
		
	
	
		
		

			{{msg}}
		
		
		
		
		
	

        效果：

        

     1.2 html

          html文本需要使用 v-html来实现效果

		
		

			文本:    {{msg}}  

			html解析:
		
		
		

效果：

1.3 属性

                属性要借用  ：Class来实现属性的转换

	
	
		
		

			文本:    {{msg}}  

			html解析: 

			属性： 

		
		
		

效果：

1.4 表达式

        有计算，截取字段，以及三元运算符

		
		

			文本:    {{msg}}  

			html解析: 

			属性： 

			表达式：{{num+1}} 

				截取：{{warn.substr(0,2)}}

				
				{{ok==1?"我是乔治":"我是佩奇"}}
		
		
		

效果：

二.指令⭐

        2.1 v-if/v-else-if/v-else的使用

                相当于以前的 if...else..

		

			
v-if/v-else-if/v-else的使用
			

			落后了哦~
			加油！！
			还差一点哦~
			就只有一点点啦！
			成功啦！你真棒！

		小于60 不及格（落后了哦~）

		60-70 及格（加油！！）

		70-80 一般（还差一点哦~）

		80-90 良好（就只有一点点啦！）

		大于90 优秀（成功啦！你真棒！）

        效果：

---

      2.2  v-if 与v-show的区别

        v-if 是"条件渲染"的指令，它会根据条件的真假来动态地添加或删除元素及其对应的组件

        v-show 是"条件显示"的指令，它会根据条件的真假来显示或隐藏元素。无论条件是真是假，元素始终存在于 DOM 中，只是通过 CSS 控制其显示状态。

        2.3 v-for的使用

		

		
		
 v-for的使用
		{{u}} 
		
		
		
		

效果：                                                                                                                                         

 2.4 下拉框的使用

		
		
		

		
 下拉框的使用
		
			
				{{u.name}}
			
		
		
		
		
		
	

效果：

2.5 复选框的使用 

		
		
		

			
复选框的使用
		

		{{u.name}}
		
		
		
		
		
		
	

效果：

 

2.6 动态参数 --双击与单击

                它们的不同就是下面圈出来的

        

效果：第一个按钮是单击，第二个是双击

 

---

三.过滤器

        3.1 局部过滤器

        局部过滤器是在组件内部定义的过滤器，只在该组件的模板中可用。

        以下代码中有三个局部过滤器的使用，基本上的作用是差不多的，我觉得可以用数学中的交集并集来理解，或者是用来截取其中一段文字来理解

		

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

	    {{msg | filterA}}

		 {{msg | filterA|filterB}}

		 
局部过滤器传参
		 {{msg | filterC(2,6)}}
		 
		 
		 
		
		
		
		

效果：

3.2 全局过滤器

     全局过滤器是在 Vue 实例化之前定义的过滤器，它可以在所有组件的模板中使用。

        下面主要是一个时间的处理, 首先写一个时间的js---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();
};

接着将其引入我们的项目中

		
		
		

		 
全局过滤器
		 {{time}}

		 {{time|fmtDataFilter}}
		 
		
		
		

效果：                                                                                                                                

---

四.计算属性和监听器（监听属性）⭐

计算属性是单方影响，而监听属性是双方影响

        4.1 计算属性

		
		
		

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

		
		
		
		
	

        效果：

4.2 监听属性

		
		
		

			
			监听属性：

			千米：

			米：
		
		
		
		
	

效果：

---

五.购物车案例

运用上面的知识搭建一个简单的购物车界面，并实现单价数量以及总价的改变

下面是一个界面，用了三个

    
购物车
    
    

      

        

          
商品
          
单价
          
数量
          
小计
        
      
      

        

          
怡宝
          
{{price1 }}
          

            -
				{{num1}}
            +
          
          
{{count1}}
        
		

		  
百岁山
		  
{{price2 }}
		  

		    -
		    {{ num2}}
		    +
		  
		  
{{count2}}
		
		

		  
农夫山泉
		  
{{price3 }}
		  

		    -
		    {{ num3}}
		    +
		  
		  
{{count3}}
		
      
      

        

          
总价：
          
{{total}}
        
      
    
  

接下来，写方法实现：

把价格和数量首先是定死的，为了演示，接着写加号的点击事件，和减号的点击事件，以及小计和总计的计算

现在来看效果吧！！

 今天的分享就到这啦！！