Vue复习补充


阅读数: 次   

一:前端表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    <style>   
        .hFontColor{
            color: brown
        }

        .hAlign{
            text-align: center
        }

        td{
            text-align: center
        }    
    </style>
    
</head>
<body>   
    <div id="app">        
        <!--
            模拟表结构：
                student
                id：编号
                name：姓名
                gender：性别
                age：年龄
        -->
        <!--          
            基础建设：
                搭建用来填写信息的文本框
                搭建表格结构
                搭建添加信息按钮，删除信息的按钮 
                搭建一些基础的样式
        -->
        <!--
            vuejs建设：
             data：
                    模型
                    对象集合，编号，姓名，性别，年龄
             methods：
                    添加方法，删除方法
                    扩展：查询信息列表方法
        -->
        
        <h3 :class="hstyle">学生信息管理系统</h3>        
        <hr width="100%">
        <br/>

       <!-- 搭建添加操作相关信息 -->
        编号：<input type="text" v-model="id"/>&nbsp;&nbsp;<!-- A0001 -->
        姓名：<input type="text" v-model="name"/>&nbsp;&nbsp;
        性别：<input type="text" v-model="gender"/>&nbsp;&nbsp;
        年龄：<input type="text" v-model="age"/>&nbsp;&nbsp;

        <input type="button" value="保存学员" @click="save"/>
        <br/>
        <br/>

        <!-- 搭建表格元素 -->
        <table border="1" width="100%" align="center" cellpadding="6px" cellspacing="0px">
            <tr>
                <td>序号</td><!-- 1,2,3,4,5.... -->
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>操作</td><!-- 为删除超链接提供入口 -->
            </tr>

     <!-- 内容部分 读取模型sList中的数据 使用v-for的形式对sList做遍历-->
     <!--
       每一个s，就是每一个遍历出来的学生对象，将来在取得学生信息的时候，通过{{s.属性}}来取值
       i变量是遍历出来元素的下标，从0开始做标记，在序号中，应该是以下标+1的方式开始标记（序号从1开始计数）
     -->
            <tr v-for="(s,i) in sList">

                <td>{{i+1}}</td>
                <td>{{s.id}}</td>
                <td>{{s.name}}</td>
                <td>{{s.gender}}</td>
                <td>{{s.age}}</td>
                <td>
      <!--
     使用href="javascript:void(0)"将超链接的href行为禁用掉，该超链接只能以绑定事件的形式来触发行为
     与之前学习的click的prevent的用处是一样的
        -->
                    
      <!--
         根据编号执行删除操作                        
          注意：
              在方法中传递实参，不需要使用插值表达式
              使用方式：del(s.id)
              而不是：del({{s.id}})
       -->
       <a href="javascript:void(0)" @click="del(s.id)">删除学员</a>
                </td>
            </tr>
        </table>
    </div>
    
    <script>
    

  var vm = new Vue({
       el : "#app",    
       data : {
       sList : [
            {id:"A0001",name:"zs",gender:"男",age:"23"},
            {id:"A0002",name:"ls",gender:"男",age:"24"},
            {id:"A0003",name:"ww",gender:"男",age:"25"}
               ],

       id : "",
       name : "",
       gender : "",
       age : "",
       hstyle:{hFontColor:true,hAlign:true}

       },
     //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
     methods:{
          save(){
             /*
                通过在页面中对文本框进行信息的完善（对视图V进行数据的填充）
                根据使用对于视图中值的绑定方式是v-model的方式，会实现双向数据绑定
                通过对视图的数据的填充，同时也是对模型中数据的填充
                在我们触发的save方法当中，取得模型中的值，就相当于是取得了在页面文本框填充的数据
                将这些数据收集起来，形成一个对象，将该对象添加到我们的sList对象数据中就可以了

              */

         var s = {id:this.id,name:this.name,gender:this.gender,age:this.age};
                  this.sList.push(s);
                },

         del(id){
               //id:需要删除记录的id，根据id来进行删除             
                    /*
                        遍历sList中所有的对象
                        从每一个对象中取得id信息，将每一个id与参数id进行比较
                        如果id值相等，证明我们找到了需要删除的记录
                        将该记录从sList中移除掉
                    */

                    for(var i=0;i<this.sList.length;i++){
                        //如果id值相等，证明我们找到了需要删除的记录
                        if(this.sList[i].id==id){
                            //将该记录从sList中移除掉
                            this.sList.splice(i,1);
                        }
                    }
               }
            }
        });
    </script>
</body>
</html>

二:过滤器

1
2
3
4
5
6
7
8
9
过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单的函数。
在实际项目开发中根据实际的需求，可以自己编写所需要的过滤器。
过滤器经常用在数据所需的格式化时使用：
例如
字符串的格式化
以及日期时间的格式化等等
过滤器最大的作用就是体现其复用性，如果我们在前端处理的某些文
本信息每一次都需要经过重复的特殊处理，那么我们一定是要编写一
个过滤器来使用

1.全局过滤器的使用

1
2
3
4
5
6
7
全局过滤器指的是所有vm对象都能共享使用的过滤器。
过滤器能够使用在两个地方：
（mustache）插值表达式/指令（bind属性）
过滤器的语法：使用管道符 "|" 过滤器在插值表达式中的使用
案例：将所有的字母变成大写
案例：定义格式化时间的全局过滤器 过滤器在v-for中的使用 案例：将所有的商品进行打折（打8折，5折...） 以上的案例，我们都是使用在了插值表达式当中，除了使用在插值表 达式中之外，我们的过滤器还可以说使用在 bind 属性指令当中，该 形式没有插值表达式使用的广泛。
可以连续使用多个过滤器

将小写字母变大写案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    
    
    <div id="app">
<!--
	使用过滤器语法:
	{{内容 | 过滤器}}
-->
       <P>{{str1 | ucase}}</P>
    </div>


    <script>
        //自定义全局过滤器
        /*
        	语法:Vue.filter
        	参数1:为该过滤器命名
        	参数2:函数,指定过滤器的行为
        	函数参数:我们需要操作的数据
        */
        Vue.filter("ucase",function(value){
          //通过value的形参取得了需要操作的数据
          //将值处理为大写字母
           value = value.toUpperCase();
           return value;
         })
        
        var vm = new Vue({

            el : "#app",
            data : {
                "str1" : "aaa"
            }

        })

    </script>

</body>
</html>

改变日期格式案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
       
    <div id="app">

       <P>{{currentTime | dateTimeManager}}</P>
    </div>


    <script>       
        Vue.filter("dateTimeManager",function(dateTime){
          //取得日期时间的具体数值
          //将年月日时分秒分别取出,格式化为2019-01-01 10-10-10
            //2019-01-01 10-10-10 或者 2019-01-01 10:10:10 都是19位,char(19)的效率高
          var y = dateTime.getFullYear();
          var m = (dateTime.getMonth()+1+"").toString().padStart(2,"0");
          var d = dateTime.getDate().toString().padStart(2,"0");
          var h = dateTime.getHours().toString().padStart(2,"0");
          var mm = dateTime.getMinutes().toString().padStart(2,"0");  
          var s = dateTime.getSeconds().toString().padStart(2,"0");
        //在ES5中,我们必须使用+(拼接符)的形式对字符串进行拼接
        //return y+"-"+m+"-"+d;
        
        //在ES6中,仅仅使用反引号"`"来解决复杂的字符串操作
        return `${y}-${m}-${d} ${h}-${mm}-${s}`;
       })
        
        var vm = new Vue({

            el : "#app",
            data : {
                "currentTime" : new Date()
            }

        })

    </script>

</body>
</html>

打折:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
       
    <div id="app">

       <p v-for="f in fruitList" :key="f.id">
          {{f.name}}-----------{{f.price | disCount8}}                                 
        </p>
    </div>


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

            el : "#app",
            data : {
                "fruitList" : [
                    {"id":"A0001","name":"苹果","price":10},
                    {"id":"A0001","name":"桃子","price":16},
                    {"id":"A0001","name":"西瓜","price":20}
                ]
            }

        })

    </script>

</body>
</html>

连续使用多个过滤器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
       
    <div id="app">
	<!--
		连续使用多个管道符来连接多个过滤器
		{{str1 | 过滤器1 | 过滤器2 | 过滤器3...}}
	-->
        <p>{{str1 | filter1 | filter2}}</p>
    </div>


    <script>       
        Vue.filter("filter1",function(value){
          return value.toUpperCase();
       })
        Vue.filter("filter2",function(value){
          return value+"123";
       })
        
        var vm = new Vue({

            el : "#app",
            data : {
                "str1":"aaa"
            }

        })

    </script>

</body>
</html>

2.私有过滤器的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
私有过滤器指的是在指定的vm对象中来定义过滤器，该过滤器只在 当前的vm对象中会发挥作用，其他的vm对象不能使用的。
语法：在vm对象中指定过滤器相关的属性和属性值

vm
filters:{
filter1
filter2
...
}

如果全局过滤器和私有过滤器的命名是一样的，那么默认使用的是私
有过滤器。
系统在使用过滤器的时候，根据名称去找相应的过滤器，先找私有过
滤器，如果没有私有的，则继续通过该名称寻找全局过滤器。
这种方式也被称之为就近原则（优先使用的是范围窄的） 。

过滤器的使用：
可以同时使用多个过滤器，这多个过滤器在一起使用的时候，是
具有信息传递性的。先处理排在前面的过滤器，得到结果传递到下一
个过滤器中继续进行后续处理。

三:指令

1.全局指令

1
2
3
4
5
6
7
8
9
10
指令与属性相似，是对指定元素样式或行为的赋予。
我们可以在实际项目开发中自定义一些我们所需的指令来有效的管理元素。
在页面中自定义的全局指令，可以为每一个vm对象中的元素提供服务，只要vm中的标签引用了全局指令那么一定会即时生效，一般情 况下我们普遍做的都是自定义全局指令来管理元素。
值得一提的是自定义指令需要经常搭配vuejs中的钩子函数来进行操 作。在我们学习完指令之后，将在下一个章节（对象的生命周期）对
钩子函数进行详细的学习。
自定义全局指令的语法：
Vue.directive()
案例：自定义一个全局指令让文本框自动获取焦点
我们也可以通过参数为指令进行赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>       
    <div id="app">
        <!--
			使用自定义全局指定来操纵该元素的样式,让文本框中输入的信息改变颜色
		-->
        请输入信息:<input type="text" v-dt1>
    </div>


    <script>       
        //自定义全局指令
        /*
        	directive提供两个参数
        	参数1:关于指令的名称,在定义的时候前面不需要加"v-"前缀,但是使用的过程中一定要加上"v-"前缀
        例如我们现在为自定义取的名字叫做dt1(不加v-),那么我们在将来的元素中使用的时候要用v-dt1(加上v-)
        	参数2:json对象,在这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
        */
        Vue.directive("dt1",{
            /*
            	以下定义了3个函数,这三个函数是与vuejs对象生命周期密切相关的函数
            	在每个函数中,第一个参数el(表示element),表示的是指令操作的元素
            	注意:每一个el对象,同时也是一个原生js对象(dom对象)
            	
            	在未来的开发中:
            	使用bind函数来操作元素的样式(css)
            	使用inserted函数来操作元素的行为(js)
            */
            
            //bind函数,每当指令函数绑定到该元素上的时候,会立即执行这个bind函数,该函数只执行一次
            bind: function(el){
                //将指定元素的文本信息改变颜色
                //执行结果:文本框中的信息变红
                el.style.color="red";
                
                //页面加载完毕后,让指定的文本框自动获取焦点
                /*
                	执行结果: 文本框并没有自动取得焦点
                	在元素刚绑定了指令的时候,还没有插入到dom中去,这时候调用focus方法一定是没有作用的
                	一个元素,只有插入dom之后,才能够触发dom相关的方法(例如使用focus方法获取焦点)
                */
                //el.focus();
            },
            
            //inserted函数:表示元素插入到dom中的时候,会执行该函数,该函数只会执行一次
            inserted: function(el){
                //执行结果:文本框成功地自动获取到焦点
                el.focus();
            },
            
            //update函数,当vuejs中的函数更新的时候,会触发该函数,元素是可以随时更新的,所以该函数可以触发多次
            update: function(el){
                //对于当前指令相关的测试,该函数暂时用不到
            }
        })
        
        var vm = new Vue({

            el : "#app",
            data : {
                "str1":"aaa"
            }

        })

    </script>

</body>
</html>

动态赋值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>       
    <div id="app">
        <!--
			使用自定义全局指定来操纵该元素的样式,让文本框中输入的信息改变颜色
		-->
        请输入信息:<input type="text" v-dt1=>"'green'"
    </div>


    <script>       
       
        Vue.directive("dt1",{
            
            
            //bind函数,每当指令函数绑定到该元素上的时候,会立即执行这个bind函数,该函数只执行一次
            bind: function(el,binding){
              
                //执行结果:文本框中的信息会随着传递的参数值的变化而变化
                el.style.color=binding.value;
                
            }
        })
        
        var vm = new Vue({

            el : "#app",
            data : {
                "str1":"aaa"
            }

        })

    </script>

</body>
</html>

2.私有指令

1
2
3
4
5
6
私有指令是指定义在指定的vm对象中，只针对当前vm对象描述的 元素生效的指令。其他的vm对象中的元素，是不能够使用该指令的。 语法：
vm
directives:{ 
指令1..
指令2...
}

四:vue生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
生命周期是指Vuejs对象从创建到销毁的全过程
生命周期1：创建阶段
1.newVue()： 执行代码 varvm=newVue({}),表示创建一个 Vue 对象 （实例） 。 2.Init（Events&Lifecycle） :执行完以上代码后步入到对象初始化的前期 阶段，表示通过以上代码我们创建了Vuejs对象，此时，在新建的对 象身上，具备了一些生命周期相关的函数（生命周期的钩子函数）和 默认的事件，但是其他的相关的组件还没有被创建（data、methods、 filter等等都没有被创建出来）。
执行Init（Events&Lifecycle）之后，钩子函数都被创建出来，马上 调用生命周期函数beforeCreate，在该函数执行的时候，我们最常使 用的组件data和methods等，都还没有被创建出来。
3.Init(injections&reactivity):该阶段是对象初始化的后期阶段。执行 Init(injections&reactivity)的方式是调用生命周期函数created。在该函 数中，data和methods都已经被初始化好了。 
也就是说，如果要使用methods中的方法，或者是操作data中的 数据，最早可以在created方法中来进行操作。
4.Init对象初始化阶段执行完毕后，通过对元素以及模板进行判断， 系统开始编辑模板，将Vue代码中的指令进行执行，然后在内存中生 成一个编辑好的模板字符串，最终将该模板字符串渲染为内存中的 DOM。
但是此时集锦只是在内存中渲染好了模板，并没有将模板挂载到页面 中去。该阶段执行完毕后，执行beforeMount方法。
5.Createvm：该阶段是将内存中编译好的模板，替换到浏览器的页面中。该阶段执行完毕后，执行mounted方法。只要执行完了mounted 方法，就表示整个Vue对象已经初始化完毕了，此时正式脱离创建阶 段进入到运行阶段。如果要通过某些插件操作页面上的DOM 节点， 最早是要在mounted中进行


生命周期2：对象运行阶段
6.VirtualDOM:该阶段会根据data中的最新数据，重新渲染出一份最 新的DOM树，当最新的内存DOM树被更新了之后，会把最新的DOM 树重新渲染到页面中去，这时候就完成了使用模型Model去渲染视图 View的过程。 该阶段的执行会使用到两个函数beforeUpdate和updated,这两个函数 会根据data数据的变化，可重复的执行多次。
当beforeUpdate方法执行的时候，页面中的显示还是以前的数据，但 是data中保存的是更新后的新数据，页面此时还没有和最新的数据保持同步。 updated函数执行的时候，页面和data数据已经保持同步了，都是最 新的数据了。 


生命周期3：对象销毁阶段
7.Teardown（拆卸），该阶段为对象销毁的阶段，当对象实例运行完 毕后，如果达到了对象销毁的条件，执行beforDestroy函数，该函数 的执行正式标志着对象从运行阶段进入到了销毁的阶段。
当beforDestroy函数执行的时候，对象身上所有的组件data、 methods、 filter、directive等组件都还处于可用状态（因为对象只是步入到了销 毁的阶段，还没有销毁） ，该函数执行完毕后，对象正式销毁。 8.Destroyed:该阶段为对象销毁后的阶段。该阶段会执行destroyed函 数，当该函数执行的时候，对象已经被销毁了，里面的data、methods 等相应的组件也不能使用了。 以上生命周期中使用的所有的函数，就是Vuejs生命周期中最重要的 钩子函数。

五:响应ajax

使用vue-resource插件响应:

1.get请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <!--

        导入vue-resource类库之后，就可以使用this.$http.xxx来实现ajax功能了

        注意：对于idea，直接复制粘贴过来的文件有可能报404错误（资源定位不到的）
            这时我们可以先手动创建这个文件，在复制粘贴里面的内容到该文件中就可以了


    -->
    <script src="vue/vue-2.4.0.js"></script>
    <script src="vue/vue-resource-1.3.4.js"></script>
</head>
<body>

    <div id="app">

        <button @click="getStudent">点击取得学生信息</button>

        <br/>
        <br/>

        编号：<span>{{id}}</span><br/>
        姓名：<span>{{name}}</span><br/>
        年龄：<span>{{age}}</span><br/>

    </div>

    <script>

        var vm = new Vue({

            el : "#app",
            data : {

                "id" : "",
                "name" : "",
                "age" : ""

            },
            methods : {

                getStudent(){

   //发出ajax请求，取得学生信息，在页面中局部刷新学生信息
   //this.$http.get("请求路径",请求参数，then(回调函数))
   //对于参数的传递，get请求和post请求的参数传递的语法是不同的，这一点有别于其他的前端语言
   //对于get请求，必须是在路径的后面以url?key1=value1&key2=value2&key3=value3这种传统的形式来传递参数
      this.$http.get("myServlet01.do?name=zs123").then(function (data) {
             //通过data.body的形式来拿到服务器返回成功的数据
             //alert(data.body.id);

             //为页面填写值
             /*this.id = data.body.id;
               this.name = data.body.name;
               this.age = data.body.age;*/

              data = data.body;

              this.id = data.id;
              this.name = data.name;
              this.age = data.age;
                    })
                }
            }
        })
    </script>

</body>
</html>

2.post请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <!--
        导入vue-resource类库之后，就可以使用this.$http.xxx来实现ajax功能了

        注意：对于idea，直接复制粘贴过来的文件有可能报404错误（资源定位不到的）
            这时我们可以先手动创建这个文件，在复制粘贴里面的内容到该文件中就可以了
    -->
    <script src="vue/vue-2.4.0.js"></script>
    <script src="vue/vue-resource-1.3.4.js"></script>
</head>
<body>

    <div id="app">

        <button @click="getStudent">点击取得学生信息</button>

        <br/>
        <br/>

        编号：<span>{{id}}</span><br/>
        姓名：<span>{{name}}</span><br/>
        年龄：<span>{{age}}</span><br/>

    </div>

    <script>

        var vm = new Vue({

            el : "#app",
            data : {

                "id" : "",
                "name" : "",
                "age" : ""

            },
            methods : {

                getStudent(){

   //发出ajax请求，取得学生信息，在页面中局部刷新学生信息
   //发出post请求
   //post请求参数传递的方式，是以请求体的方式来传递的，所以不能将参数挂在url后面
    /*
      关于post请求传递参数的问题：

      手动发起的post请求，默认没有表单格式，所以有些服务器就处理不了
      我们需要通过post方法的第三个参数，{emulateJSON:true}设置，提交的内容类型就设置为了普通表单的格式传递参数
      */
    this.$http.post("myServlet02.do",{"name":"ls123"}{emulateJSON:true}).then(function (data) {

  //与get请求一样，我们接受到后台响应的信息，需要先使用data.body进行处理，才能够拿到我们需要的值
                  data = data.body;

                  this.id = data.id;
                  this.name = data.name;
                  this.age = data.age;
                    })
                }
            }
        })
    </script>

</body>
</html>

六:响应axios

使用axios插件响应:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <!--

        导入axios插件来实现ajax请求

    -->
    <script src="vue/vue-2.4.0.js"></script>
    <script src="vue/axios.min.js"></script>
</head>
<body>

    <div id="app">

        <button @click="getStudent">点击取得学生信息</button>

        <br/>
        <br/>

        编号：<span>{{id}}</span><br/>
        姓名：<span>{{name}}</span><br/>
        年龄：<span>{{age}}</span><br/>

    </div>

    <script>

        var vm = new Vue({

            el : "#app",
            data : {

                "id" : "",
                "name" : "",
                "age" : ""

            },
            methods : {

                getStudent(){

/*
  在请求执行成功后，执行回调函数中的内容，回调函数处于其他函数的内部，this不会与任何的对象绑定（以this.data的形式引入数据就引不到了）
  将指向vue对象的this赋值给外部方法定义的属性，然后在内部方法中使用该属性即可
*/

   /*var _this = this;
    axios({

         method : "get", //请求方式
         url : "myServlet03.do"  //请求路径

         }).then(function (result) {

        /!*

  注意：
      之前使用vue-resource插件 对于值的处理 返回值.body的操作
      这次使用axios插件，同样需要对值进行处理  返回值.data的形式
*!/
      //alert(result.data.id);

      data = result.data;

      _this.id = data.id;
      _this.name = data.name;
      _this.age = data.age;

})*/

     axios({

        method : "get", //请求方式
        url : "myServlet03.do?name=aaa"  //请求路径

        //使用 箭头表达式=> 在代替原有的function来做回调函数
        }).then(result=> {

       /*
         注意：
          之前使用vue-resource插件 对于值的处理 返回值.body的操作
          这次使用axios插件，同样需要对值进行处理  返回值.data的形式
       */
         //alert(result.data.id);

         data = result.data;

         this.id = data.id;
         this.name = data.name;
         this.age = data.age;

       })

        //以param属性的形式来传递参数
       axios({

            method : "post", //请求方式
            url : "myServlet03.do",  //请求路径
            params : {"name":"bbb"}  //传递参数
            //使用 箭头表达式=> 在代替原有的function来做回调函数
            }).then(result=> {

/*
  注意：
  之前使用vue-resource插件 对于值的处理 返回值.body的操作
  这次使用axios插件，同样需要对值进行处理  返回值.data的形式

*/
               //alert(result.data.id);

                    data = result.data;

                    this.id = data.id;
                    this.name = data.name;
                    this.age = data.age;
                })
                }
            }
        })
    </script>

</body>
</html>

另外一种方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <!--

        导入axios插件来实现ajax请求

    -->
    <script src="vue/vue-2.4.0.js"></script>
    <script src="vue/axios.min.js"></script>
</head>
<body>

    <div id="app">

        <button @click="getStudent">点击取得学生信息</button>

        <br/>
        <br/>

        编号：<span>{{id}}</span><br/>
        姓名：<span>{{name}}</span><br/>
        年龄：<span>{{age}}</span><br/>

    </div>

    <script>

        var vm = new Vue({

            el : "#app",
            data : {

                "id" : "",
                "name" : "",
                "age" : ""

            },
            methods : {
                getStudent(){
                    /*axios.get(
                        "myServlet04.do",  //请求路径
                        {
                            params : {
                                "name" : "aaabbb"
                            }
                        }  //请求参数
                    ).then(result=>{

                        var data = result.data;

                        this.id = data.id;
                        this.name = data.name;
                        this.age = data.age;

                    })*/

                    axios.post(
                        "myServlet04.do",  //请求路径
                        /*{
                            params : {
                                "name" : "aaabbb"
                            }
                        }*/
/*
          该方式发送数据是一个 Request Payload的数据格式，一般的数据格式都是Form Data格式
          所以我们之前写的以json形式的参数就发送不出去
          只能通过传统字符串的方式为后台发送参数
*/
                   "name=aaabbbccc"

                    ).then(result=>{

                    var data = result.data;

                    this.id = data.id;
                    this.name = data.name;
                    this.age = data.age;
                })
                }
            }
        })
    </script>
</body>
</html>

总结

axios的形式是一个基于Promise的HTTP请求客户端，用来发 出请求。该形式也是 vue2.0官方推荐的形式，官方在推出了该形式 后，同时就不再对之前的vue-resource的形式进行更新和维护了。所 以更推荐的是使用axios的形式来处理ajax请求。

七:跨域请求

跨域请求的常用处理方式：

（1）代理方式 代理用于将请求发送给后台服务器，通过服务器来发送请求，然 后将请求的结果传递给前端。通过nginx代理来实现操作。

优点：跨域服务稳定

缺点：在使用到跨域处理的时候，必须要事先搭建nginx服务的代理环境，比较麻烦

（2）CORS方式 CORS是w3c标准的方式，通过在web服务器端的设置 响应头 Access-Control-Alow-Origin 来指定哪些域可以访问本域的 数据。

优点：使用简单，支持基于HTTP协议的所有请求方式

缺点：跨域服务响应稍慢

（3）jsonp方式 通过动态插入一个script标签。浏览器对script的资源引用没有同 源限制，同时资源加载到页面后回立即执行。

优点：使用简单，跨域服务响应快，获取的数据是我们最常见的json 格式的数据。

缺点：只能发送get请求，无法发送post请求

由于在开发中发出跨域请求的目的通常是为了取得指定的资源数 据，所以一般都是发出get请求，由于jsonp的形式使用简单，而且 关于接收的响应数据，是程序员使用最多的 json 格式的数据，所以 该形式在 企业中应用的比较广泛。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <!--
        导入axios插件来实现ajax请求
    -->
    <script src="vue/vue-2.4.0.js"></script>

    <!--
        之前老师在讲解ajax的时候，最后总结时说道推荐使用axios的方式
        但是，如果想要处理跨域请求，那么我们就必须要使用vue-resource的方式
    -->
    <%--<script src="vue/axios.min.js"></script>--%>
    <script src="vue/vue-resource-1.3.4.js"></script>
</head>
<body>

    <div id="app">

        <button @click="getStudent">点击取得学生信息</button>

        <br/>
        <br/>

        编号：<span>{{id}}</span><br/>
        姓名：<span>{{name}}</span><br/>
        年龄：<span>{{age}}</span><br/>

    </div>

    <script>

        var vm = new Vue({

            el : "#app",
            data : {

                "id" : "",
                "name" : "",
                "age" : ""

            },
            methods : {
                getStudent(){
 /*
     案例：
         当前项目所在服务器为
         协议：http
         域名：localhost
         端口号：8080

         将请求发送到以下配置的服务器，来从跨域的服务器中接收数据
         协议：http
         域名：localhost
         端口号：8088
*/

        //使用jsonp的方式发出跨域请求
                    this.$http.jsonp("http://localhost:8088/ky01/getKyStudentData.do").then(result=>{
                        result = result.body;
                        this.id = result.id;
                        this.name = result.name;
                        this.age = result.age;

                    })
                }
            }
        })
    </script>
</body>
</html>

八:vue动画

  • v-enter
  • v-leave-to
  • v-enter-active
  • v-leave-active

动画的滑入滑出和淡入淡出:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <!-- 自定义两组Vuejs的样式，来控制transition内部的元素实现动画的效果 -->
    <style>
    
        /* 
            v-enter 这是一个时间点，是进入之前，元素的起始状态，此时还没有开始进入
            v-leave-to 这时一个时间点 是动画离开之后，离开的终止状态，此时，元素动画已经结束了
        */

        .v-enter,.v-leave-to{

            /*设置起始状态和结束状态团苏的透明度为0（表示隐藏元素）*/
            opacity: 0;

            /*该形式为普通的淡入淡出的动画效果，使用起来最简单，应用的最广泛*/
            /*transform: opacity*/
            transform: translateY(150px);/*y横轴滑入*/
        }
        
        /*
           .v-enter-active 这是一个时间段，表示元素入场的过程
           .v-leave-active 这是一个时间段，表示元素离场的过程
        */

        .v-enter-active,.v-leave-active{

    /*设置在指定的事件内完成动画的全部入场和离场的效果*/
            transition: all 1.8s ease;
        }

    </style>
</head>
<body>
    
    
    <div id="app">
        <input type="button" value="点击" @click="flag=!flag"/>

        <br/>
        <br/>

 <!--
  对于以下p标签中的信息，我们需要使用动画进行控制
  需要使用transition元素，将需要被动画控制的元素包裹起来，对于当前信息的展现，我们需要包裹的就是p标签
   transition元素，Vue官方为我们提供的
-->
        <transition>
            <p v-if="flag">abcdef</p>
        </transition>
    </div>


    <script>      
        var vm = new Vue({
            el : "#app",
            data : {
                "flag" : false
            }
        })
    </script>

</body>
</html>

弹入弹出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <!-- 自定义两组Vuejs的样式，来控制transition内部的元素实现动画的效果 -->
    <style>
    
        .v-enter-active{
            /* 设置弹进时长 */
            animation: bounce-in 3.5s;
        }

        .v-leave-active{
            /*            
                设置弹出的时长
                正常的弹入弹出，都需要将reverse属性值加上
            */
            animation: bounce-in 3.5s reverse;
        }


        /*        
            使用vue搭配css动画效果的实现
            @keyframes：是CSS3定义的动画规则
            bounce-in：表示弹入弹出的效果      
        */

        @keyframes bounce-in{
            0%{
                transform: scale(0);
            }

            50%{
                transform: scale(1.5);
            }

            100%{
                transform: scale(1);
            }
        } 
    </style>
</head>
<body>
    
    
    <div id="app">
        <input type="button" value="点击" @click="flag=!flag"/>
        <br/>
        <br/>
<!--
对于以下p标签中的信息，我们需要使用动画进行控制
需要使用transition元素，将需要被动画控制的元素包裹起来，对于当前信息的展现，我们需要包裹的就是p标签
   transition元素，Vue官方为我们提供的
 -->
        <transition>
            <p v-if="flag">
                abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111<br/>
                abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111<br/>
                abcdefasdfasdfassdfasd111111111111111111111111111111111111111111111
            </p>
        </transition>
    </div>
    <script>
        
        var vm = new Vue({
            el : "#app",
            data : {
                "flag" : false
            }
        })
    </script>
</body>
</html>

加入第三方类库

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./css/animate.css">
</head>
<body>
    
    
    <div id="app">

        <input type="button" value="点击" @click="flag=!flag"/>
        
        <br/>
        <br/>

<!--
  animate.css为我们提供了
  enter-active-class和leave-active-class
  用来操作元素进场和离场的效果

以弹出弹出的形式处理进场和离场
   animated bounceIn
   animated bounceOut
-->
<!--
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
        <p v-if="flag">弹出的信息msg</p>
</transition>
-->

<!--
  我们可以将class="animated"写在元素中
  这样在enter-active-class和leave-active-class中就不用重复写animated了

  使用:duration="毫秒值" 来统一设置入场和离场动画时长
-->
<!--
        <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
            <p v-if="flag" class="animated">弹出的信息msg123</p>
        </transition>
        -->

        <!--
            使用 :duration="{enter:200,leave:400}" 来分别设置入场和离场的时长
        -->
        <transition enter-active-class="bounceIn" leave-active-class="bounceOut"
        :duration="{enter:200,leave:400}">
                <p v-if="flag" class="animated">弹出的信息msg123123</p>
            </transition>
    </div>

    <script>        
        var vm = new Vue({
            el : "#app",
            data : {
                "flag" : false
            }
        })
    </script>
</body>
</html>

加入小车动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
    
        .ball{
            width: 15px;
            height: 15px;
            border-radius:50%;
            background-color: #FF0000
        }

    </style>
</head>
<body>    
    
    <div id="app" style="height:170px">
       
        <input type="button" value="加入购物车" @click="flag=!flag"> 
<!--以下@定义的属性，一会使用动画的钩子函数进行相应处理-->
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter">

            <div class="ball" v-show="flag"></div>

        </transition>

    </div>

    <img src="./image/gwc.png"/>

    <script>
        
        var vm = new Vue({
            el : "#app",
            data : {
                "flag" : false
            },

            methods:{

//注意：动画钩子函数也是具有参数的，一般都会有一个参数叫做el，这个el就是钩子函数的第一个参数
//el表示的是要执行动画的那个DOM元素，是一个原生JS的DOM元素
//大家也可以认为，el是通过document.getElementById('')的方式获取到的原生DOM对象
   beforeEnter(el){
                    
//beforeEnter表示动画入场之前，此时，动画尚未开始，可以在beforeEnter中，设置元素开始动画之前的起始样式
//el.style.transform设置小球开始动画之前的起始位置
//translate(0,0)表示的是在坐标为0，0的位置
   el.style.transform = "translate(0,0)"

       },
   enter(el,done){

 //这行代码，没有实际的作用，但是如果不写，就不会出现动画的效果
 //可以认为，el.offsetWidth会强制启动动画
  el.offsetWidth

 //enter表示动画开始之后的样式的设置，这里，可以设置小球完成动画之后的结束状态
  el.style.transform = "translate(150px,350px)"
  el.style.transition = 'all 1s ease'                 

 //这里的done，起始就是afterEnter这个函数，也就是说，done就是afterEnter函数的引用
  done()

    },
afterEnter(el){
   //在动画完成之后，会调用afterEnter
      this.flag = !this.flag
                }

            }

        })

    </script>

</body>
</html>

添加动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
    
        li{
            border : 1px dashed #999;
            margin: 5px;
            line-height: 50px;
            padding-left: 8px;
            font-size: 2s2px;
            width: 80%
        }

        li:hover{
            background-color: hotpink;
            transition:all 0.8s ease;
        }

        .v-enter,
        .v-leave-to{
            opacity:0;
            transform: translateY(60px) 
        }

        .v-enter-active,
        .v-leave-active{
            transition: all 0.6s ease;
        }

/*       
下面的.v-move和.v-leave-active需要配合使用，能够实现列表后续的元素，渐渐的飘上来的这种效果   
*/
        .v-move{
            transition: all 0.6s ease;
        }

        .v-leave-active{
            position: absolute
        }

    </style>
</head>
<body>
        
    <div id="app">
        <!--
            定义文本框及按钮
        -->
        <div>
            <label>
                Id:
                <input type="text" v-model="id"/>
            </label>

            <label>
                Name:
                <input type="text" v-model="name"/>     
            </label>

            <input type="button" value="添加" @click="add"/>
        </div>   

        <!--定义动画区域-->
        <!--ul-->
<!--
     在我们实现列表过渡的时候，如果需要过渡的元素，是通过v-for循环渲染出来的，
     则不能使用transition进行包裹，必须要使用transition-group来进行包裹
     如果要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key属性（必须是当前记录的id）
     给transition添加appear属性 ，在页面刚展现出来的时候，实现入场时候的效果
     通过为transition-group元素，设置tag属性，指定transition-group渲染为指定的元素
     如果不指定tag属性，默认渲染为span元素
-->
        <transition-group appear tag="ul">
            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                {{item.id}} --- {{item.name}}
            </li>
        </transition-group>
        <!--ul-->
    </div>


    <script>        
        var vm = new Vue({
            el : "#app",
            data : {
                id : '',
                name : '',
                list : [
                    {id:1,name:'zs'},
                    {id:2,name:'ls'},
                    {id:3,name:'ww'},
                    {id:4,name:'zl'},
                    {id:5,name:'sq'}
                ]
            },

            methods:{              
                add(){                    
                    //为列表添加对象
                    this.list.push({id:this.id,name:this.name})
                    //将文本框中的数据清空掉
                    this.id = '';
                    this.name = '';
                },
                del(i){
                    //根据下标删除所在行
                    this.list.splice(i,1);
                }
            }
        })
    </script>

</body>
</html>
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家