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. JavaWeb学习 (十三)————JSP

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...

  2. 一个复杂Json的解析

    { "website": { "1": { "basic": { "homepage": "http://py ...

  3. JavaScript之八皇后问题（递归）

      八皇后问题,是一个古老而著名的问题,该问题最早由国际西洋棋棋手马克斯·贝瑟尔(Max Bezzel)于1848年提出.八皇后问题的具体描述为:在\(8\times8\)的国际象棋上摆放8个皇后,使 ...

  4. 基于Visual Studio .NET2015的单元测试

    基于Visual Studio .NET2015的单元测试 1.    在Visual Studio .NET2015中创建任意项目. 2.    在某个公共类的公共方法的名称上面点击右键,选择“创建 ...

  5. 如何获得刚刚插入数据的id

    create table tblInsert ( id ,) primary key, name ) ); insert into tblInsert(name) values('张三'); sele ...

  6. c# 对html字符串进行编码

    /// <summary> /// 对html字符串进行编码 /// </summary> /// <param name="html">htm ...

  7. java中import static和import的区别【转】

    转自:http://blog.csdn.net/ygc87/article/details/7371254

  8. 洛谷P4555 [国家集训队]最长双回文串(manacher 线段树)

    题意 题目链接 Sol 我的做法比较naive..首先manacher预处理出以每个位置为中心的回文串的长度.然后枚举一个中间位置,现在要考虑的就是能覆盖到i - 1的回文串中 中心最靠左的,和能覆盖 ...

  9. JS点击按钮下载文件

    通过form表单提交: 由于ajax函数的返回类型只有xml.text.json.html等类型,没有“流”类型,所以通过ajax去请求该接口是无法下载文件的,所以我们创建一个新的form元素来请求接 ...

  10. Jni OnLoad()和OnUnload()

    除了前面说的自定义JNI函数之外,JNI还提供了两个特殊函数,它们是JNI_OnLoad()和JNI_OnUnload(),分别在加载库和卸载库的时候调用. 1.JNI_OnLoad() Java调用 ...