vue.js 学习 1

wxynj

于 2019-09-18 08:01:28 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/wxynj/article/details/100970249

版权

1.hello world & button component

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
</head>
<body>
    <script src="js/vue.min.js" ></script>
    <div id="app">
        <input type="text" v-model="name" placeholder="input your name">
        <h1>hello {{name}}</h1>
    </div>

    <div id="components-demo">
        <button-counter ></button-counter>
    </div>
    <br>
    <div id="set1">
        <button-counter name="second"></button-counter>
    </div>
    <br>
    <div id="set2">
        <button-counter name="third"></button-counter>
    </div>

    <script>
        Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            props: ['name'],
            template: '<button v-on:click="count++"> {{name}} click  {{ count }} times.</button>'
        })


        var app = new Vue({
            el: '#app',
            data: {
                name: ''
            }

        });

        new Vue({ el: '#components-demo',
                data: {
                    name: "components-demo"
                }
        });
        new Vue({ el: '#set1' });
        new Vue({ el: '#set2' });

    </script>

</body>

</html>