[1]vue介绍 - Githubissues

GH1995 commented 4 years ago

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <title>Document</title>
    </head>
    <body>

        <div id="app">
            {{message}}
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            }
        })
    </script>

</html>

GH1995 commented 4 years ago

v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

GH1995 commented 4 years ago

    <body>

        <div id="app">
            <p>{{message}}</p>
            <input type="text" v-model="message">

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

GH1995 commented 4 years ago

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
        <meta content="ie=edge" http-equiv="X-UA-Compatible"/>
        <title>Document</title>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <body>

        <div id="app">
            <ol>
                <todo-item v-bind:key="item.id" v-bind:todo="item" v-for="item in groceryList"></todo-item>
            </ol>
            <script>
                Vue.component('todo-item', {
                    props: ['todo'],
                    template: '<li>{{ todo.text }}</li>'
                })

                var app = new Vue({
                    el: '#app',
                    data: {
                        groceryList: [
                            {
                                id: 0,
                                text: '蔬菜'
                            }, {
                                id: 1,
                                text: '奶酪'
                            }, {
                                id: 2,
                                text: '随便其它什么人吃的东西'
                            }
                        ]
                    }
                })
            </script>

        </html>
    </body>
</html>

GH1995 / articles

[1]vue介绍 #49