Vue学习

发表于 更新于 分类于 阅读次数： Valine：

v-bind绑定

vue可以使用对象的方式，来我们常规中js的寻找方法

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
<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <title>这是一个标题</title>
  <!--导入vue文件-->
  <script  src="static/script/vue.js" ></script>
  <script >
      window.onload=function (){
        //创建vue对象
        var vue=new Vue({
          /*设置键值对*/
          "el": "#div0",
          data:{
            msg: "hello",
            uname:"张三"
          }
        });
      }
  </script>
</head>

<body >
  <div id="div0">
    <span>{{msg}}</span>
      <!--v-bind表示绑定，也可以省略-->
    <input type="text" v-bind:value="uname">
  </div>

</body>
</html>

image-20220421160634426

v-model双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script >
      window.onload=function (){
        //创建vue对象
        var vue=new Vue({
          /*设置键值对*/
          "el": "#div0",
          data:{
            msg: "hello",
            uname:"张三"
          }
        });
      }
  </script>
</head>

<body >
  <div id="div0">
    <span>{{msg}}</span>
    <input type="text" v-model:value="msg">
  </div>

</body>

动画3

1
<input type="text" v-model.trim="msg">

value值也可以进行省略，而且trim会帮助我们去除前面的空格，而仅仅专注于他的值

条件渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script >
      window.onload=function (){
        //创建vue对象
        var vue=new Vue({
          /*设置键值对*/
          "el": "#div0",
          data:{
            msg: 2,
          }
        });
      }
  </script>
</head>

<body >
  <div id="div0">
    <span>{{msg}}</span>
    <input type="text" v-model.trim="msg">
      如果msg是偶数，就显示后面的文字，如果不是则不显示，但是注意if与else之间不可以有其他的东西
    <div v-if="msg%2==0" style="background-color: red" > haha </div>
      <div v-else="msg%2==0" style="background-color: black">nn</div>
      v-show在查看源代码中只是将结果给display：none，但是其实还是存在的
      <div v-show="msg%2==0" style="background-color: black">nn</div>
  </div>

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    fruitList:[
                        {fname:"苹果",price:5,fcount:100,remark:"苹果很好吃"},
                        {fname:"菠萝",price:3,fcount:120,remark:"菠萝很好吃"},
                        {fname:"香蕉",price:4,fcount:50,remark:"香蕉很好吃"},
                        {fname:"西瓜",price:6,fcount:100,remark:"西瓜很好吃"}
                    ]
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <table border="1" width="400" cellpadding="4" cellspacing="0">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>库存</th>
                <th>备注</th>
            </tr>
            <!-- v-for表示迭代 -->
            <tr align="center" v-for="fruit in fruitList">
                <td>{{fruit.fname}}</td>
                <td>{{fruit.price}}</td>
                <td>{{fruit.fcount}}</td>
                <td>{{fruit.remark}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

image-20220421163104731

事件驱动

v-on:click

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    msg:"hello world!"
                },
                methods:{
                    myReverse:function(){
                        this.msg = this.msg.split("").reverse().join("");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <span>{{msg}}</span><br/>
        <!-- v-on:click 表示绑定点击事件 -->
        <!-- v-on可以省略，变成 @click -->
        <!--<input type="button" value="反转" v-on:click="myReverse"/>-->
        <input type="button" value="反转" @click="myReverse"/>
    </div>
</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>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    num1:1,
                    num2:2,
                    num3:0
                },
                watch:{
                    //侦听属性num1和num2
                    //当num1的值有改动时，那么需要调用后面定义的方法 , newValue指的是num1的新值
                    num1:function(newValue){
                        this.num3 = parseInt(newValue) + parseInt(this.num2);
                    },
                    num2:function(newValue){
                        this.num3 = parseInt(this.num1) + parseInt(newValue) ;
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <input type="text" v-model="num1" size="2"/>
        +
        <input type="text" v-model="num2" size="2"/>
        =
        <span>{{num3}}</span>
    </div>
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="script/vue.js"></script>
    <script language="JavaScript">
        window.onload=function(){
            var vue = new Vue({
                "el":"#div0",
                data:{
                    msg:1
                },
                methods:{
                    changeMsg:function(){
                        this.msg = this.msg + 1 ;
                    }

                },
                /*vue对象创建之前*/
                beforeCreate:function(){
                    console.log("beforeCreate:vue对象创建之前---------------");
                    console.log("msg:"+this.msg);
                },
                /*vue对象创建之后*/
                created:function(){
                    console.log("created:vue对象创建之后---------------");
                    console.log("msg:"+this.msg);
                },
                /*数据装载之前*/
                beforeMount:function(){
                    console.log("beforeMount:数据装载之前---------------");
                    console.log("span:"+document.getElementById("span").innerText);
                },
                /*数据装载之后*/
                mounted:function(){
                    console.log("mounted:数据装载之后---------------");
                    console.log("span:"+document.getElementById("span").innerText);
                },
                beforeUpdate:function(){
                    console.log("beforeUpdate:数据更新之前---------------");
                    console.log("msg:"+this.msg);
                    console.log("span:"+document.getElementById("span").innerText);
                },
                updated:function(){
                    console.log("Updated:数据更新之后---------------");
                    console.log("msg:"+this.msg);
                    console.log("span:"+document.getElementById("span").innerText);
                }
            });
        }
    </script>
</head>
<body>
    <div id="div0">
        <span id="span">{{msg}}</span><br/>
        <input type="button" value="改变msg的值" @click="changeMsg"/>
    </div>
</body>
</html>

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
window.onload=function(){
    var vue = new Vue({
        //绑定id为div_cart
        el:"#div_cart",
        //拥有一个属性cart
        data:{
            cart:{}
        },
        methods:{
            //拥有三个方法
            getCart:function(){
                //采用异步的方法，
                axios({
                    method:"POST",
                    url:"cart.do",
                    params:{
                        operate:'cartInfo'
                    }
                })
                    .then(function (value) {
                        var cart = value.data ;
                        vue.cart = cart ;
                    })
                    .catch(function (reason) {  });
            },
            addBook:function (bookId){
                axios({
                    method:"POST",
                    url:"cart.do",
                    params:{
                        operate: 'addBook',
                        bookId:bookId

                    }
                }).then(function (value){
                    vue.getCart();
                }).catch(function (reason){

                })
            },
            reduceBook:function (bookId){
                axios({
                    method:"POST",
                    url:"cart.do",
                    params:{
                        operate: 'reduceBook',
                        bookId:bookId

                    }
                }).then(function (value){
                    vue.getCart();
                }).catch(function (reason){

                })
            }

        },
        mounted:function(){
            this.getCart() ;
        }
    });
}

一个处理的函数

1
2
3
4
5
6
7
8
9
10
11
public String cartInfo(HttpSession session) throws SQLException {
    User user=(User)session.getAttribute("currUser") ;
    Cart cart= cartItemService.getCart(user);
    cart.getTotalCount();
    cart.getTotalBookCount();
    cart.getTotalMoney();
    Gson gson=new Gson();
    String cartJsonStr=gson.toJson(cart);

    return "json:"+cartJsonStr;
}

判断并进行局部刷新

1
2
3
4
5
6
7
if(methodReturnStr.startsWith("json:")){
    String jsonStr=methodReturnStr.substring("json:".length());
    PrintWriter out=response.getWriter();
    out.print(jsonStr);
    //刷新
    out.flush();
}