vueのtodolistDemoクラシックケース

1、vue足場ツールでmyprojectプロジェクトを生成する
2、webstormソフトでopenを開く
3、ここの/srcディレクトリの下にAppがあります.vueとmain.js
ここでappは入り口で、appにロードされたhelloworldです.vueコンポーネント
4、今すぐAppから行きます.vueドキュメントを作成
実装コードの貼り付け
App.vue

  import store from './store'

  export default {
    data() {
      return {
        title: 'todo list',
        items:store.fetch(),
        newItem: '',
      }
    },





    methods: {
      toggleFinish: function (item) {
        item.isFinished = !item.isFinished
      },
      addNewItem: function () {
        //    
        this.items.push({
          label: this.newItem, isFinished: false
        }),
          this.newItem = ''
      }
    },
    watch:{
      //  items
      items:{
        handler:function (items) {
          store.save(items)
        },
        deep:true
      }
    },

  }

説明すると、classを変換するクリックイベントがあり、下線のスタイル変更を実現するために使用される命令は

v-on:click="toggleFinish(item)

2つ目はwatchがitems配列を傍受することによってlocalstorageのアクセスを実現し、f 5がページを再リフレッシュすることを実現したのは、list配列が依然として存在することである.
ここで2つの方法はfetchとsaveです
コードは次のとおりです.
store.js

const STORAGE_KEY = 'todos-vuejs'
//           ，    localstorage key，val   []  
export default {
  fetch() {
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
    //               [],     windos，  Windos，ws    ，     
  },
  save(items) {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
  }

}

そしてAppでvueでimprot store.js

import store from './store'

そして直接呼び出すことができます
store.fetch()、ws注意ありますよ
5、最後にまとめましょう
ここではいくつかのvueの一般的な命令とlocalstoeageの使用とes 6の簡単な呼び出しコンポーネントを使用しています.dotolistという古典的なケースはvue公式サイトの簡単な明瞭なケースです.次の記事では、コンポーネントの使用とコンポーネントのパラメータ伝達呼び出しについて詳しく説明します.接触したばかりのとき、iframeの子の親ページの参照インタラクションよりも、/犬の頭