当前位置：首页 > article >正文

Vue学习一

article 2024/10/23 19:48:12

vue的初步认识

如何使用vue

cdn引入

下载和引入

计数器案例

声明式和命令式

template属性

data属性

methods属性

其他属性

下载vue

data中函数不能使用箭头函数

this的指向

Vscode代码片段

Mustche双大括号语法

v-once指令

本来随着按钮的点击，相应的值会改变，加上该属性后，将一直保留给定的值，不会再改变

v-text指令

v-html

v-pre

v-cloak

v-bind的绑定属性

绑定class介绍

对象语法，后面跟布尔值，布尔值为true则使用其内容，为false则不使用

单引号可加可不加

绑定class-数组语法

绑定style介绍

冒号后的属性一定要加单引号，不然就会以为是data里return对象里的一个属性，所以也可以将属性写在data里引用，也可以加单引号直接写。在使用有‘-’符号的属性时，要么使用驼峰式的，要么给属性加单引号。

动态绑定属性

绑定一个对象

v-on绑定事件

也可以这样简写

v-on传递参数

v-on修饰符

条件渲染

v-if,v-else,v-else-if

当为false时整个标签都不会存在

v-if,v-else,v-else-if与template元素

如果你需要一部分内容是有条件的显示出来，使用div包裹再用v-if，v-else，会导致最终结果多div，是包裹状态。

那么我们就可以使用template，包括，这样实现的时候，不会多余出元素。

v-show

isShow的值为false时，哈哈哈哈不显示，为true时显示。与v-if很相似

但是他们有区别的，当值为false时，v-if的标签会直接不显示，不存在，但是当v-show为false的时候，他会给那个标签加style=‘display：none’标签。实现为false不显示的效果

v-show与v-if的区别

v-for

支持的类型

movie可以自定义代表的是数组的值，movies代表的是数组

如果拿到的是对象，就以对象的取值方式写

如果想拿到索引值，就需要加上括号，并多一个变量index，index记录索引值，将索引值当做序号，中间的点无特殊意义，只是间隔的方式，美观而已

遍历对象时，对象里的成员由key和value组成，如果你只拿其中一个，如下图

我们就只会得到相应的一个内容。

如果key和value都想拿到，那么就需要写小括号，并把两项都写上，中间符号无意义，美观而已

如果也想拿到序号，那么只需要在小括号里加变量即可，另外。小括号里变量名可自定义且可以不用小括号括起来

除了遍历数组和对象外，还可以变量数字，in后面的数字可自定义，写多大就可从1遍历到多少

与template元素

数组更新检测

v-for的key是什么作用

认识VNode

浏览器上由如图节点生成的效果都是真实的节点，

但是在template中的节点都是虚拟节点，是通过渲染，最终成为真实节点，实现在浏览器

虚拟DOM

虚拟dom是多个虚拟节点一起形成的树结构

插入F的案例

没有key的过程

2表示，下标为2的元素，0为不执行删除操作，‘f’为在2下标后位置插入的元素

diff算法就是把原来的数据跟改变后的数据作对比，看需要改变什么东西

获取新节点和旧节点的长度，并以短的那个为界限开始遍历对比，对比新旧同下标时的内容是否相同，如果相同就继续遍历下一个，如果不同就patch（更新，将新的节点代替旧的节点），

遍历完后判断节点数的大小，如果旧节点数大就移除剩余节点，反正就创建新节点将其挂载上去

有key的过程

从头部while循环新节点和旧节点，判断同下标的元素，type和key是否相同，相同就继续循环，不同就直接跳出循环

跳出循环后开始尾部循环，开始判断两个对应的元素相不相同，相同就patch接着循环，不相同就跳出循环

比较新节点与旧节点的个数，如果新节点多就执行以下代码

给patch的n1传null时，表示的是挂载

如果是旧节点比新节点多，那么就卸载掉多的

如果前后遍历完，中间是无序的未知的，那么就会在旧的节点里尽可能的找到对应的新得节点，旧节点多余的删除，新节点多的新增

复杂data的处理方式

认识计算属性computed

案例实现思路

实现思路一：模版语法

实现思路二：method实现

实现思路三：computed实现

计算属性vs methods

计算属性的缓存

方法属性和计算属性都使用三次，来看会调用几次。如图可见。方法属性每使用一次就会调用一次，但是使用计算属性，只会在第一次使用时调用，后面再使用就不会调用了

源码如何对setter和getter处理

源码中，computedOptions就是解构后给computed取的别名，代表的就是他，进入判断后遍历该对象中的key，判断key是否为函数，是函数就给他的this绑定publicThis,让他的this也能指向跟data的this一样的，之所以括号内有两个是因为，其中一个是data中的参数。

如果不是函数，那么就取你的get并判断你的get是否为函数，如果是，就给你的get函数做绑定，并返回函数get，如果不是函数，就返回一个默认函数NOOP

这个也是类似方法取你的set方法

认识侦听器watch

侦听器案例

侦听器watch的配置选项

单纯这么写。跟上面那样无区别。只是语法糖而已

但是这么写，可以写多个成员，我们为了实现深度监听，就可以写一个成员deep并将值设为true，这样哪怕是改变内部的内容，也可以监听到

、

添加立即执行的，就算你没使用这个监听，他也会执行一次

侦听器watch的其他方式

如果只想监听对象中其中一个元素就可以这样写

这种语法监听是不可以的，监听不到的

如果想监听数组中某一个元素可以用以下方式监听

这个方式比较合适

这个是生命周期方式监听，可有返回值。

综合案例

、

//index代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style_.css">
  
</head>
<body>
  <div id="app">
  </div>
  <template id="my-app">
    <table>
      <thead>
        <th>序号</th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(books, index) in moneyBook">
        <td>{{index+1}}</td>
        <td>{{books.name}}</td>
        <td>{{books.date}}</td>
        <td>{{books.price}}</td>
        <td><button :disabled="books.count<=1"  @click="decrement(index)">-</button><span>{{books.count}}</span><button @click="increment(index)">+</button></td>
        <td><button @click="Remove_(index)">移除</button></td>
      </tr>  
      </tbody>
    </table>
    <h2>总价格：{{totalprice}}</h2>
  </template>
  <script src="../js/vue.js"></script>
  <script src="book.js"></script>
  
  
</body>
</html>

//js代码
Vue.createApp({
  template:'#my-app',
  data() {
    return {
      Book:[{
        id:1,
        name:'《浮生雾》',
        date:'2025.10.9',
        price:42.9,
        count:1
      },
      {
        id:1,
        name:'《浮生雾2》',
        date:'2025.10.9',
        price:42.9,
        count:1
      },
      {
        id:1,
        name:'《浮生雾3》',
        date:'2025.10.9',
        price:42.9,
        count:1
      },
      {
        id:1,
        name:'《浮生雾4》',
        date:'2025.10.9',
        price:42.9,
        count:1
      }
    ]
      
    }
  },
  // computed:{
  //   totalprice(){
  //     let total=0
  //     for (let book of this.Books) {
  //       total+=book.price*book.count
        
  //     }
  //     return total

  //   }
    
  // },
  computed:{
    totalprice(){
          let total=0
         for(let book of this.Book)
         {
          total+=((book.price)*100*book.count)/100
         }
         return total.toFixed(2)
    
        },
        //第二个return是map函数的return，返回新的对象newBook，此时原本的this.book就是this.newBook.
        //然后将新的这个返回给调用该函数的地方
        moneyBook(){
         return this.Book.map(item=>{
            const newBook=Object.assign({},item)
            newBook.price="￥"+newBook.price
            return newBook
          })
        }


  },
  methods: {
    decrement(index){
      this.Book[index].count--
    },
    increment(index){
      this.Book[index].count++
    },
    
    Remove_(index){
      this.Book.splice(index,1)

    },
    moneyPrice(price){
      return '￥'+price

    }
    
  },

 

    

  }).mount("#app")

//样式设置
table{
  border: 1px solid pink;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td{
  padding: 8px,16px;
  border: 1px solid pink;
  text-align: left;
  text-align: center;
}
th{
  background-color: bisque;
  color: rgb(91, 158, 216);
  font-weight: 600;
  
  
}

解析：

使用v-for遍历写在js中的对象Book，让他动态生成相应个数的tr，tr中的td。其中books为当下遍历的对象，将对象的成员相应写在td中。其中价格我们使用了在methods中自定义得moneyPrice方法，且将原本的价格传入。是为了使价格前能有‘￥’该符号

这个方法非常简单，只需要将传入的价格加上字符‘￥’即可。

但除了这个方法我们还可以使用另外一种方法，如图

我们在compute添加一个函数，moneyBook生成一个新的Book对象，之所以要生成一个新的book对象是因为这样就不会妨碍后面算总价钱的计算了，因为我们给价格加上字符，那么整个价格都是字符串了，无法进行加减，所以我们需要生成新的Book对象，具体生成方法是，先使用this.Book

拿到我们需要进行操作的这个对象，然后再用这个对象调用map（）方法，去遍历该对象，item代表的就是遍历到的每个元素。因为我们要生成新的对象，将现在的这个对象的内容copy给新的变量，形成新的对象，那么我们就需要使用到Object的方法assign（），他是需要两个参数。将第二个参数copy给第一个参数，返回copy后的结果。并且他是一个一个元素拷贝，如果后面的参数比前面的短，那么，前面多余的元素还会保留，比如，a=[1,2,3],b=[2],那么Object.assign（a，b）后为[2,2,3]。且assign（）为浅拷贝。回到题目来，那么此时newBook与item一样了，然后再将他的price按需求更改，再将该好的返回到Book，最终将每项更改好的Book返回。

这时我们只需要将原本直接引用Book对象，改成应用写在compute中的上面那个函数即可，在v-for遍历时就会遍历已改变的对象，此时我们得价格前就都有￥

接着往下，我们需要设计个数的加减，点击减键数量减一，减到1不再减下去，加键加1。要实现这个效果，需要用到绑定事件，因为我们是点击按钮，所以是点击事件那么就是@click，

在我们得methods中写上我们点击后需要触发的操作。因为我们得元素不止一个，需要让函数知道我们点击的是哪个元素，我们就需要将对应的索引号传入其中。然后对对应索引号的元素进行加减操作，移除也是同理，不过可以介绍一下移除一个元素用到的方法splice（），它可以有三个参数，如果只有两个参数那么，第一个代表需要删除的元素的位置（也就是它的索引号），第二个代表他从第一个参数传入的索引号的位置开始要删除的个数。如果有三个参数，那么第一个仍然代表索引号，第二个为0时代表不删除第一个参数索引号下的数据，为1代表删除再插入，第三个参数为要插入的元素。

最后来到总价格，因为在价格前加￥符号有两种表达方式，那么，总价格要加￥，也会有两种

因为价格会随着个数增加减少而改变所以写入computed中，遍历对象Book中的每个元素，并拿到它的价格和个数进行计算，之所以乘100是为了让小数变整数，精确计算，乘了一个100计算后一定需要除以一个100.才会对等，为了好看，在返回算出来的结果时使用tofixed方法，自定义我们想保留的小数位数，因为我们得总价是在表格外的（这样不会被影响计算），所以想要也有￥符号就需要在返回的时候加上这个符号，实现相应效果

上面是对应不用moneyprice方法的总价加￥的方式，要使用该方法只需要应用该方法并把总价格传入即可，注意，需要将totalprice的返回值‘￥’去掉，因为这个方法会加，就不用在计算总价时加了

最后，我们设置一个条件，当我们的Book中一个元素都没有时，页面只显示购物车为空字样，当有元素的时候才显示相应内容，这里我们新写了两个template元素，因为该元素实现效果不会显示出来

学习时的截图

v-model的基本使用

详写是这样的

使用v-model更简洁，是上面的语法糖

v-model的原理

v-model的源码

v-model的值绑定

一定要有value

v-model修饰符-lazy

v-model修饰符-number

v-model会把传过来的数据变成字符串类型。

原本的100本来是数字类型，我们在输入框进行更改就会使用到写的v-modle功能，这时更改后的数字就成字符串类型了，哪怕把输入框的内容type设置为数字也无法改变这一现象

不可以转换的情况比如字符串内容是由字母符号组成

要想我们在使用v-model时不要将数字类型转为字符串类型，就可以哦使用number修饰符，他会进行隐式转换

因为进行隐式转换他只会对能转换的内容转换，所以输入内容时，输入了不能转换的他是不会显示接收到，且是从不能转换的那个位置开始，后面的所有都不在接收到

v-model修饰符-trim

人处理问题方式

认识组件化开发

组件化开发

vue的组件化

注册组件的方式

注册全局组件

全局组件的逻辑

这样写法只是

这样写法的拆分。罢了

创建好app使用方法component创建全局组件，第一个为组件名，第二个参数为组件对象，组件对象

组件对象也有data和methods，template，所以我们也可以用id绑定template，在上面创建template中写需要实现的内容

如果需要引用该组件，则需要在那块应用即可。

可注册多个全局组件

组件的名称

注册局部组件

首先创建我们得局部组件，同样的template可以写内容绑定一个里面写需要的操作，到时候应用

然后在需要该组件里添加components属性，写上我们得组件名和组件对象

然后再以同样方式应用即可

语法糖

vue的开发模式

单文件的特点

如何支持SFC

认识webpack

webpack的使用前提

webpack的安装

在安装webpack之前需要安装node.js和nmp，详细参考2024最新版NOde.js下载与安装及环境配置

安装好以后安装webpack，win+r进入输入该命令。

来到vscode终端使用命令webpack --version时报错。解决办法参考VUE常见问题，即可解决

Webpack默认打包

写好需要打包的js内容

，在终端输入webpack进行打包，将会获得一个新的文件夹dist，里面有main.js文件，文件内容使我们打包文件的总和

新建一个html文件引用我们所打包好的js文件

运行后可看到我们在js文件所实现的内容

创建局部webpack

之前的打包方式是使用全局的webpack，使用局部的如下

使用npm init命令

自定义包名，填写版本号。我这里只是自定义了包名，其他不填直接回车

直到这，填写yes回车，即可生成我们得.json文件

然后该命令安装局部的webpack，可能需要等待一定的时间，成功后会生成另一个.json文件和node_modules文件夹，里面放的都是依赖包

接下来就是局部开始打包了，不能直接使用webpack，因为这样还是用的全局，先删了我们之前使用全局打包后的文件夹再使用该命令才能使用局部的webpack打包，其实就是找到局部打包webpack的位置

使用之后也会生成一个dist文件夹。里面就是打包好的内容

除了使用拿到局部webpack路径的方法，还用npx webpack，同样打包成功生成dist文件

除了以上的打包方式，还可以在.json文件的Scripts中自定义一个名字，比如我这定义的名字为build,然后后面接运行的脚本，这个时候再把要运行的webpack写入，在终端输入npm run build（自定义得那个名字）回车即可实现打包同样又会生成dist文件夹

以上方法进行打包能准确的打包我们所需的文件是因为会自动去找index文件，当我们需要打包的是其他文件或者没有该文件时，我们就需要自定义打包入口了

我们只需要在打包的命令后面加上需要打包的文件的路径即可

同样会生成打包文件dist

如果使用 npm run 自定义脚本名命令。需要在原本的.json文件的webpack后加上路径，再在控制台直接使用该命令即可

但是一般我们做真实项目会有很多文件，这样打包实在太过繁琐所以一般会建一个webpack.config.js文件，

建.config.js文件也可以自定义名字，不过需要在.json文件中相应的脚本后面加上--config 文件名.config.js

在文件中写我们得进入路径和出口路径，filename可以自定义打包好的文件名，一般默认名为main.js,我们这设置为bundle.js

然后使用npm run build 打包后就会生产一个文件夹为我们自定义的build，而文件名为自定义的bundle.js了

如果你需要新建一个文件夹且只是与上一个少了放依赖的文件夹，你不用再使用只需要，使用命令 npm install即可,.json文件会记录，找到相应的依赖

创建一个.js,此时我们打包是不会把新建的这个文件的内容打包的

因为我们没有获取该依赖，所以，我们需要在main.js中获取依赖，

这样在我们打包时就会将新建的文件内容一起打包了

Webpack的依赖图

如果在使用该语句报错，可参考npm安装依赖超时，报错，大概率可解决问题

然后再需要样式的.js文件中import样式路径，在样式路径前加上css-loader！，！的作用是用来分割的。

此时打包好的文件，是有把样式打包在一起的，只是暂时没效果，等会会解决

上面是使用了方法1，在来使用最后一个方法

使用该方法需要来到.config.js文件中，增加module对象，在对象中增加rules对象，rules对象为一个数组，数组的元素也为对象，添加test元素，用来写匹配的文件类型，use写loader等属性

打包同样会把css样式打包起来

认识style-loader

所以我们需要下载style-loader

然后再在use添加style-loader，一定要先style-loader因为use里的数组是从后往前运行的，我们要先运行css-loader再运行style-loader，所以需要这样

此时我们得内容样式也可以展示出来

less文件的处理

Less工具处理

因为我们是没有less相关的工具所以需要安装，他会安装到node_modules文件夹下，我们要找到就需要使用npx ，使用npx找到lessc文件，并把我们写的》less文件路径拿到，后面跟我们想让他转换成.css文件回车后，就会将.less

文件的内容转换成.css文件，如果想要转换的文件去指定的文件夹中，可以写完.less文件路径后跟上需要转换存放的路径，在加上自定义的名字和.css,接下来就可以正常的跟.之前的.css文件一起打包使用了，但是如果我们的.less文件有很多使用这个方法就会非常麻烦，所以我们需要使用到less-loader处理

less-loader处理

要是不想一个一个转换，那就下载less-loader

并在需要用该样式的文件引用该样式

然后在.config.js文件中添加less-loader，并在配置文件的设置中增加.less

认识PostCSS工具

命令行使用postcss

我们先建一个test.css作为范例使用一下，按照步骤先安装一下postcss，postcss-cli

我们需要添加前缀，所以需要使用到autoprfixer插件，所以再按照步骤安装这个插件，

这个插件式在postcss工具里的，所以我们用npx找到postcss，然后使用它的工具autoprefier，-o后接输出文件（也就是输出后，文件用叫什么名的文件接收，自定义名），后面再接要操作的文件名，若不在当前路径，则带路径

会撤回就会生成一个文件，里面内容如下。

如果我们要使用起来那么需要用到postcss-loader

同样需要安装该loader

安装，因为要使用其中的插件，就需要一个新对象，就不能跟之前的loader写在一起，在这个对象中需要有个options，让他有多个操作，在其中的postcssOptions中的pligins，require我们需要用到的对象，这样配置好后，打包即可实现需要的效果，如若没反应，参考解决webpack4.x autoprefier没反应问题

anz

以上方法过于繁琐，我们可以单独的postcss配置文件

单独的postcss配置文件

单独建立一个.config.js文件

修改.config.js内容即可

原理是先查看该文件中是否有postcss配置信息，如果没有就在整个文件中查找是否导出postcss信息

postcss-preset-env

同样安装

然后更改postcss.config.js文件

可以将less和css写到一起

加载图片案例准备

file-loader

安装filde-loader，再配置处理图片的Rule后，在打包后的文件夹中，生成了处理过后的图片，

可以看出来，生成的图片是两张，并且

并且一张可显示一张不可显示，而浏览器正好应用的就是不可显示的那张，解决方法和问题原因可参考Webpack5 file-loader、url-loader打包url引入一张图片生成两个图片，一个无法加载_file-loader同一张图片打包成两个文件-CSDN博客

以上是样式中背景img的打包方式，如果是元素imag就有所不同

我们需要是为了拿到一个稳定的图片地址然后将地址给img元素src

如果这样，在加载到index.html上路径就不不对

然后打包即可。

文件的命名规则

设置文件的存放路径

outPath指定输出路径。

设置文件的名称

name就是把输出内容名字自定义一个指定的，但是我们这是图片的打包，所以不能这样写死

所以我们就可以用这个方法将图片打包前的名字应用到打包后的名字

但是有时候打包前的图片的名字可能也会重名，所以可以加上Hash值，他们中间的符号无实意，只是做区分

加上ext会根据打包前的格式打包输出，比如打包前是.jpg,打包后还会是

还可以这样写

另外其实outputpath可以不用，可以在name里指定输出文件夹名

url-loader

url-load可以替代file-loader，如果你想全部打包就用file-loader，如果你需要转base64url你就使用url-loader

url-loader的limit

limit是设置转base图片大小的限制，单位是byte，100*1024为100byte，所以这里设置的就是100byte一下的转为base64的url，以上的还是生成打包图片

认识asset module type

asset module type的使用

url-loader的limit效果

maxsize跟url-loader中的limit是差不多的，

想要打包的图片在指定的文件夹中需要用到generator中的filename，因为拿到的是带.的文件所以再使用ext时不需要加点

加载字体文件

字体的打包

写法2

认识Plugin

CleanWebpackPlugin

加上这个插件那么在打包的时候会删除打包好的所有文件重新再打包，他是通过前面引用需要打包文件得到路径去删除的

HtmlWebpackPlugin

filename:"js/bundke.js"给js加单独的文件夹

生成index.html分析

自定义HTML模版

这是自定义的模版，到时候打包的时候根据该模版来打包即可

自定义模版数据填充

DefinePlugin的介绍

DefinePlugin的使用

在BASE_URL中写的内容，他会在文件找该内容对应的值填充到这，比如我们定义了给abc=3那么此时这里3就会填充到这，从而填充到自定义模板BASE_URL位置对应的内容

我们可以直接给他填充一个字符串

改变模版数据的title

CopyWebpackPlugin

from为需要复制（打包）的文件，to是打包的位置，globOptions中的ignore为需要忽略的文件，被忽略的文件就不会打包过去，./为本目录下，因为该文件前面已经写了打包路径了，所以这里写的本路径指的就是前面指定的打包路径

没有public的index，（打包文件中的index不是public的那个），但是有img.js

Mode配置

babel的介绍

Babel命令使用

除了可以指定输出的文件夹。还可以制定输出后的文件名。只需把out-dir 改成out-file即可

插件的使用

使用箭头函数转换相关插件可以将箭头函数转换成普通函数，单我们只有箭头函数转换了

下载常量相关插件，再加上就一起都变了

前面方式，语言转换深就得安装一个相关的插件太繁琐，所以我们将换一种方式

Babel的预设preset

Babel的底层原理

Babel编译器执行原理

词语分析是把内容进行分割，比如const s=“abc”,就会把const ，s abc这三个进行分割，然后将分割的内容放到一个数组里，然后再进行语法分析，把分析好的语法，用抽象树表示出来，然后去遍历这个语法树，并访问遍历的内容，然后用相应插件对关键字进行转换，最终形成新的抽象语法树，最终成为目标源代码。比如，遍历到const关键字，就会通过相关插件把他转换成var

babel-loader

指定使用插件

babel-preset

可能一个插件还带其他的参数和内容，就可能会这么写

Babel的配置文件

vue源码打包

把VUE

当做模块引用，当成

下载vue但是一定要加@next，不然下载的就是vue2

=-破，

我们用的是vue二版本他不会对源代码进行解析，所以打包不会后，不会把vue代码内容显示出来

Vue打包后不同版本解析

运行时＋编译vs仅运行时

VsCode对SFC文件的支持

编写APP.vue代码

APP.vue的打包过程

@vue/compiler-sfc

全局标识的配置

表示生产环境下要不要支持DEVTOOLS

会交给vue-loader里的相关插件解析，所以不用再那样引用了

为什么要搭建本地服务器

Webpack watch

webpack-dev-server

如果安装时报错。参考该内容npm安装依赖超时，报错npm error code ECONNRESET_npm error code econnreset npm error syscall read n-CSDN博客

打开一个本地服务通过Webpackcli进行解析的，生成的打包文件不在build，只是在内存里，

如果一个资源没有在Webpack加载到，那么就会从另外的地方加载

取消赋值复制插件，这部分内容就会不参与打包，相要参与打包就需要

在deserver中写上

源码，浏览器无法识别，就需要打包，我们通过devSever打包，打包好的资源放到memfs内存中，开启一个express服务器，浏览器通过localhost：8080访问express服务器，浏览器通过index.html识别静态资源，元素的相关属性，但是识别到Script的src=abc.js时，发现识别不到，就会报错，但是还是想要使用到该资源，就通过devSever中配置一个contentBase，contentBase对应的是一个文件夹，也就是可以再配置一个叫contentBase文件夹，当浏览器在打包好的资源量请求不到需要的资源时，就让express去该文件中去读，然后再通过express返回给浏览器