Vue实例

创建一个vue实例

<div id="root" @click="handleClick">{{message}}<div>
    
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            message: 'Peng'
        },
        methods:{
            handleClick(){
                alert("Peng")
            }
        }
    })
</script>

vm的构造函数是Vue（vm所属的类是Vue）。

vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新（不包括Ajax！）。

el：是vm实例的属性，定义vue实例接管dom的最外层标签。

'peng'这个字符串之所以可以成功显示页面上，是因为vm实例接管了id为root的dom，vm实例会对dom的代码进行分析，当发现使用了插值表达式后，就会在data中去寻找对应的值，然后把插值表达式替换成data中的数据。

因为vm实例接管了#root这个dom，所以可以分析出#root需要绑定handleClick这个事件。当dom被点击的时候，就会自动执行methods中的handleClick方法。

每个组件都是一个Vue实例，定义全局的Vue组件，必须在定义Vue实例之前，否则无效。

Vue实例属性和方法以$开头，凡是以$符号开头的，指的都是Vue实例属性或者实例方法。

标签：Vue,dom,handleClick,vm,实例,root
来源： https://www.cnblogs.com/manhuai/p/14533972.html