1. 程式人生 > >vue練習

vue練習

vue.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">{{ message }}</div>
    <div id="app-2">
        <span v-bind:title="message"> 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊! </span>
    </div>
    <div id="app-3">
        <p v-if="seen">現在你看到我了</p>
    </div>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">{{ todo.text }}</li>
        </ol>
    </div>
    <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">逆轉訊息</button>
    </div>
    <div id="app-6">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>
    <div id="app-7">
        <ol>
            <!--
      現在我們為每個 todo-item 提供 todo 物件
      todo 物件是變數,即其內容可以是動態的。
      我們也需要為每個元件提供一個“key”,稍後再
      作詳細解釋。
    -->
            <todo-item v-for="item in groceryList" v-bind:todo="item"
                v-bind:key="item.id">
            </todo-item>
        </ol>
    </div>

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

        var app2 = new Vue({
            el : '#app-2',
            data : {
                message : '頁面加載於 ' + new Date().toLocaleString()
            }
        })

        var app3 = new Vue({
            el : '#app-3',
            data : {
                seen : true
            }
        })

        var app4 = new Vue({
            el : '#app-4',
            data : {
                todos : [ {
                    text : '學習 JavaScript'
                }, {
                    text : '學習 Vue'
                }, {
                    text : '整個牛專案'
                } ]
            }
        })

        var app5 = new Vue({
            el : '#app-5',
            data : {
                message : 'Hello Vue.js!'
            },
            methods : {
                reverseMessage : function() {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })

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

        // 定義名為 todo-item 的新元件
        Vue.component('todo-item', {
            props : [ 'todo' ],
            template : '<li>{{ todo.text }}</li>'
        })

        var app7 = new Vue({
            el : '#app-7',
            data : {
                groceryList : [ {
                    id : 0,
                    text : '蔬菜'
                }, {
                    id : 1,
                    text : '乳酪'
                }, {
                    id : 2,
                    text : '隨便其它什麼人吃的東西'
                } ]
            }
        })
    </script>
</body>
</html>