51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

VueJS hello-world

100% 
<div data-vue-app="hello-world">
    <hello-world msg="Message!" />
</div>

<div data-vue-app="hello-world">
    <hello-world msg="Test" />
</div>
 
<div data-vue-app="hello-world">
    <hello-world msg="{{ msg }}"/>
</div>

<div data-vue-app="hello-world">
    <hello-world msg="Test"/>
</div>
 
{
  "msg": "Message!"
}
  • Content: 
    import Vue from 'vue/dist/vue';
import Hello from './hello-world.vue';

export default function (element) {
  new Vue({
    el: element,
    components: {
      'hello-world': Hello,
    },
  });
}

if (module.hot) {
  module.hot.accept();
}
  • URL: /components/raw/hello-world/hello-world-app.js
  • Filesystem Path: src/patterns/20-components/hello-world/hello-world-app.js
  • Size: 242 Bytes
  • Content: 
    <template>
  <div class="c-hello-world">
    <h1>{{ msg }}</h1>
    <ul v-if="items">
      <li :key="index" v-for="(item, index) in items">
        {{ item }} ({{ index}})
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: 'hello-world',
        props: {
            msg: {
                default: '',
                type: String,
            },
        },
        data() {
            return {
                items: [
                    'First item',
                    'Another item',
                    'Last item',
                ],
            };
        },
    };
</script>

<style lang="scss">
  .c-hello-world {
    background-color: $dark-gray;
    color: $white;
    padding: 1em;
    margin: 1em;

    h1 {
      color: rebeccapurple;
    }
  }
</style>
  • URL: /components/raw/hello-world/hello-world.vue
  • Filesystem Path: src/patterns/20-components/hello-world/hello-world.vue
  • Size: 810 Bytes

There are no notes for this item.