Vue component 导入和使用

1.新建Component

<template>
    <div>
        <aside>
            <button@click="checkStore()">检查支持存储</button>
        </aside>
        <header>试一下输入值存储</header>
        <input id="value" v-model="info" />
        <p id="show" ref="show">{{info}}</p><br />
        <button @click="save()">保存了老哥</button>
        <button @click="getValue()">取值了老哥</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                info: "",
            }
        },
        methods: {
            save: function() {
                localStorage.myInfo = this.info;
            },
            checkStore: function() {
                var support = false;
                if (typeof(Storage) !== "undefined") {
                    support = true;
                } else {
                    support = false;
                }
                alert(support ? "支持" : "不支持");
            },
            getValue: function() {
                this.info = "sdf" + localStorage.myInfo;
            }
        }
    }
</script>
<style>
</style>

2.导入

<script>
import storage from './components/storage.vue
</script>

3.声明

 components: {
      storage
  }

4.使用

<template>
  <div id="app">
   <storage></storage>
  </div>
</template>