Skip to content

Vue JS Basics

Jump to bottom
Jinyoung Jang edited this page Jul 4, 2017 · 5 revisions

Very very first example

Just paste these source code with any file name, and just run them in any browser.

<script src="https://unpkg.com/vue"></script>

<div id="app">
    {{ message }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
        message: 'Hello, Vue!'
        }
    })
</script>

and just change the value of the instance 'app.message' in your javascript console, then the user interface may respond to your change:

 app.message = 'Hello, Metaworks!';

or you can add javascript at the bottom of script, in order to change the message automatically:

      setInterval(
            function(){app.message = app.message + "  +1  ";}, 1000);

and you can extend data model:

<script src="https://unpkg.com/vue"></script>

<div id="app">
    {{ message }}
    <br>
    like {{like}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue!',
            like: 0
        }
    })

    setInterval(

      function(){
        app.like++;
      },

      1000
    );
</script>

Incorporating Components

Not mixing javascript and styles anymore. Just call your tag name.

<script src="https://unpkg.com/vue"></script>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material@0.7.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-material@0.7.1/dist/vue-material.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script>

    Vue.use(VueMaterial)

</script>


<div id="app">

    <md-avatar class="md-avatar-icon">
        <md-icon>home</md-icon>
    </md-avatar>


    {{ message }}
    <br>
    like {{like}}


    <md-speed-dial md-mode="scale" class="md-fab-bottom-right">
        <md-button class="md-fab" md-fab-trigger>
            <md-icon md-icon-morph>close</md-icon>
            <md-icon>share</md-icon>
        </md-button>

        <md-button class="md-fab md-mini md-clean">
            <md-icon>email</md-icon>
        </md-button>

        <md-button class="md-fab md-mini md-clean">
            <md-icon>content_copy</md-icon>
        </md-button>
    </md-speed-dial>

</div>



<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello, Vue!',
            like: 0
        }
    })

    setInterval(

      function(){
        app.like++;
      },

      1000
    );
</script>

Very first example with VueJS + Material

Just paste these source code with any file name, and just run them in any browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-material@0.7.1"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script>


    <link rel="stylesheet" href="https://unpkg.com/vue-material@0.7.1/dist/vue-material.css">

    <style>

        html,
        body,
        .app-viewport {
            height: 100%;
            overflow: hidden;
        }

        .app-viewport {
            display: flex;
            flex-flow: column;
        }

        .main-toolbar {
            position: relative;
            z-index: 10;
        }

        .md-fab {
            margin: 0;
            position: absolute;
            bottom: -20px;
            left: 16px;
            z-index: 10;

        .md-icon {
            color: #fff;
        }
        }

        .md-title {
            padding-left: 8px;
            color: #fff;
        }

        .main-content {
            position: relative;
            z-index: 1;
            overflow: auto;
        }

        .md-list-action .md-icon {
            color: rgba(#000, .26);
        }

        .md-avatar-icon .md-icon {
            color: #fff !important;
        }

        .md-sidenav .md-list-text-container > :nth-child(2) {
            color: rgba(#fff, .54);
        }

        .md-account-header {
        .md-list-item:hover .md-button:hover {
            background-color: inherit;
        }

        .md-avatar-list .md-list-item-container:hover {
            background: none !important;
        }
        }

    </style>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    Vue.use(VueMaterial)

    Vue.material.registerTheme({
        default: {
            primary: 'blue',
            accent: 'red'
        },
        green: {
            primary: 'green',
            accent: 'pink'
        },
        orange: {
            primary: 'orange',
            accent: 'green'
        },
    })

</script>


<div id="app">
    {{ message }}
</div>

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

<div id="app-3">
    <md-toolbar>
        <h1 class="md-title">My Title</h1>
    </md-toolbar>

    <div class="main-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, rerum? Error sunt, aperiam dolores, atque expedita molestiae tenetur. Quis eveniet accusamus velit explicabo adipisci reiciendis modi eaque quas, officia excepturi.</p>
    </div>
</div>

<div class="app-viewport" id="file-list">
    <md-sidenav class="md-left md-fixed" ref="sidebar">
        <md-toolbar class="md-account-header">
            <md-list class="md-transparent">
                <md-list-item class="md-avatar-list">
                    <md-avatar class="md-large">
                        <img src="https://placeimg.com/64/64/people/8" alt="People">
                    </md-avatar>

                    <span style="flex: 1"></span>

                    <md-avatar>
                        <img src="https://placeimg.com/40/40/people/3" alt="People">
                    </md-avatar>

                    <md-avatar>
                        <img src="https://placeimg.com/40/40/people/4" alt="People">
                    </md-avatar>
                </md-list-item>

                <md-list-item>
                    <div class="md-list-text-container">
                        <span>John Doe</span>
                        <span>johndoe@email.com</span>
                    </div>

                    <md-button class="md-icon-button md-list-action">
                        <md-icon>arrow_drop_down</md-icon>
                    </md-button>
                </md-list-item>
            </md-list>
        </md-toolbar>

        <md-list>
            <md-list-item @click="$refs.sidebar.toggle()" class="md-primary">
                <md-icon>insert_drive_file</md-icon> <span>My files</span>
            </md-list-item>

            <md-list-item @click="$refs.sidebar.toggle()">
                <md-icon>people</md-icon> <span>Shared with me</span>
            </md-list-item>

            <md-list-item @click="$refs.sidebar.toggle()">
                <md-icon>access_time</md-icon> <span>Recent</span>
            </md-list-item>

            <md-list-item @click="$refs.sidebar.toggle()">
                <md-icon>start</md-icon> <span>Starred</span>
            </md-list-item>

            <md-list-item @click="$refs.sidebar.toggle()">
                <md-icon>delete</md-icon> <span>Trash</span>
            </md-list-item>
        </md-list>
    </md-sidenav>

    <md-whiteframe md-elevation="3" class="main-toolbar">
        <md-toolbar class="md-large">
            <div class="md-toolbar-container">
                <md-button class="md-icon-button" @click="$refs.sidebar.toggle()">
                    <md-icon>menu</md-icon>
                </md-button>

                <span style="flex: 1"></span>

                <md-button class="md-icon-button">
                    <md-icon>search</md-icon>
                </md-button>

                <md-button class="md-icon-button">
                    <md-icon>view_module</md-icon>
                </md-button>
            </div>

            <div class="md-toolbar-container">
                <h2 class="md-title">My Files</h2>

                <md-button class="md-fab md-mini">
                    <md-icon>add</md-icon>
                </md-button>
            </div>
        </md-toolbar>
    </md-whiteframe>

    <main class="main-content">
        <md-list class="md-double-line">
            <md-subheader class="md-inset">Folders</md-subheader>

            <md-list-item>
                <md-avatar class="md-avatar-icon">
                    <md-icon>folder</md-icon>
                </md-avatar>

                <div class="md-list-text-container">
                    <span>Photos</span>
                    <p>Jan 9, 2014</p>
                </div>

                <md-button class="md-icon-button md-list-action">
                    <md-icon>info</md-icon>
                </md-button>
            </md-list-item>

            <md-list-item>
                <md-avatar class="md-avatar-icon">
                    <md-icon>folder</md-icon>
                </md-avatar>

                <div class="md-list-text-container">
                    <span>Recipes</span>
                    <p>Jan 17, 2014</p>
                </div>

                <md-button class="md-icon-button md-list-action">
                    <md-icon>info</md-icon>
                </md-button>
            </md-list-item>

            <md-list-item>
                <md-avatar class="md-avatar-icon">
                    <md-icon>folder</md-icon>
                </md-avatar>

                <div class="md-list-text-container">
                    <span>Work</span>
                    <p>Jan 28, 2014</p>
                </div>

                <md-button class="md-icon-button md-list-action">
                    <md-icon>info</md-icon>
                </md-button>

                <md-divider class="md-inset"></md-divider>
            </md-list-item>

            <md-subheader class="md-inset">Files</md-subheader>

            <md-list-item>
                <md-avatar class="md-avatar-icon md-primary">
                    <md-icon>insert_drive_file</md-icon>
                </md-avatar>

                <div class="md-list-text-container">
                    <span>Vacation Itinerary</span>
                    <p>Jan 20, 2014</p>
                </div>

                <md-button class="md-icon-button md-list-action">
                    <md-icon>info</md-icon>
                </md-button>
            </md-list-item>

            <md-list-item>
                <md-avatar md-theme="orange" class="md-avatar-icon md-primary">
                    <md-icon>collections</md-icon>
                </md-avatar>

                <div class="md-list-text-container">
                    <span>Kitchen Remodel</span>
                    <p>Jan 10, 2014</p>
                </div>

                <md-button class="md-icon-button md-list-action">
                    <md-icon>info</md-icon>
                </md-button>
            </md-list-item>

            <md-list-item>
                <md-avatar md-theme="green" class="md-avatar-icon md-primary">
                    <md-icon>view_list</md-icon>
                </md-avatar>

                <div class="md-list-text-container">
                    <span>Grocery Shop</span>
                    <p>Jan 10, 2014</p>
                </div>

                <md-button class="md-icon-button md-list-action">
                    <md-icon>info</md-icon>
                </md-button>
            </md-list-item>

            <md-list-item>
                <md-avatar md-theme="orange" class="md-avatar-icon md-primary">
                    <md-icon>collections</md-icon>
                </md-avatar>

                <div class="md-list-text-container">
                    <span>Weekend Pictures</span>
                    <p>Jan 10, 2014</p>
                </div>

                <md-button class="md-icon-button md-list-action">
                    <md-icon>info</md-icon>
                </md-button>
            </md-list-item>
        </md-list>
    </main>
</div>

<script>



    //    var Vue = require('vue')
    //    var VueMaterial = require('vue-material')
    //

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })

    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: 'You loaded this page on ' + new Date()
        }
    })

    var App3 = new Vue({
        el: '#app-3'
    })

    new Vue({
        el: '#file-list'
    })


</script>

</body>
</html>

AJAX and Material

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-material@0.7.1"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/vue-material@0.7.1/dist/vue-material.css">


</head>
<body>

<script>

    Vue.use(VueMaterial)

</script>


<script type="text/x-template" id="grid-template">
    <table>
        <thead>
        <tr>
            <th v-for="key in columns"
                @click="sortBy(key)"
                :class="{ active: sortKey == key }">
                {{ key | capitalize }}
                <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
          </span>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="entry in filteredData">
            <td v-for="key in columns">
                {{entry[key]}}
            </td>
        </tr>
        </tbody>
    </table>
</script>

<!-- demo root element -->
<div id="demo-1">
    <form id="search">
        Search <input name="query" v-model="searchQuery">
    </form>
    <demo-grid
            :data="gridData"
            :columns="gridColumns"
            :filter-key="searchQuery">
    </demo-grid>
</div>

<div id="demo">
    <h1>Latest Vue.js Commits</h1>
    <template v-for="branch in branches">
        <input type="radio"
               :id="branch"
               :value="branch"
               name="branch"
               v-model="currentBranch">
        <label :for="branch">{{ branch }}</label>
    </template>
    <p>vuejs/vue@{{ currentBranch }}</p>
    <ul>
        <li v-for="record in commits">
            <a :href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(0, 7) }}</a>
            - <span class="message">{{ record.commit.message | truncate }}</span><br>
            by <span class="author"><a :href="record.author.html_url" target="_blank">{{ record.commit.author.name }}</a></span>
            at <span class="date">{{ record.commit.author.date | formatDate }}</span>
        </li>
    </ul>
</div>

<script>


    Vue.component('demo-grid', {
        template: '#grid-template',
        props: {
            data: Array,
            columns: Array,
            filterKey: String
        },
        data: function () {
            var sortOrders = {}
            this.columns.forEach(function (key) {
                sortOrders[key] = 1
            })
            return {
                sortKey: '',
                sortOrders: sortOrders
            }
        },
        computed: {
            filteredData: function () {
                var sortKey = this.sortKey
                var filterKey = this.filterKey && this.filterKey.toLowerCase()
                var order = this.sortOrders[sortKey] || 1
                var data = this.data
                if (filterKey) {
                    data = data.filter(function (row) {
                        return Object.keys(row).some(function (key) {
                            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
                        })
                    })
                }
                if (sortKey) {
                    data = data.slice().sort(function (a, b) {
                        a = a[sortKey]
                        b = b[sortKey]
                        return (a === b ? 0 : a > b ? 1 : -1) * order
                    })
                }
                return data
            }
        },
        filters: {
            capitalize: function (str) {
                return str.charAt(0).toUpperCase() + str.slice(1)
            }
        },
        methods: {
            sortBy: function (key) {
                this.sortKey = key
                this.sortOrders[key] = this.sortOrders[key] * -1
            }
        }
    })

    // bootstrap the demo
    var demo1 = new Vue({
        el: '#demo-1',
        data: {
            searchQuery: '',
            gridColumns: ['name', 'power'],
            gridData: [
                { name: 'Chuck Norris', power: Infinity },
                { name: 'Bruce Lee', power: 9000 },
                { name: 'Jackie Chan', power: 7000 },
                { name: 'Jet Li', power: 8000 }
            ]
        }
    })

    var apiURL = 'https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha='

    /**
     * Actual demo
     */

    var demo = new Vue({

        el: '#demo',

        data: {
            branches: ['master', 'dev'],
            currentBranch: 'master',
            commits: null
        },

        created: function () {
            this.fetchData()
        },

        watch: {
            currentBranch: 'fetchData'
        },

        filters: {
            truncate: function (v) {
                var newline = v.indexOf('\n')
                return newline > 0 ? v.slice(0, newline) : v
            },
            formatDate: function (v) {
                return v.replace(/T|Z/g, ' ')
            }
        },

        methods: {
            fetchData: function () {
                var xhr = new XMLHttpRequest()
                var self = this
                xhr.open('GET', apiURL + self.currentBranch)
                xhr.onload = function () {
                    self.commits = JSON.parse(xhr.responseText)
                    console.log(self.commits[0].html_url)
                }
                xhr.send()
            }
        }
    });

</script>

</body>
</html>
Clone this wiki locally