Übung 10 - Vue

Single File Component


  export default {
        template: `
          <div><input type="text" @keyup="compute" v-model="message">
          <div>Letters: {{letters }}</div>
          <div>Spaces: {{spaces}}</div>
          <div>Words: {{words}}</div>
          </div>`,
        data(){
            return{
                letters: 0, spaces: 0, words:0
            }
        },
        methods: {
            compute() {
                this.spaces = this.message.split(' ').length - 1;
                this.letters = this.message.length - this.spaces;
                this.words = this.message.split(' ').length;
            }
        }
    }

Testseite


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Singe File Component</title>
        <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    </head>
    <div style="display: flex; margin: 10px; width: 50%">
        <div id="app" style="flex: 25%">
            <single-file-component></single-file-component>
        </div>
        <br>
        <div id="app2" style="flex: 25%">
            <single-file-component></single-file-component>
        </div>
    </div>

    <script type="module">
        import SingleFileComponent from './singlefilecomp.js';

        new Vue ({
            el: '#app',
            components:{
                SingleFileComponent,
            }
        });
        new Vue ({
            el: '#app2',
            components:{
                SingleFileComponent,
            }
        });
    </script>
    </html>

10.2 Menü-Komponente

Menu.vue


    <template>
      <div>
        <ul>
          <li :class="{ inline: inline}">
            <a><h1>{{item1}}</h1></a>
          </li>
          <li :class="{inline: inline}">
            <a><h1>{{item2}}</h1></a>
          </li>
          <li :class="{inline: inline}">
            <a><h1>{{item3}}</h1></a>
          </li>
          <li :class="{inline: inline}">
            <a><h1>{{item4}}</h1></a>
          </li>
        </ul>
      </div>
    </template>

    <script>
    export default {
        name: 'Menu',
        props: {
            item1: String,
            item2: String,
            item3: String,
            item4: String,
            inline: Boolean
        },
    }
    </script>

                    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    .inline {
        display: inline-block;
    }
    li {
        background-color: #2b96e0;
        border-radius: 10px;
        border: 3px solid #063d8f;
        width: 10%;
        line-height: 5px;
        text-align: center;
        margin: 1em;
        list-style: none
    }

    a {
        color: #000000;
        text-decoration: none;
        font-size: 13px;
        font-weight: inherit;
    }
    </style>

App.vue


    <template>
      <div id="app">
        <!-- display: inline -->
        <Menu inline item1="HTML" item2="CSS" item3="JavaScript" item4="DOM"/>
          <!-- display: block -->
        <Menu item1="HTML" item2="CSS" item3="JavaScript" item4="DOM"/>
      </div>
    </template>

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

    export default {
        name: 'App',
        components: {
            Menu
        }
    }
    </script>

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

main.js


    import { createApp } from 'vue'
    import App from './App.vue'

    createApp(App).mount('#app')

index.html


    <!DOCTYPE html>
    <html lang="">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <title><%= htmlWebpackPlugin.options.title %></title>
      </head>
      <body>
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>