Vue学习 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
    <div id="app">
        <div>{{ message }}</div>
        <div v-if="seen">now you see me</div>
        <div>
            <ol>
                <li v-for="todo in todos">
                    {{ todo.text }}
                </li>
            </ol>
        </div>
        <div>
            <button v-on:click="reverseMessage">Reverse Message</button>
        </div>
        <div>
            <input v-model="message">
        </div>
        <div>
            <ol>
                <todo-item></todo-item>
                <todo-item></todo-item>
                <todo-item></todo-item>
            </ol>
        </div>
        <div>
            <ol>
                <list-item v-for="list in lists" v-bind:list="list" v-bind:key="list.id"></list-item>
            </ol>
        </div>
    </div>

    <script type="text/javascript">
        Vue.component('todo-item', {
            template: '<li>This is todo</li>'
        });
        Vue.component('list-item', {
            props: ['list'],
            template: '<li>{{ list.text }}</li>'
        });

        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello world',
                seen: false,
                todos: [
                    { text: 'aaa' },
                    { text: 'bbb' },
                    { text: 'ccc' }
                ],
                lists: [
                    { id: 1, text: '111' },
                    { id: 2, text: '222' },
                    { id: 3, text: '333' },
                ]
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            },
            mounted: function(){
                this.$http.get('https://www.baidu.com').then(function(res){
                    console.log(res)
                },function(res){
                    console.log(res)
                });
            }
        });
        app.message = 'world hello';
        app.seen = true;
        app.todos.push({ text: 'ddd'});
    </script>
</body>
</html>

 

posted @ 2018-09-04 19:59  大智如蠢  阅读(90)  评论(0)    收藏  举报