JS实现刷新页面的方式？

JavaScript 中，有几种方式可以实现刷新页面的操作，以下是其中一些常见的方法：

1. 使用location对象：

```javascript

// 刷新当前页面

location.reload();

// 强制从服务器重新加载页面，不使用缓存

location.reload(true);

```

2. 使用location.href：

```javascript

// 通过修改当前 URL 来刷新页面

location.href = location.href;

```

3. 使用history对象：

```javascript

// 刷新当前页面

history.go(0);

```

4. 使用location.replace：

```javascript

// 刷新当前页面，类似于location.reload()

location.replace(location.pathname + location.search);

```

5. 通过按钮的点击事件触发刷新：

```javascript

// HTML 中添加一个按钮

// <button id="refreshButton">刷新页面</button>

// JavaScript 中给按钮添加点击事件

document.getElementById('refreshButton').addEventListener('click', function() {

// 刷新页面

location.reload();

});

```

这些方法可以根据具体需求选择使用。请注意，有些刷新方式可能会重新加载页面并清除所有状态，而有些则可能从缓存中加载页面。在使用时需要根据实际情况选择合适的方法。

击事件监听

这里我们同样的，不过今天只用都写在index.html中，我们先上代码

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>vue</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 </head>
 <body>
 <div id="databinding">
 <button v-on:click="displaynumbers">点我</button>
 <h2>100 + 200 = {{ total }}</h2>
 </div>
 <script type="text/javascript">
 var vm = new Vue({
 el: "#databinding",
 data: {
 num1: 100,
 num2: 200,
 total: ""
 },
 methods: {
 displaynumbers: function(event) {
 console.log(event);
 return (this.total = this.num1 + this.num2);
 }
 }
 });
 </script>
 </body>
</html>

这里我们使用了这样的一个语法

<button v-on:click = "displaynumbers">点击</button>

displaynumbers就是我们定义在Vue示例属性methods中的事件对象名称，这里我们还有一盒简化的写法

<button @click="displaynumbers">点我</button>

我们可以使用@符号替代v-on的写法，这种方式更简洁，下面截图是这段代码的结果

mouseover和mouseout事件

我们在这里在测试下mouseover和mouseout事件，先上代码

<div id="databinding">
 <div
 v-bind:style="styleobj"
 v-on:mouseover="changebgcolor"
 v-on:mouseout="originalcolor"
 ></div>
 </div>
 <script type="text/javascript">
 var vm = new Vue({
 el: "#databinding",
 data: {
 num1: 100,
 num2: 200,
 total: "",
 styleobj: {
 width: "100px",
 height: "100px",
 backgroundColor: "red"
 }
 },
 methods: {
 changebgcolor: function() {
 this.styleobj.backgroundColor = "blue";
 },
 originalcolor: function() {
 this.styleobj.backgroundColor = "red";
 }
 }
 });
 </script>

在这个例子里面，我们创建了一个宽和高都是100px的div。背景颜色是红色，在鼠标悬停时我们将颜色变成了蓝色，我们在鼠标悬停的时候绑定的是changebgcolor方法，一旦我们移出鼠标会触发我们绑定的originalcolor方法，在这里我们又将styleobj对象绑定到了div的style属性上，这样就实现了我们想要的效果，浏览器截图如下：

事件修饰符

Vue在v-on属性上有一些可用的修饰符

once修饰符（表示这个事件只执行一次）

语法如下：

<button v-on:click.once = "buttonclicked">点击</button>

我们通过一个简单的例子来理解下它的含义

 <div id="databinding">
 <button v-on:click.once="buttonclickedonce" v-bind:style="styleobj">
 点击
 </button>
 输出:{{ clicknum }} <br /><br />
 <button v-on:click="buttonclicked" v-bind:style="styleobj">
 点击
 </button>
 输出:{{ clicknum1 }}
 </div>
 <script type="text/javascript">
 var vm = new Vue({
 el: "#databinding",
 data: {
 clicknum: 0,
 clicknum1: 0,
 styleobj: {
 backgroundColor: "#2196F3 !important",
 cursor: "pointer",
 padding: "8px 16px",
 verticalAlign: "middle"
 }
 },
 methods: {
 buttonclickedonce: function() {
 this.clicknum++;
 },
 buttonclicked: function() {
 this.clicknum1++;
 }
 }
 });
 </script>

当我们运行项目的时候，点击第一个按钮发现只会输出1，后面的点击效果无效，而第二个按钮则不会，正常的执行

prevent修饰符

语法如下：

<a href = "http://www.baidu.com" v-on:click.prevent = "clickme">点击</a>

示例：

<div id="databinding">
 <a
 href="http://www.baidu.com"
 v-on:click="clickme"
 target="_blank"
 v-bind:style="styleobj"
 >点击</a
 >
 </div>
 <script type="text/javascript">
 var vm = new Vue({
 el: "#databinding",
 data: {
 clicknum: 0,
 clicknum1: 0,
 styleobj: {
 color: "#4CAF50",
 marginLeft: "20px",
 fontSize: "30px"
 }
 },
 methods: {
 clickme: function() {
 alert("点击了a标签");
 }
 }
 });
 </script>

运行项目后我们发现，它事先弹出了提醒，然后跳转了页面，也就是执行了点击事件之后，进行了Url的跳转，此时我们添加一个prevent修饰符，如下代码：

<a href="http://www.baidu.com"
 v-on:click.prevent="clickme"
 target="_blank"
 v-bind:style="styleobj"
 >点击</a
 >

在打开页面发现点击之后只是弹出了提醒，而没有在打开页面，这就是由于我们添加了prevent修饰符的原因，它只会执行绑定的点击事件

按键修饰符

VueJS提供了基于我们可以控制事件处理的按键修饰符。假如我们有一个文本框，我们希望只有在按Enter键时才调用该方法。我们可以通过向事件添加键修饰符来实现，如下所示：

<input type = "text" v-on:keyup.enter = "showinputvalue"/>

我们想要应用于我们的事件的关键是v-on.eventname.keyname（如上所示）

我们还可以使用多个按键，例如v-on.keyup.ctrl.enter

示例代码：

<div id="databinding">
 <input
 type="text"
 v-on:keyup.enter="showinputvalue"
 v-bind:style="styleobj"
 placeholder="输入你的名字"
 />
 <h3>{{ name }}</h3>
 </div>
 <script type="text/javascript">
 var vm = new Vue({
 el: "#databinding",
 data: {
 name: "",
 styleobj: {
 width: "30%",
 padding: "12px 20px",
 margin: "8px 0",
 boxSizing: "border-box"
 }
 },
 methods: {
 showinputvalue: function(event) {
 this.name = event.target.value;
 }
 }
 });
 </script>

我们来看下执行的效果：

此时我们还没有按下Enter键，我们按下Enter键后再看下

自定义事件

父组件可以使用prop属性将数据传递给其子组件，但是，我们需要在子组件发生更改时告诉父组件。为此，我们可以使用自定义事件。父组件可以使用v-on属性侦听子组件事件。

示例

<div id="databinding">
 <div id="counter-event-example">
 <p style="font-size:25px;">
 当前显示的语言 : <b>{{ languageclicked }}</b>
 </p>
 <button-counter
 v-for="(item, index) in languages"
 v-bind:item="item"
 v-bind:index="index"
 v-on:showlanguage="languagedisp"
 ></button-counter>
 </div>
 </div>
 <script type="text/javascript">
 Vue.component("button-counter", {
 template:
 '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
 data: function() {
 return {
 counter: 0
 };
 },
 props: ["item"],
 methods: {
 displayLanguage: function(lng) {
 console.log(lng);
 this.$emit("showlanguage", lng);
 }
 }
 });
 var vm = new Vue({
 el: "#databinding",
 data: {
 languageclicked: "",
 languages: [
 "Java",
 "PHP",
 "C++",
 "C",
 "Javascript",
 "C#",
 "Python",
 "HTML"
 ]
 },
 methods: {
 languagedisp: function(a) {
 this.languageclicked = a;
 }
 }
 });
 </script>

执行后发现我们点击哪个就会显示哪个语言，上面的代码显示了父组件和子组件之间的数据传输，我们简单说明下：其中下面的代码创建组件

<button-counter
 v-for = "(item, index) in languages"
 v-bind:item = "item"
 v-bind:index = "index"
 v-on:showlanguage = "languagedisp">
</button-counter>

有一个v-for属性，它将与languages数组一起循环。该数组中包含一系列语言。我们需要将详细信息发送到子组件。数组的值存储在item和index中，要引用数组的值，我们需要先将它绑定到一个变量，并使用props属性引用变量，如下所示

Vue.component('button-counter', {
 template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
 data: function () {
 return {
 counter: 0
 }
 },
 props:['item'],
 methods: {
 displayLanguage: function (lng) {
 console.log(lng);
 this.$emit('showlanguage', lng);
 }
 },
});

我们自定义事件的名称就是showlanguage，它调用了languagedisp方法，在Vue的实例中定义了，这当中最主要的就是按钮的点击事件执行了

this.$emit(‘showlanguage’, lng);

$ emit用于调用父组件方法，以下截图就是我点击了Javascript按钮之后的结果

总结

Vue的事件就说到这，里面还有很多其他的用法，修饰符等，更多的需要参照官网的文档，如果本文对你有帮助，就请点个关注吧，谢谢！有什么好的建议也可以提出来！

avaScript 事件

JS 对象
JS 字符串

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

HTML 事件

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

使用单引号：

<element event='一些 JavaScript'>

使用双引号：

<element event="一些 JavaScript">

在下面的例子中，onclick 属性（以及代码）被添加到 <button> 元素：

实例

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>

在上面的例子中，JavaScript 代码改变了 id="demo" 的元素的内容。

在接下来的例子中，代码（使用 this.innerHTML）改变了其自身元素的内容：

实例

<button onclick="this.innerHTML=Date()">现在的时间是？</button>

JavaScript 代码通常有很多行。事件属性调用函数更为常见：

实例

<button onclick="displayDate()">现在的时间是？</button>

常见的 HTML 事件

下面是一些常见的 HTML 事件：

事件描述 onchange HTML 元素已被改变 onclick 用户点击了 HTML 元素 onmouseover 用户把鼠标移动到 HTML 元素上 onmouseout 用户把鼠标移开 HTML 元素 onkeydown 用户按下键盘按键 onload 浏览器已经完成页面加载

更完整的列表：W3School JavaScript 参考手册 HTML DOM 事件。

JavaScript 能够做什么？

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：

每当页面加载时应该做的事情
当页面被关闭时应该做的事情
当用户点击按钮时应该被执行的动作
当用户输入数据时应该被验证的内容
等等

在线咨询

上一篇：HTML是什么？-零基础自学网页制作
下一篇：阻止手机浏览器双击放大的方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JS实现刷新页面的方式？

击事件监听

mouseover和mouseout事件

事件修饰符

自定义事件

总结

avaScript 事件

HTML 事件

实例

实例

实例

常见的 HTML 事件

JavaScript 能够做什么？

您的项目需求