JS實(shí)現(xiàn)刷新頁(yè)面的方式？

JavaScript 中，有幾種方式可以實(shí)現(xiàn)刷新頁(yè)面的操作，以下是其中一些常見的方法：

1. 使用location對(duì)象：

```javascript

// 刷新當(dāng)前頁(yè)面

location.reload();

// 強(qiáng)制從服務(wù)器重新加載頁(yè)面，不使用緩存

location.reload(true);

```

2. 使用location.href：

```javascript

// 通過修改當(dāng)前 URL 來刷新頁(yè)面

location.href = location.href;

```

3. 使用history對(duì)象：

```javascript

// 刷新當(dāng)前頁(yè)面

history.go(0);

```

4. 使用location.replace：

```javascript

// 刷新當(dāng)前頁(yè)面，類似于location.reload()

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

```

5. 通過按鈕的點(diǎn)擊事件觸發(fā)刷新：

```javascript

// HTML 中添加一個(gè)按鈕

// <button id="refreshButton">刷新頁(yè)面</button>

// JavaScript 中給按鈕添加點(diǎn)擊事件

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

// 刷新頁(yè)面

location.reload();

});

```

這些方法可以根據(jù)具體需求選擇使用。請(qǐng)注意，有些刷新方式可能會(huì)重新加載頁(yè)面并清除所有狀態(tài)，而有些則可能從緩存中加載頁(yè)面。在使用時(shí)需要根據(jù)實(shí)際情況選擇合適的方法。

擊事件監(jiān)聽

這里我們同樣的，不過今天只用都寫在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">點(diǎn)我</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>

這里我們使用了這樣的一個(gè)語(yǔ)法

<button v-on:click = "displaynumbers">點(diǎn)擊</button>

displaynumbers就是我們定義在Vue示例屬性methods中的事件對(duì)象名稱，這里我們還有一盒簡(jiǎn)化的寫法

<button @click="displaynumbers">點(diǎn)我</button>

我們可以使用@符號(hào)替代v-on的寫法，這種方式更簡(jiǎn)潔，下面截圖是這段代碼的結(jié)果

mouseover和mouseout事件

我們?cè)谶@里在測(cè)試下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>

在這個(gè)例子里面，我們創(chuàng)建了一個(gè)寬和高都是100px的div。背景顏色是紅色，在鼠標(biāo)懸停時(shí)我們將顏色變成了藍(lán)色，我們?cè)谑髽?biāo)懸停的時(shí)候綁定的是changebgcolor方法，一旦我們移出鼠標(biāo)會(huì)觸發(fā)我們綁定的originalcolor方法，在這里我們又將styleobj對(duì)象綁定到了div的style屬性上，這樣就實(shí)現(xiàn)了我們想要的效果，瀏覽器截圖如下：

事件修飾符

Vue在v-on屬性上有一些可用的修飾符

once修飾符（表示這個(gè)事件只執(zhí)行一次）

語(yǔ)法如下：

<button v-on:click.once = "buttonclicked">點(diǎn)擊</button>

我們通過一個(gè)簡(jiǎn)單的例子來理解下它的含義

 <div id="databinding">
 <button v-on:click.once="buttonclickedonce" v-bind:style="styleobj">
 點(diǎn)擊
 </button>
 輸出:{{ clicknum }} <br /><br />
 <button v-on:click="buttonclicked" v-bind:style="styleobj">
 點(diǎn)擊
 </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>

當(dāng)我們運(yùn)行項(xiàng)目的時(shí)候，點(diǎn)擊第一個(gè)按鈕發(fā)現(xiàn)只會(huì)輸出1，后面的點(diǎn)擊效果無效，而第二個(gè)按鈕則不會(huì)，正常的執(zhí)行

prevent修飾符

語(yǔ)法如下：

<a  v-on:click.prevent = "clickme">點(diǎn)擊</a>

示例：

<div id="databinding">
 <a
 
 v-on:click="clickme"
 target="_blank"
 v-bind:style="styleobj"
 >點(diǎn)擊</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("點(diǎn)擊了a標(biāo)簽");
 }
 }
 });
 </script>

運(yùn)行項(xiàng)目后我們發(fā)現(xiàn)，它事先彈出了提醒，然后跳轉(zhuǎn)了頁(yè)面，也就是執(zhí)行了點(diǎn)擊事件之后，進(jìn)行了Url的跳轉(zhuǎn)，此時(shí)我們添加一個(gè)prevent修飾符，如下代碼：

<a 
 v-on:click.prevent="clickme"
 target="_blank"
 v-bind:style="styleobj"
 >點(diǎn)擊</a
 >

在打開頁(yè)面發(fā)現(xiàn)點(diǎn)擊之后只是彈出了提醒，而沒有在打開頁(yè)面，這就是由于我們添加了prevent修飾符的原因，它只會(huì)執(zhí)行綁定的點(diǎn)擊事件

按鍵修飾符

VueJS提供了基于我們可以控制事件處理的按鍵修飾符。假如我們有一個(gè)文本框，我們希望只有在按Enter鍵時(shí)才調(diào)用該方法。我們可以通過向事件添加鍵修飾符來實(shí)現(xiàn)，如下所示：

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

我們想要應(yīng)用于我們的事件的關(guān)鍵是v-on.eventname.keyname（如上所示）

我們還可以使用多個(gè)按鍵，例如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>

我們來看下執(zhí)行的效果：

此時(shí)我們還沒有按下Enter鍵，我們按下Enter鍵后再看下

自定義事件

父組件可以使用prop屬性將數(shù)據(jù)傳遞給其子組件，但是，我們需要在子組件發(fā)生更改時(shí)告訴父組件。為此，我們可以使用自定義事件。父組件可以使用v-on屬性偵聽子組件事件。

示例

<div id="databinding">
 <div id="counter-event-example">
 <p style="font-size:25px;">
 當(dāng)前顯示的語(yǔ)言 : <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>

執(zhí)行后發(fā)現(xiàn)我們點(diǎn)擊哪個(gè)就會(huì)顯示哪個(gè)語(yǔ)言，上面的代碼顯示了父組件和子組件之間的數(shù)據(jù)傳輸，我們簡(jiǎn)單說明下：其中下面的代碼創(chuàng)建組件

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

有一個(gè)v-for屬性，它將與languages數(shù)組一起循環(huán)。該數(shù)組中包含一系列語(yǔ)言。我們需要將詳細(xì)信息發(fā)送到子組件。數(shù)組的值存儲(chǔ)在item和index中，要引用數(shù)組的值，我們需要先將它綁定到一個(gè)變量，并使用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，它調(diào)用了languagedisp方法，在Vue的實(shí)例中定義了，這當(dāng)中最主要的就是按鈕的點(diǎn)擊事件執(zhí)行了

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

$ emit用于調(diào)用父組件方法，以下截圖就是我點(diǎn)擊了Javascript按鈕之后的結(jié)果

總結(jié)

Vue的事件就說到這，里面還有很多其他的用法，修飾符等，更多的需要參照官網(wǎng)的文檔，如果本文對(duì)你有幫助，就請(qǐng)點(diǎn)個(gè)關(guān)注吧，謝謝！有什么好的建議也可以提出來！

avaScript 事件

JS 對(duì)象
JS 字符串

HTML 事件是發(fā)生在 HTML 元素上的“事情”。

當(dāng)在 HTML 頁(yè)面中使用 JavaScript 時(shí)，JavaScript 能夠“應(yīng)對(duì)”這些事件。

HTML 事件

HTML 事件可以是瀏覽器或用戶做的某些事情。

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

HTML 網(wǎng)頁(yè)完成加載
HTML 輸入字段被修改
HTML 按鈕被點(diǎn)擊

通常，當(dāng)事件發(fā)生時(shí)，用戶會(huì)希望做某件事。

JavaScript 允許您在事件被偵測(cè)到時(shí)執(zhí)行代碼。

通過 JavaScript 代碼，HTML 允許您向 HTML 元素添加事件處理程序。

使用單引號(hào)：

<element event='一些 JavaScript'>

使用雙引號(hào)：

<element event="一些 JavaScript">

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

實(shí)例

<button onclick='document.getElementById("demo").innerHTML=Date()'>現(xiàn)在的時(shí)間是？</button>

在上面的例子中，JavaScript 代碼改變了 id="demo" 的元素的內(nèi)容。

在接下來的例子中，代碼（使用 this.innerHTML）改變了其自身元素的內(nèi)容：

實(shí)例

<button onclick="this.innerHTML=Date()">現(xiàn)在的時(shí)間是？</button>

JavaScript 代碼通常有很多行。事件屬性調(diào)用函數(shù)更為常見：

實(shí)例

<button onclick="displayDate()">現(xiàn)在的時(shí)間是？</button>

常見的 HTML 事件

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

事件描述 onchange HTML 元素已被改變 onclick 用戶點(diǎn)擊了 HTML 元素 onmouseover 用戶把鼠標(biāo)移動(dòng)到 HTML 元素上 onmouseout 用戶把鼠標(biāo)移開 HTML 元素 onkeydown 用戶按下鍵盤按鍵 onload 瀏覽器已經(jīng)完成頁(yè)面加載

更完整的列表：W3School JavaScript 參考手冊(cè) HTML DOM 事件。

JavaScript 能夠做什么？

事件處理程序可用于處理、驗(yàn)證用戶輸入、用戶動(dòng)作和瀏覽器動(dòng)作：

每當(dāng)頁(yè)面加載時(shí)應(yīng)該做的事情
當(dāng)頁(yè)面被關(guān)閉時(shí)應(yīng)該做的事情
當(dāng)用戶點(diǎn)擊按鈕時(shí)應(yīng)該被執(zhí)行的動(dòng)作
當(dāng)用戶輸入數(shù)據(jù)時(shí)應(yīng)該被驗(yàn)證的內(nèi)容
等等

在線咨詢

上一篇：HTML是什么？-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
下一篇：阻止手機(jī)瀏覽器雙擊放大的方法

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

JS實(shí)現(xiàn)刷新頁(yè)面的方式？

擊事件監(jiān)聽

mouseover和mouseout事件

事件修飾符

自定義事件

總結(jié)

avaScript 事件

HTML 事件

實(shí)例

實(shí)例

實(shí)例

常見的 HTML 事件

JavaScript 能夠做什么？

您的項(xiàng)目需求