vue で現在のページを更新する方法の簡単な分析-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

vue で現在のページを更新する方法の簡単な分析

青灯夜游

Jan 14, 2023 pm 07:24 PM

javascriptフロントエンドvue.js

vue はどのようにして現在のページを更新しますか?次の記事では、Vue で現在のページを更新する実装方法をいくつか紹介しますので、ご参考になれば幸いです。

vue で現在のページを更新する方法の簡単な分析

#プロジェクトで追加/変更/削除などの操作を行う場合、通常はデータを更新するか、現在のページを更新する必要があります。

考え方

(1) ページが単純な場合は、インターフェイスを呼び出してデータを更新するだけです。 (2) ページが複雑な場合は、複数のインターフェイスを呼び出す必要があります。または、複数のサブコンポーネントに更新を通知するには、現在のページを更新する必要があります。現在のページを更新する 3 つの方法を次に示します。各方法にはさまざまな考え方があり、独自の長所と短所があります。
#実装

#方法 1 - location.reload および $router.go(0) メソッド経由

(a) 概要Pass# 両方##location.reload

と

$router.go(0) はページを更新できます。ブラウザの更新機能を使用します。これは、f5

キーを押して更新するのと同じです。

利点: 十分シンプル

##欠点
: 空白のページが存在し、ユーザーエクスペリエンスが悪い。 [関連する推奨事項: vuejs ビデオチュートリアル 、
Web フロントエンド開発

(b) コード

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script></script>
    <script></script>
    <style>
* {padding:0;margin:0;}
.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}
.aside{ width:200px;background-color: #d3dce6; }
.main { flex: 1; }
    </style>


    <div>
        <router-view></router-view>
    </div>

<script>
//框架页
let Layout = {
    created() {
        console.log(&#39;框架页加载&#39;)
    },
    template: `
        <div>
            <div>左侧菜单    
            <div><router-view>
        
    `
}
//首页
let Home = {
    template: `
        <div>
            首页
            <button @click="onClick">刷新
        
    `,
    created() {
        console.log(&#39;首页加载&#39;)
    },
    methods: {
        onClick(){
            // 通localtion.reload或者this.$router.go(0)实现整体刷新页面,会出现页面闪烁
            // location.reload()
            this.$router.go(0)
        }
    },
}
//路由配置
let router = new VueRouter({
    routes: [
        {path: &#39;/&#39;, component: Layout, children:[
            {path: &#39;&#39;, component: Home}
        ]}
    ]
}) 
Vue.use(VueRouter)
//根组件
new Vue({
    router,
    el: &#39;#app&#39;
})
</script>

(c)プレビュー

リンク

方法 2 - 空白ページ経由

(a) 概要

$router.replace メソッドを通じて、空白のページにジャンプし、その後、前のページでは、

vue-routerを使用します

ページを切り替えるとページが破棄され、新しいページが作成されます

##利点: 空白のページがありません。、優れたユーザーエクスペリエンス

: アドレスバーでの素早い切り替えプロセスが発生します

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script>
    <style>
* {padding:0;margin:0;}
.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}
.aside{ width:200px;background-color: #d3dce6; }
.main { flex: 1; }
    </style>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
</body>
<script>
//框架页
let Layout = {
    created() {
        console.log(&#39;框架页加载&#39;)
    },
    template: `
        <div>
            <div>左侧菜单</div>    
            <div><router-view></router-view></div>
        </div>
    `
}
//首页
let Home = {
    template: `
        <div>
            首页
            <button @click="onClick">刷新</button>
        </div>
    `,
    created() {
        console.log(&#39;首页加载&#39;)
    },
    methods: {
        onClick(){
            //使用replace跳转后不会留下 history 记录,并通过redirect传递当前页面的路径
            this.$router.replace(`/blank?redirect=${this.$route.fullPath}`)
        }
    },
}
//空白页面
let Blank = {
    created(){
        console.log(&#39;空白页加载&#39;)
        //重新跳回之前的页面
        this.$router.replace(this.$route.query.redirect)
    },
    template: `
        <div></div>        
    `
}
//路由配置
let router = new VueRouter({
    routes: [
        {path: &#39;/&#39;, component: Layout, children:[
            {path: &#39;&#39;, component: Home}
        ]},
        //配置空白页面的路由
        {path: &#39;/blank&#39;, component: Layout, children:[
            {path: &#39;&#39;, component: Blank}
        ]}
    ]
}) 
Vue.use(VueRouter)
//根组件
new Vue({
    router,
    el: &#39;#app&#39;
})
</script>
</html>

(c)プレビュー

リンク

メソッド3-Through Provide および Inject

##(a) 概要

By ## 親ページに ##v-if コントロールを追加して、ページを破棄して再作成してページを更新し、provide と

inject

を使用してマルチレベルコンポーネント通信。親ページは provide を通じて

reload

メソッドを提供し、子ページは inject を通じて reload メソッドを取得します。メソッドを呼び出して更新します。 利点: 空白のページがなく、アドレスバーでの素早い切り替えプロセスがなく、ユーザーエクスペリエンスが優れています。 欠点 : 実装は少し複雑で、マルチレベルコンポーネント間の

provide

inject
の通信が必要です。 v-if コントロールコンポーネントの作成と破棄、および
$nextTick
(b)コード <pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script> <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script> <style> * {padding:0;margin:0;} .container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;} .aside{ width:200px;background-color: #d3dce6; } .main { flex: 1; } </style> </head> <body> <div id="app"> <router-view></router-view> </div> </body> <script> //框架页 let Layout = { template: ` <div> <div>左侧菜单</div>  <div><router-view v-if="isRouterAlive"></router-view></div> </div> `, created() { console.log(&#39;框架页加载&#39;) }, // 通过provide提供reload方法给后代组件 provide(){ return { reload: this.reload } }, data(){ return { isRouterAlive: true } }, methods: { async reload(){ this.isRouterAlive = false //通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件 await this.$nextTick() this.isRouterAlive = true } } } //首页 let Home = { template: ` <div> 首页 <button @click="onClick">刷新</button> </div> `, created() { console.log(&#39;首页加载&#39;) }, //通过inject获取祖先元素的reload方法 inject: [&#39;reload&#39;], methods: { onClick(){ this.reload() } }, } //路由配置 let router = new VueRouter({ routes: [ {path: &#39;/&#39;, component: Layout, children:[ {path: &#39;&#39;, component: Home} ]} ] }) Vue.use(VueRouter) //根组件 new Vue({ router, el: &#39;#app&#39; }) </script> </html></pre>(c)プレビュー
リンク

(学習ビデオ共有: vuejs 入門チュートリアル 、

基本的なプログラミングのビデオ

)

以上がvue で現在のページを更新する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

vue.jsとフロントエンドスタック：接続の理解Apr 24, 2025 am 12:19 AM

VUE.JSは、開発効率とユーザーエクスペリエンスを向上させるために、フロントエンドテクノロジースタックと密接に統合されています。 1）建設ツール：Webpackおよびロールアップと統合して、モジュール開発を実現します。 2）国家管理：VUEXと統合して、複雑なアプリケーションステータスを管理します。 3）ルーティング：Vuerouterと統合して、単一ページのアプリケーションルーティングを実現します。 4）CSSプリプロセッサ：SASSをサポートし、スタイル開発効率を改善するために少なくなります。

Netflix：React（またはその他のフレームワーク）の使用の調査Apr 23, 2025 am 12:02 AM

Netflixは、Reactのコンポーネント設計と仮想DOMメカニズムが複雑なインターフェイスと頻繁な更新を効率的に処理できるため、ユーザーインターフェイスを構築するためにReactを選択しました。 1）コンポーネントベースの設計により、Netflixはインターフェイスを管理可能なウィジェットに分解し、開発効率とコード保守性を向上させることができます。 2）仮想DOMメカニズムは、DOM操作を最小化することにより、Netflixユーザーインターフェイスの滑らかさと高性能を保証します。

vue.jsとフロントエンド：フレームワークに深く飛び込むApr 22, 2025 am 12:04 AM

Vue.jsは、使いやすく強力なため、開発者に愛されています。 1）そのレスポンシブデータバインディングシステムは、ビューを自動的に更新します。 2）コンポーネントシステムは、コードの再利用性と保守性を向上させます。 3）コンピューティングプロパティとリスナーは、コードの読みやすさとパフォーマンスを向上させます。 4）Vuedevtoolsの使用とコンソールエラーのチェックは、一般的なデバッグ手法です。 5）パフォーマンスの最適化には、主要な属性、計算された属性、およびキープアライブコンポーネントの使用が含まれます。 6）ベストプラクティスには、クリアコンポーネントの命名、単一ファイルコンポーネントの使用、ライフサイクルフックの合理的な使用が含まれます。

フロントエンドのvue.jsの力：主要な機能と利点Apr 21, 2025 am 12:07 AM

Vue.jsは、効率的で保守可能なフロントエンドアプリケーションを構築するのに適した進歩的なJavaScriptフレームワークです。その主な機能には、1。レスポンシブデータバインディング、2。コンポーネント開発、3。仮想DOM。これらの機能を通じて、VUE.JSは開発プロセスを簡素化し、アプリケーションのパフォーマンスと保守性を向上させ、最新のWeb開発で非常に人気を博しています。

Vue.jsはReactよりも優れていますか？Apr 20, 2025 am 12:05 AM

Vue.jsとReactにはそれぞれ独自の利点と欠点があり、選択はプロジェクトの要件とチームの条件に依存します。 1）Vue.jsは、シンプルで使いやすいため、小さなプロジェクトや初心者に適しています。 2）Reactは、その豊富な生態系とコンポーネント設計のため、大規模なプロジェクトと複雑なUIに適しています。

Vue.jsの関数：フロントエンドでのユーザーエクスペリエンスの強化Apr 19, 2025 am 12:13 AM

Vue.jsは複数の機能を介してユーザーエクスペリエンスを改善します。1。レスポンシブシステムは、リアルタイムデータフィードバックを実現します。 2。コンポーネント開発により、コードの再利用性が向上します。 3. Vuerouterはスムーズなナビゲーションを提供します。 4.動的データの結合および遷移アニメーションは、相互作用効果を強化します。 5.エラー処理メカニズムにより、ユーザーのフィードバックが保証されます。 6.パフォーマンスの最適化とベストプラクティスは、アプリケーションのパフォーマンスを改善します。

Vue.js：Web開発におけるその役割を定義しますApr 18, 2025 am 12:07 AM

Web開発におけるVue.jsの役割は、開発プロセスを簡素化し、効率を向上させるプログレッシブJavaScriptフレームワークとして機能することです。 1）開発者は、レスポンシブデータのバインディングとコンポーネント開発を通じてビジネスロジックに集中できるようになります。 2）VUE.JSの作業原則は、パフォーマンスを最適化するためにレスポンシブシステムと仮想DOMに依存しています。 3）実際のプロジェクトでは、VUEXを使用してグローバルな状態を管理し、データの応答性を最適化することが一般的な慣行です。

Vue.jsの理解：主にフロントエンドフレームワークApr 17, 2025 am 12:20 AM

Vue.jsは、2014年にYou YuxiがリリースしたプログレッシブJavaScriptフレームワークで、ユーザーインターフェイスを構築します。その中心的な利点には、次のものが含まれます。1。レスポンシブデータバインディング、データ変更の自動更新ビュー。 2。コンポーネントの開発では、UIは独立した再利用可能なコンポーネントに分割できます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。