Vue蛙课网学习总结（第三阶段高级部分-主要讲vue生命周期以及ajax跨域）

最新推荐文章于 2021-10-19 14:56:26 发布

武侠㿝卄清

最新推荐文章于 2021-10-19 14:56:26 发布

阅读量183

点赞数

分类专栏： java web开发

本文链接：https://blog.csdn.net/qq_30347133/article/details/111804487

版权

web开发同时被 2 个专栏收录

611 篇文章 2 订阅

订阅专栏

java

574 篇文章 4 订阅

订阅专栏

在这里插入图片描述

1.在插值表达式中使用过滤器（全局过滤器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
	    [v-cloak]{
	     display : none;
	   }
	</style>
</head>
<body>
    
    <div id="app">
            <!--这种过滤器仅仅只能在插值表达式中使用 -->
        <p v-cloak>{{str1 | toUpCase1}}</p>
		   <!--这种使用方法不行 -->
		 <!-- <input type="text" v-model="str1 |  toUpCase1"/> -->
    </div>
    <script>
      <!--核心代码  toUpCase1自定义参数名，第二个参数是函数 -->
	    Vue.filter("toUpCase1", function(value){
			   value=value.toUpperCase();
			return  value;
		})
        var vm = new Vue({
            el : "#app",    //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
            data : {    //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
                //data属性中，存放的是el中要使用到的数据
                //这里的data就是MVVM中M，专门用来表现数据的组件
                "str1" : "aaaa", 
                "str2" : "HelloWorld2"
            }
  });
    </script>

</body>
</html>

2.字符串格式化（以时间格式化为例）

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
	    [v-cloak]{
	     display : none;
	   }
	</style>
</head>
<body>
    
    <div id="app">
            <!--这种过滤器仅仅只能在插值表达式中使用 -->
        <p v-cloak>{{str1 | dataTimeManager}}</p>
		   <!--这种使用方法不行 -->
		 <!-- <input type="text" v-model="str1 |  toUpCase1"/> -->
 

    </div>
    
    <script>
	    
	    Vue.filter("dataTimeManager", function(dataTime){
			 var y= dataTime.getFullYear();
			 var m= parseInt(dataTime.getMonth())+1+""; //月份都是从 0开始的。 浏览器支持方面考虑，日期先转换一下称Int再计算
			 m= m.toString().padStart(2,"0"); //位数不足的话补0处理。 padStart
			 var d= dataTime.getDate(); 
			 d=d.toString().padStart(2,"0"); 
			var h= dataTime.getHours();
			h=h.toString().padStart(2,"0"); 
			var mm=dataTime.getMinutes();
			mm=mm.toString().padStart(2,"0"); 
			var s=dataTime.getSeconds();
			second=s.toString().padStart(2,"0"); 
			// return  y+"-"+m+"-"+d;  这种是字符串拼接形式  ES6之前写法
			return `${y}-${m}-${d} ${h}:${mm}:${second}`;  //这种是新时代写法。
		})
        var vm = new Vue({

            el : "#app",    //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
            data : {    //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
                //data属性中，存放的是el中要使用到的数据
                //这里的data就是MVVM中M，专门用来表现数据的组件
                "str1" : new Date(), 
                "str2" : "HelloWorld2"
            }
			

        });

    </script>

</body>
</html>

3.打折促销：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
	    [v-cloak]{
	     display : none;
	   }
	</style>
</head>
<body>
    
    <div id="app">
            <!--这种过滤器仅仅只能在插值表达式中使用 -->
        <p v-cloak v-for="f in fruitList" :key="f.id">
		
		 {{f.id}}  -----  {{f.price | discount}}  <!--1 ----- 2.4800000000000004 -->   <!--2 ----- 8.16 -->
		
		</p>
		   <!--这种使用方法不行 -->
		 <!-- <input type="text" v-model="str1 |  toUpCase1"/> -->
		 
		 
 

    </div>
    
    <script>
	    
	    Vue.filter("discount", function(value){
		   return   value  * 0.8;
			 
		})
        var vm = new Vue({

            el : "#app",    //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
            data : {    //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
                //data属性中，存放的是el中要使用到的数据
                //这里的data就是MVVM中M，专门用来表现数据的组件
                "fruitList" : [
				  {id: "1",name : "苹果",price : "3.1"},
				  {id: "2",name : "香蕉",price :"10.2"}
				],  
                "str2" : "HelloW orld2"
            }
			

        });

    </script>

</body>
</html>

在这里插入图片描述

局部过滤器：（私有过滤器）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
	    [v-cloak]{
	     display : none;
	   }
	</style>
</head>
<body>
    
    <div id="app">
            <!--这种过滤器仅仅只能在插值表达式中使用 -->
        <p v-cloak v-for="f in fruitList" :key="f.id">
		
		 {{f.id}}  -----  {{f.price | discount}}  <!--1 ----- 2.4800000000000004 -->   <!--2 ----- 8.16 -->
		
		</p>
		   <!--这种使用方法不行 -->
		 <!-- <input type="text" v-model="str1 |  toUpCase1"/> -->
		 
		 <!--私有过滤器 -->
	    <p  >
	        {{str2 | filter3 }}
		</p>
		 
 

    </div>
    
    <script>
	    
	    Vue.filter("discount", function(value){
		   return   value  * 0.8;
			 
		})
        var vm = new Vue({

            el : "#app",    //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
            data : {    //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
                //data属性中，存放的是el中要使用到的数据
                //这里的data就是MVVM中M，专门用来表现数据的组件
                "fruitList" : [
				  {id: "1",name : "苹果",price : "3.1"},
				  {id: "2",name : "香蕉",price :"10.2"}
				],  
                "str2" : "HelloW orld2"
            },
			filters : {
			  filter3 :  function(value){
			      return value + " bbb"  ;
			  }
			}
        });

    </script>

</body>
</html>