Vue 简单实用---代码可以直接用

<!DOCTYPE html>

<html>

<head>

    <title></title>

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

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript">

    $(function() {

        var app = new Vue({

            el: '#app1',

            data: {

                message: "Hello Hu"

            }

        });

        app1 = new Vue({

            el: "#app-2",

            data: {

                message: "Now is" + new Date().toLocaleString()

            }

        });

        app3 = new Vue({

            el: "#app-3",

            data: {

                seen: true

            }

        });

        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>

</head>

<body>

    <div id="app1">

        <p>{{ message }}</p>

    </div>

    <div id="app-2">

        <span v-bind:title="message">

    		看看时间

    	</span>

    </div>

    <div id="app-3">

        <div>

            <p v-if="seen">你看到我了</p>

        </div>

    </div>

    <ol>

        <todo-item></todo-item>

    </ol>

    <div id="app-7">

        <ol>

            <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">

            </todo-item>

        </ol>

    </div>

</body>

</html>
巴特西

Vue 简单实用---代码可以直接用

最新文章

热门文章
