美文网首页
vue实例创建及数据挂载渲染

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

作者: CalvinXie | 来源:发表于2019-09-25 21:18 被阅读0次

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>

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

相关文章

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

    vue实例篇 vue实例创建及数据挂载渲染 一、 创建实例 vue实例创建其实很简单,首先讲一下vue其实是由一个...

  • VUE生命周期

    vue实例从创建到销毁的过程就是vue生命周期;及指从创建、初始化数据、编译模板,挂载dom到渲染、更新到渲染,销...

  • vue生命周期

    vue实例被创建时经过的初始化过程: 开始创建、初始化数据、编译模版、挂载Dom==>渲染、更新==>渲染、卸载 ...

  • vue生命周期

    Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁...

  • 前端高阶面试题之Vue

    .什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过...

  • Vue 高频面试题汇总

    .什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过...

  • vue 生命周期

    什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程...

  • Vue 面试题汇总

    什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程...

  • Vue 面试中常问知识点整理

    Vue的生命周期 生命周期:Vue实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列...

  • vue重新起航(一)

    1.声明和渲染 创建一个Vue实例,并挂载到id为app的标签上 el: ' ' 挂载Vue实例对象 data:V...

网友评论

      本文标题:vue实例创建及数据挂载渲染

      本文链接:https://www.haomeiwen.com/subject/bncyuctx.html