Cookie、VUE

星星下雪

已于 2022-09-22 18:01:43 修改

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVA 笔记文章标签：前端 javascript java

于 2022-09-22 18:00:00 首次发布

本文链接：https://blog.csdn.net/qq_50233116/article/details/126963054

笔记同时被 2 个专栏收录

32 篇文章

订阅专栏

JAVA

31 篇文章

订阅专栏

本文详细介绍了Cookie的使用，包括创建、设置有效期和应用场景，如记住用户名和密码、免登录。接着深入讲解Vue.js，从定义js对象到Vue对象的生命周期，涵盖数据绑定、条件渲染、列表渲染、事件驱动和侦听属性等核心概念，并提供了丰富的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Cookie

1) 创建Cookie对象
2) 在客户端保存Cookie
3) 设置cookie的有效时长
cookie.setMaxAge(60),设置cookie的有效时长为60s
cookie.setDomain(String pattern);
cookie.setPath(String uri)

@WebServlet("/cookie01")   //url：http://localhost:7070/Cookie/cookie01
public class CookieServlet01 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.创建cookie对象
        Cookie cookie = new Cookie("uname","xx");
        //2.将cookie对象保存至浏览器端
        response.addCookie(cookie);

    }
}

创建Cookie后可以在浏览器中查询保存的Cookie(这里可采用html文件帮助跳转至浏览器）

 request.getRequestDispatcher("hello01.html").forward(request,response);   //跳转至hello01.html页面

比如本人使用hello01.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>cookie保存成功！</h1>
</body>
</html>

(此处使用Microsoft Edge，其余浏览器保存位置均可在网上查询得)

在浏览器中右键 --> 检查 --> 网络 --> cookie(若没有cookie，则刷新)则可看到

或者在网页设置 --> Cookie 和已存储数据

a.记住用户名和密码（setMaxAge10天：60 * 60 * 24 *10）
b.免登录

二、Vue

1.定义js对象

1）对象定义

定义其对象有两种方式，如下：

//方式1：
var person = new Object();
        person.pid = "p001";
        person.pname="jim";
        person.sayHello = function(){
            alert("HELLO world");
        }


//方式2：
 var person = {
            "pid":"p001",
            "pname":"jim",
            "sayHello":function(){
                alert("HELLO world");
            }
        };

使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript">

        function hello(){
            person.sayHello();
        }

        //此处使用方法2示例
        var person = {
            "pid":"p001",
            "pname":"jim",
            "sayHello":function(){
                alert("HELLO world");
            }
        };
        window.onload=function(){
            var vue = new Vue({

            });
        }
    </script>
</head>
<body>
<div id="div0">
    <span>HELLO</span>
    <input type="button" value="打招呼" onclick="hello()"/>
</div>
</body>
</html>

效果如下：

2）新建Vue对象

Var vue = new VUE({key,value})

Vue对象中的 el 属性：

el:"#div0"    <!--表示是当前vue对象和id=div01的div标签绑定-->

Vue对象中的data数据：

data:{
    msg:"hello world",  <!--msg:key,"hello world":value-->
    uname:"张三丰"
      }

三、Vue.js基本语法

1）数据绑定

a.v-bind

表示绑定属性(单向)

注: 引用 v-bind 时，必须调用 xmlns:v-bind="http://www.w3.org/1999/xhtml"

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

在div标签中使用Vue对象(通过id标签绑定)：

<div id="div0">
    <span>{{msg}}</span>
    <input type="text" v-bind:value="uname"/>
    <!--<input type="text" v-bind:value="uname"/>-->
    <!--v-bind:可以省略-->
    <input type="text" :value="uname"/>
</div>

b.v-model

表示双向绑定，即可以通过input输入框改变所调用的属性值，同样的，使用v-model时必须调用xmlns:v-model="http://www.w3.org/1999/xhtml;

<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">

如：

//此时在VUE对象中定义数据msg："hello world"
<input type="text" v-model:value="msg"/>   

//"v-model:value="中的value可以省略，直接写做"v-model=";
<input type="text" v-model="msg"/>

效果如下：

c.trim

可以去除首尾空格(即通过input输入框改变msg值时，忽略首尾空格的输入)

效果如下：

示例代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<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",  <!--msg:key,"hello world":value-->
                    uname:"张三丰"
                }
            });
        }
    </script>
</head>
<body>
<div id="div0">
    <span>{{msg}}</span>
    <input type="text" v-bind:value="uname"/>
</div>
</body>
</html>

2）条件渲染

a.if-else

html语言中也存在if-else语句，可以用其来判断何时使用何种页面，HTML代码如下：

 <input type="text" v-model="num">
    <!-- v-if和v-else中间不能插入其他节点 -->
    <div v-if="num%2==0" style="width: 200px;height: 200px;background-color: darkgray;">&nbsp</div>
    <div v-else="num%2!=0" style="width: 200px;height: 200px;background-color: green;">&nbsp</div>

Vue代码：

 var vue = new Vue({
     el:"#div0",
     data:{
     num:1
     }
     });

（此例可以通过判断input输入框中的数字奇偶来显示不同颜色）

b.v-show

表示条件不成立时，节点依然存在，但节点样式为none

3）列表渲染

a.迭代（v-for）

后续开发中可以在VUE编写表格中数据或集合，再在div标签中通过id调用即可

HTML代码：

<div id="div0">
    <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>
</div>

Vue代码：

 var vue = new Vue({
    el:"#div0",
    data:{
    fruitList:[
    {fname:"苹果",price:"5",fcount:"100",remark:"苹果很好吃"},
    {fname:"香蕉",price:"2",fcount:"50",remark:"香蕉很好吃"},
    {fname:"橘子",price:"6",fcount:"40",remark:"橘子很好吃"},
    {fname:"芒果",price:"4",fcount:"100",remark:"芒果很好吃"},
    ]
        }
    });

示例代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<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:"2",fcount:"50",remark:"香蕉很好吃"},
                       {fname:"橘子",price:"6",fcount:"40",remark:"橘子很好吃"},
                       {fname:"芒果",price:"4",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>
        <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>

4）事件驱动

a.v-on

使用v-on实现字符串反转：

HTML代码：

<div id="div0">
    <span>{{msg}}</span><br/>
    <!--v-on:clike 表示绑定点击事件-->
    <input type="button" value="反转" v-on:click="myRevers" />
    <!--v-on可以省略，变成 @clike-->
    <input type="button" value="反转" @click="myReverse" />
</div>

Vue代码：

  var vue = new Vue({
      el:"#div0",
      data:{
          msg:"hello world!"
          },
      methods:{
          myReverse:function () {
          this.msg = this.msg.split("").reverse().join("");
          /**
          * split(""):表示将字符一个一个取出
          * reverse():倒置所有字符串
          * join(""):连接
          */
          }
      }
});

b.event

使用event以获取鼠标移动时的信息

5）侦听属性

a.watch

使用watch来监听元素的变化

如：使用watch来达到在页面上完成加法运算

HTML代码：

<div id="div0">
    <input type="text" v-model="num1" size="2" />
    +
    <input type="text" v-model="num2" size="2" />
    =
    <span>{{num3}}</span>
</div>

Vue代码：

 var vue = new Vue({
     el:"#div0",
     data:{
         num1:1,
         num2:2,
         num3:0
         },
     watch:{
         num1: function (newValue) {
             this.num3 = parseInt(newValue)+parseInt(this.num2);
         },
         num2:function (newValue) {
             this.num3 = parseInt(newValue)+parseInt(this.num1);
         }
    }
});

注意：此时

若this.num3的表达式写为：

this.num3 = newValue+this.num2;

则此处只起到字符串拼接的效果。

三、Vue对象生命周期

1.Vue对象的生命周期

2.生命周期钩子函数

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<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)  //此时msg对象不存在
                },
                /*Vue对象创建之后*/
                created:function () {
                    console.log("created:Vue对象创建之后...");
                    console.log("msg" + this.msg)  //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("Update:数据更新之后...");
                    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>

运行结果如下：