Vue 简单入门 —— Vue 实例

Vue 组件也是一个Vue实例。

Vue实例可以通过 .$ 来调用 Vue 的属性、方法。

如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'hello world'
                }
            })
        </script>
    </body>
</html>

Vue实例 vm 通过 el 来绑定哪个 HTML 内容。
在谷歌浏览器上的Console 模块里面,我们可以输入 vm 然后回车获取信息。(信息过多就不展示了,自己去试试。)

输入:

vm.$data.message

得到:

"hello world"

输入:

vm.$el

得到:

<div id="app">
            hello world
        </div>