首页 > 其他 > 详细

Vue实例

时间:2021-03-14 23:53:45      阅读:23      评论:0      收藏:0      [点我收藏+]

创建一个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实例

原文:https://www.cnblogs.com/manhuai/p/14533972.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!