Vue实例的构造函数

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的

虽然没有完全遵循 MVVM 模式， Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例。

vue实例的基本组成

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>01_HelloWorld</title>

</head>

<body>

<!--

  1. 引入Vue.js

  2. 创建Vue对象

    el : 指定根element(选择器)

    data : 初始化数据(页面可以访问)

  3. 双向数据绑定 : v-model

  4. 显示数据 : {{xxx}}

  5. 理解vue的mvvm实现(也就是vue的核心特点之一：声明式渲染)

-->

<!--模板-->

<div id="test">

  <input type="text" v-model="msg"><br><!--指令-->

  <input type="text" v-model="msg"><!--指令-->

  <p>hello {{msg}}</p><!--大括号表达式-->

</div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript">

  const vm = new Vue({ // 配置对象 options

    // 配置选项(option)

    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域

    data: {

      msg: 'atguigu'

    }

  })

</script>

</body>

</html>

vue实例生命周期详解

详情查看这篇文章：vue实例生命周期详解

vue实例详解的更多相关文章

  1. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  2. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  3. Vue入门系列（五）Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  4. Vue实例详解与生命周期

    http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...

  5. 041——VUE中组件之pros数据的多种验证机制实例详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  7. Vue.prototype详解

    参考地址:Vue.prototype详解 如果需要设置 全局变量,在main.js中,Vue实例化的代码里添加. 不想污染全局作用域.这种情况下,你可以通过在 原型 上定义它们使其在每个Vue实例中可 ...

  8. linux基础-磁盘阵列(RAID)实例详解

    磁盘阵列(RAID)实例详解 raid技术分类 软raid技术 硬raid技术 Raid和lvm的区别 为什么选择用raid RAID详解 RAID-0 RAID-1 RAID-5 Raid-10 R ...

  9. Cocos2d-x 3.X手游开发实例详解

    Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...

随机推荐

  1. vue 周期函数

    先简单说说vue中周期函数 beforeCreate(创建前) created(创建后) beforeMount(载入前) mounted(载入后) beforeUpdate(更新前) updated ...

  2. fastdfs集群版搭建（一）- storage集群搭建与统一入口访问

    前言 接着上篇博客:详细的最新版fastdfs单机版搭建,今天来讲讲fastdfs的集群搭建,限于篇幅,今天先搭建stoarge集群,并实现统一的http访问方式: 没看我上篇博客的小伙伴,最好先去瞅 ...

  3. #13 让代码变得Pythonic

    前言 在学习Python的过程中,肯定听说过这么一个词:Pythonic,它的意思是让你的代码很Python! 一.列表生成式 前面有一节专门讲解了Python的列表,其灵活的使用方法一定让你陶醉其中 ...

  4. numpy使用指南

    numpy.array numpy.array是numpy中用于处理n阶数组的对象,是其类族中的重要基类. numpy.array可以表示任意维的数组,可以使用构造函数初始化: arr = numpy ...

  5. C#多线程——同步

    多个线程(不仅仅局限于相同进程)如果需要访问相同的可变资源的话就可能需要考虑到线程同步的手段.CPU的线程和进程管控我这里就不去说了,计算机组成原理里面的东西 那么既然要让线程的步调一致,那么我们首先 ...

  6. Java String的简单介绍

    一.String类的构造方法(先粗略介绍三种 分别是s1,s2,s3) 二.String的常用判断方法 三.String类的常用获取方法 三.Sting的常用转换方法 四.String其他功能   五 ...

  7. 2017-11-06 日语编程语言"抚子" - 第三版特色初探

    "中文编程"知乎专栏原链 原文: 日语编程语言"抚子" - 第三版特色初探 它山之石可以攻玉. 学习其他的母语编程语言, 相信对中文编程语言的设计和实践有借鉴意 ...

  8. docker 安装 gitlab

    基于Docker部署GitLab环境搭建 建议虚拟机内存2G以上 1.下载镜像文件 docker pull beginor/gitlab-ce:11.0.1-ce.0 注意:一定要配置阿里云的加速镜像 ...

  9. Redis 入门 安装 命令

    win7 64位安装redis 及Redis Desktop Manager使用 引自:http://blog.csdn.net/joyhen/article/details/47358999 写基于 ...

  10. U8 应付款管理 单据类型 分析

    Ap_CloseBill   收付款单主表 Ap_CloseBills 收付款单子表 cVouchType 在收付款单主表中  ,用于区分单据为收款单还是付款单(48,49)  49:付款单 48:收 ...