vue的简单学习

4343

已于 2022-10-25 13:07:35 修改

阅读量2.8k

点赞数 1

分类专栏： java 文章标签： 1024程序员节

于 2022-10-24 17:34:15 首次发布

本文链接：https://blog.csdn.net/weixin_42196338/article/details/127492374

版权

java 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

vue和thymeleaf ：

若先显示框架后加载数据则用vue

若后端处理好之后发送给前端页面显示用thymeleaf (弹幕)

对于前后端分离的认识：

使用vue 将前端页面、框架等建立好，只需要后端发送数据即可

但thymeleaf就需要在服务器启动之前将数据保存到session等作用域中发送给前端，之后才会使用thymeleaf渲染这些数据。

1、定义js对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="src/main/webapp/srcipt/vue.js"></script>
    <script language="JavaScript">
        function hello(){
            person.sayhello();
        }
        //定义js 对象
        var person ={
            "pid":"p001",
            "pname":"jim",
            "sayhello":function (){
                alert("Hello world");
            }
        }
    </script>
</head>
<body>
    <div id="div0">
        <span>Hello</span>
        <input type="button" value="打招呼" onclick="hello()">
    </div>
</body>

2、定义vue对象

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="srcipt/vue.js"></script>
    <script language="JavaScript">
        //window.onload 类似于java中的static
       window.onload=function (){
           var vue = new Vue({
               //el:element 标识当前的vue对象可以和对应的div_id 进行绑定
               "el":"#div0",
               data:{
                   // data中的元素以key-value方式存储，以 , 分割
                    msg:"hello world!",
                   uname:"李元霸"
               },
               methods:{
               }
           });
       }
    </script>
</head>


<body>
    <div id="div0">
        <span>{{msg}}   </span>
    </div>
</body>

2.1 new Vue({})

每个vue对象有3个标识符：

el : 标识当前的vue对象可以和对应的div_id 进行绑定

data: 存放json类型的数据

methods：存放定义的一些函数

2.2 声明式渲染

再<body>体中可以使用{{vue.data.key}}来显示对应的value

window-onload 认识：

JS中window.onload事件详解_pseudonym_的博客-CSDN博客_window.onload

3、vue中语法

3.1 v-bind：value

表示将value属性交给vue进行管理即绑定到Vue对象：

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

此时我们只需要改变Vue对象中的uname值即可改变文本框中显示的值。

3.2 v-model:value

也是将value属性交给Vue对象进行管理，但与v-bind不同的是v-model为双向绑定，即我们再文本框中也可以改变Vue对象中data属性里的值。

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

页面显示结果：

当修改文本框中的值：

4 vue语法之if

4.1 v-if、v-else

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="srcipt/vue.js"></script>
    <script language="JavaScript">
       window.onload=function (){
           var vue = new Vue({
               "el":"#div0",
               data:{
                   num:2
               }
           });
       }
    </script>
</head>

<body>
    <div id="div0">
        <input type="text" v-model:value="num">
        <div v-if="num%2==0" style="width:100px;height: 100px;background-color: chartreuse;">&nbsp;</div>
        <div v-else="num%2==0" style="width:100px;height: 100px;background-color: orangered;">&nbsp;</div>
    </div>
</body>

注 v-else中也需要写与v-if中一样的条件进行判断，并且两个节点之间不能有其他节点！

页面展示结果：

当num为偶数时颜色为chartreuse：

当num为奇数时颜色为orangered：

4.2 v-show

<body>
    <div id="div0">
        <input type="text" v-model:value="num">
        <div v-show="num%2==0" style="width:200px;height: 200px;background-color: blueviolet;">&nbsp;</div>
    </div>
</body>

v-show通过控制其display属性来确定是否显示

等于说如果满足条件 display就不为none，就会显示，否则为none，就不显示。

5、vue语法之for

基本语法为 v-for="循环体 in 集合"

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="srcipt/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:100,fcount:666,remark:"香蕉很好吃"},
                       {fname:"橘子",price:23,fcount:455,remark:"orange很好吃"},
                       {fname:"香瓜",price:41,fcount:555,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>
            <tr 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>

页面显示结果：

6、事件驱动

6.1 v-on:click

6.1.1字符串顺序反转

<input type="button" value="反转" v-on:click="myReverse"/>

首先在按钮上定义事件通过v-on:click来绑定事件，之后再Vue中再method属性中写对应事件的函数即可。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="srcipt/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>
                                // v-on:click 也可以简写为@click
        <input type="button" value="反转" v-on:click="myReverse"/>
    </div>
</body>

注: str.split("")与str.join("") 都是将字符串按照 " "内的值来进行分割或者连接的

example1: msg = "hello world " , msg.split("o")

展示结果为：

即以字符o 作为分割的值。

example2:msg = "hello world " , msg.split(" ")

展示结果为

即以字符空格作为分割的值。

6.2 侦听属性

所谓“侦听”就是对message的属性进行监控，当值发生改变时调用一些函数等，

小白案例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript" src="srcipt/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的值发生改变时调用后面的方法
                   num1:function (newValue){
                       this.num3 = parseInt(newValue)+parseInt(this.num2);
                   },
                   num2:function (newValue){
                       this.num3 = parseInt(newValue)+parseInt(this.num1);
                   }

               }
           });
       }
    </script>
</head>
<body>
    <div id="div0">
       <input type="text" v-model:value="num1" size="2">
        +
        <input type="text" v-model:value="num2" size="2">
        =
        <span>{{num3}}</span>
    </div>
</body>

7、Vue的生命周期

7.1 vue对象创建

 /*vue对象创建之前*/
               beforeCreate:function (){
                   /*此时再浏览器控制台里会显示：msg:undefined */
                   console.log("beforeCreate:vue对象创建之前--------");
                   console.log("msg:"+this.msg);
               },
               /*vue对象创建之后*/
               created:function (){
                   console.log("Created:vue对象创建之后--------");
                   console.log("msg:"+this.msg);
               },

</body>

控制台输出结果：

7.2 数据装载

数据装载指再<body>体内把对应的表示的变量赋值：

 /*数据装载之前*/
               beforeMount:function (){
                   console.log("beforeMount：数据装载之前--------");
                   console.log("msg:"+document.getElementById("a").innerText);
               },
               /*数据装载之后*/
               mounted:function (){
                   console.log("mounted：数据装载之后--------");
                   console.log("msg:"+document.getElementById("a").innerText);
               },

<body>
    <div id="div0">
        <span id="a">{{msg}}</span>
    </div>
</body>

控制台输出结果：

可以看到数据装载之前 <span>中表示的动态内容是静态的，并没有赋值。

7.3数据更新

               methods:{
                   change:function (){
                       this.msg = this.msg + "world";
                   }
               },

                beforeUpdate:function (){
                   console.log("beforeUpdate：数据更新之前--------");
                   console.log("msg:"+this.msg)
                   console.log("span:"+document.getElementById("a").innerText);

               },
               /*数据更新之后*/
               updated:function (){
                   console.log("updated：数据更新之后--------");
                   console.log("msg:"+this.msg)
                   console.log("span:"+document.getElementById("a").innerText);
               }


<body>
    <div id="div0">
        <input type="button" value="点我" v-on:click="change"/>
    </div>

展示结果：

初始页面：