vue实例篇
vue实例创建及数据挂载渲染
一、 创建实例
vue实例创建其实很简单,首先讲一下vue其实是由一个构造函数new Vue()生成的一个实例
const vm = new Vue({
...some code
})
你可以把这作为根实例,所有嵌套在其下面的组件都是实例
二、声明数据
接下来就是写入数据,实例里面接受的是一个对象
let data = {
num: 0,
message: 'this is a message',
visible: true
...
}
直接将其赋给data属性
const vm = new Vue({
data: data
})
到这里一个vue实例就创建好了,因为vue是响应式的,设计模式是observer pattern(观察者模式),当数据改变时,vue视图会自动更新,(除非你使用object.freeze()阻止修改属性)。
三、挂载数据
紧接着挂载实例,挂载实例顾名思义就是讲vue挂载到dom树中,从而经过浏览器引擎解析成页面。
<div id="app"></div>
const vm = new Vue({
el: '#app', // 仅需声明这个属性就可以
data: data
})
四、渲染dom
最后怎么渲染数据呢?其实也很简单,vue本身就实现了数据绑定,双大括号的文本插值,这里要与react的单大括号功能是一样的,都是为了实现数据的显示绑定。
<div id="app">
<span>{{ message }}</span>
</div>
到这里实例篇就结束了,有错误的欢迎批评指正。
网友评论