vue实例创建及数据挂载渲染

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>

到这里实例篇就结束了，有错误的欢迎批评指正。