localstorage を使用して Vue にページ情報を保存する詳細な例

小云云
リリース: 2018-05-14 16:04:29
オリジナル
5898 人が閲覧しました

この記事では主に、Vue でページ情報を保存するための localstorage の使用方法を紹介します。これが非常に優れていると思いますので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

環境設定:

参考:vue API

超簡単なVue.js環境設定チュートリアル

詳細:

npm install --global vue-clinpm install --global vue-cli

 vue init webpack vue-project

然后:

cd vue-project

npm install    如果你配置了淘宝镜像,也可以用cnpm install

npm run dev

vue init webpack vue-project

次に:

cd vue-project

npm install If Taobao ミラーを設定したら、cnpm install を使用することもできます

npm run dev

ブラウザには次のように表示されます:

しかし、最終的には次のようになります:

写真のような効果を実現するにはどうすればよいですか?

1. App.vue を次のように変更します:

<template>
 <p id="app">
  <p class=&#39;vue-demo&#39;>
   <input type="text" class="txt" v-model=&#39;newItem&#39; @keyup.enter=&#39;addItemFun&#39;>
   <ul>
    <li v-for="its in items">{{its.name}}</li>
   </ul>
  </p>
 </p>
</template>
<script>
import store from &#39;./store&#39;
export default {
 name: &#39;app&#39;,
 data() {
  return {
   newItem: &#39;&#39;,
   items: store.fetch()
  }
 },
 watch: {
  items: {
   handler: function(val, oldVal) {
    store.save(val);
   },
   deep: true
  }
 },
 methods: {
  addItemFun() {
   var _this = this;
   _this.items.push({ &#39;name&#39;: _this.newItem });
   _this.newItem = &#39;&#39;;
  }
 }
}

</script>
<style>
#app {
 font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}

.vue-demo {
 width: 400px;
 margin: 0 30px;
}

.txt {
 width: 200px;
 height: 25px;
 line-height: 24px;
 border-radius: 5px;
}

</style>
ログイン後にコピー

Vue を初めて使用する方は、watch に慣れていない可能性があるため、vue API に移動するか、Xiaoying の以前の記事を参照してください: vue—— インスタンス メソッド/データ

2. App.vue と同じディレクトリに、新しい store.js ファイルを作成します:

const STORAGE_KEY = &#39;todos-vuejs&#39;

export default {

 fetch: function() {

  return window.JSON.parse(window.localStorage.getItem(STORAGE_KEY) || &#39;[]&#39;)

 },

 save: function(items) {

  window.localStorage.setItem(STORAGE_KEY, window.JSON.stringify(items))

 }

}
ログイン後にコピー

3. プロジェクトで cmd ウィンドウを開き、npm run dev を実行すると完了です。 🎜🎜関連する推奨事項: 🎜🎜🎜WeChatがlocalStorageを保存できない問題を解決するCookieの詳細な説明🎜🎜🎜🎜 HTML5 localStorageの知識ポイントのまとめ🎜🎜🎜🎜HTML5でlocalStorageを使用してパスワード記憶機能を実装する🎜🎜

以上がlocalstorage を使用して Vue にページ情報を保存する詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート