Vue方向:Vue实例以及基本选项-01

vm是Vue的实例对象

实例对象上有$data属性,其值就是选项对象中data属性值

选项对象就是实例化Vue时传入的对象

data属性值是一个对象,因此,$data也就是这个对象

当通过$data修改msg的值时,也就等于改data中的值,对应是引用类型

因此示例的结果就是:

2秒后data数据中的msg的值改变了,又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式,继而改变视图显示。

实例上的方法

除了数据属性,Vue选项对象中还暴露了一些有用的属与方法,在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀$,以便与用户定义的属性区分开来

var    data  =  { a :1 }

var    vm   =  new  Vue({

          el : '#example',

           data : data

})

vm.$data  ===  data

vm.$el  === document.getElementById('example')


实例上常用的属性与方法


实例上常用的属性和方法

$refs:获取dom元素或者组件实例的引用

Test.vue
运行结果

$mount:绑定挂载点

参数:

1、{  el | string }

2、{ boolean } [hydrating] 

如果Vue实例在实例化时没有收到el选项,则它处于“未挂载”状态,没有关联得DOM元素,可以使用vm.$mount()手动地挂载一个未挂载地实例

如果没有提供elementOrSelector参数,模板将被渲染为文档之外地元素,并且你必须使用原生DOM  API把它插入文档中。

这个方法返回自身,因而可以链式调用其他实例方法。

$mount挂载点
运行结果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户...
    桂_3d6b阅读 4,270评论 0 0
  • Vue.js(读音/vjuː/, 类似于 view)是一个构建数据驱动的web 界面的渐进式框架。Vue.js的目...
    xingyunfuhao阅读 3,878评论 0 0
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 7,873评论 4 45
  • 每个vue应用都是通过构造函数Vue创建的一个Vue的根实例启动的,在实例化Vue时,需要传入一个选项对像,它可以...
    羊烊羴阅读 5,450评论 0 1
  • 一、简介 1、 Vue.js 是什么 参考网址:https://cn.vuejs.org/v2/guide/ind...
    满天繁星_28c5阅读 3,345评论 0 1