diff options
| -rw-r--r-- | src/App.vue | 7 | ||||
| -rw-r--r-- | src/components/Cidr.vue | 39 | ||||
| -rw-r--r-- | src/components/HelloWorld.vue | 113 |
3 files changed, 42 insertions, 117 deletions
diff --git a/src/App.vue b/src/App.vue index 6f86de0..3eb009f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,17 +1,16 @@ <template> <div id="app"> - <img src="./assets/logo.png"> - <HelloWorld/> + <Cidr/> </div> </template> <script> -import HelloWorld from './components/HelloWorld' +import Cidr from './components/Cidr' export default { name: 'App', components: { - HelloWorld + Cidr } } </script> diff --git a/src/components/Cidr.vue b/src/components/Cidr.vue new file mode 100644 index 0000000..181c64e --- /dev/null +++ b/src/components/Cidr.vue @@ -0,0 +1,39 @@ +<template> + <div class="ip"> + <div class="octets" v-for="octet in octets"> + <span class="octet">{{ octet }}</span> + </div> + <div class="mask">{{ mask }}</div> + </div> +</template> + +<script> +import { Netmask } from 'netmask' + +export default { + name: 'Cidr', + data () { + return { + octets: [10, 88, 135, 144], + mask: 28 + } + } +} +</script> + +<style scoped> +h1, h2 { + font-weight: normal; +} +ul { + list-style-type: none; + padding: 0; +} +li { + display: inline-block; + margin: 0 10px; +} +a { + color: #42b983; +} +</style> diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 1c19f2a..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,113 +0,0 @@ -<template> - <div class="hello"> - <h1>{{ msg }}</h1> - <h2>Essential Links</h2> - <ul> - <li> - <a - href="https://vuejs.org" - target="_blank" - > - Core Docs - </a> - </li> - <li> - <a - href="https://forum.vuejs.org" - target="_blank" - > - Forum - </a> - </li> - <li> - <a - href="https://chat.vuejs.org" - target="_blank" - > - Community Chat - </a> - </li> - <li> - <a - href="https://twitter.com/vuejs" - target="_blank" - > - Twitter - </a> - </li> - <br> - <li> - <a - href="http://vuejs-templates.github.io/webpack/" - target="_blank" - > - Docs for This Template - </a> - </li> - </ul> - <h2>Ecosystem</h2> - <ul> - <li> - <a - href="http://router.vuejs.org/" - target="_blank" - > - vue-router - </a> - </li> - <li> - <a - href="http://vuex.vuejs.org/" - target="_blank" - > - vuex - </a> - </li> - <li> - <a - href="http://vue-loader.vuejs.org/" - target="_blank" - > - vue-loader - </a> - </li> - <li> - <a - href="https://github.com/vuejs/awesome-vue" - target="_blank" - > - awesome-vue - </a> - </li> - </ul> - </div> -</template> - -<script> -export default { - name: 'HelloWorld', - data () { - return { - msg: 'Welcome to Your Vue.js App' - } - } -} -</script> - -<!-- Add "scoped" attribute to limit CSS to this component only --> -<style scoped> -h1, h2 { - font-weight: normal; -} -ul { - list-style-type: none; - padding: 0; -} -li { - display: inline-block; - margin: 0 10px; -} -a { - color: #42b983; -} -</style> |