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. 网络基础知识-TCP/IP协议各层详解

    TCP/IP简介 虽然大家现在对互联网很熟悉,但是计算机网络的出现比互联网要早很多. 计算机为了联网,就必须规定通信协议,早期的计算机网络,都是由各厂商自己规定一套协议,IBM.Apple和Micro ...

  2. 使用flexible适配移动端h5页面

    flexible是淘宝提供的一套REM手机适配的库,用法也非常简单 首先,在页面中引入相关资源 包括flexible.js和flexible_css.js(用于清除默认样式),或者通过cdn方式引入 ...

  3. Java设计模式学习记录-GoF设计模式概述

    前言 最近要开始学习设计模式了,以前是偶尔会看看设计模式的书或是在网上翻到了某种设计模式,就顺便看看,也没有仔细的学习过.前段时间看完了JVM的知识,然后就想着JVM那么费劲的东西都看完了,说明自己学 ...

  4. C# 常用的加密代码参考

    1.MD5加密 public static string EncryptString(string source) { string result; if (source == string.Empt ...

  5. [PHP] 算法-构建排除当前元素的乘积数组的PHP实现

    构建乘积数组给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1]. ...

  6. java中自己常犯的错误汇总

    package debug; /** 1.定义一个公共的动物类,包含名字.年龄.颜色和吃饭东西方法 2.定义一个猫类,继承动物类,同时拥有玩游戏的本领 3.定义一个狗类,继承动物类,同时拥有看门的本领 ...

  7. Minitab系列 前言

    Matlab 在有些时候太过去强大,强大到几乎所有的数学问题都可以解决. 在这里,Matlab就像数学版的Vim,对于一般的使用者还是不想编程,想要更加的直接直观的数学处理工具,这里向大家介绍mini ...

  8. python 通过 pip 更新所有已安装的包

    较新的 pip 已经支持 list --outdated 了,所以记录一下新的方法: pip list --outdated --format=legacy |awk '{print $1}' |xa ...

  9. VSCode中怎么改变文件夹的图标

    昨天更新了VSCode后我的文件夹图标莫名其妙的没有了,变成了下图这样 看着真的让我难受的头皮发麻,本来打代码就头发少,难道非要让我变成秃头,不可能不可能,所以我找了找怎么解决 来,各位看官上眼 如图 ...

  10. SSM环境搭建

    流程 1,maven 依赖 2,spring 配置文件 3,mybatis 配置文件 4,springMVC 配置文件 5,web.xml pom依赖 1,定义版本 <properties> ...