Vue构造器
1、Vue.js是一个构造函数,编程中称之为构造器
2、每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化
3、构造函数需要将其实例化后才会启用 var vm = new Vue({ //...})
4、Vue构造器要求实例化时需要传入一个选项对象
5、选项对象包括数据(data),模板(tamplate),挂载元素(el),方法(methods),生命周期钩子等选项
附:Vue实例传入选项对象API文档(https://cn.vuejs.org/v2/api/)

属性与方法
1、data会代理其对象里的所有属性
2、只有data里的属性是响应式的,即通信是双向的,如demo中所示
3、Vue被实例化后,再创建的属性,将不会触发视图更新,如demo中所示:
如:<p>{{a}},{{b}},{{c}},{{d}}</p>
1)a,b,c都会在视图中显示
2)a在实例化后仍然保持数据响应
3)d尽管在console.log(data)中存在,但视图却找不到,且会报错
4)因此请不要试图在实例化后添加任何属性

实例属性与方法
1、Vue实例暴露了一些有用的实例属性与方法
2、为与代理属性区分,方前添加了前缀$
3、app.$data===data //->true
app.$el===document.getElementById("app") //->true
附:Vue实例属性和方法API参考(https://cn.vuejs.org/v2/api/)

实例生命周期
1、Vue实例化过程中需要经历一系列额初始化过程,和所有构造函数类似
例如:配置数据观测--编译模板--挂载实例到DOM--数据变化时更新DOM
2、实例化过程中会调用一些生命周期钩子,在此期间,Vue提供执行自定义逻辑的机会
例如:created、mounted、 updated 、destroyed

demo:
<div id="app">
<p>{{a}},{{b}},{{c}}</p>
</div> <script>
var data={
a:1,
b:2,
c:3
}
var app=new Vue({
el:"#app",
data:data
}) console.log(app.a===data.a); //true app.a=5;
console.log(data.a); //5 data.a=10;
console.log(app.a); //10 data.d=12;
console.log(data); console.log(app.$data===data);
console.log(app.$el===document.getElementById("app"));
</script>

Vue.js_构造器及其实例化概念的更多相关文章

  1. Vue.extend构造器和$mount实例构造组件后可以用$destroy()进行卸载,$forceUpdate()进行更新,$nextTick()数据修改

    html <div id="app"> </div> <p><button onclick="destroy()"&g ...

  2. Vue2.0 【第二季】第2节 Vue.extend构造器的延伸

    目录 Vue2.0 [第二季]第2节 Vue.extend构造器的延伸 一.什么是Vue.extend 二.自定义无参数标签 三.挂载到普通标签上 Vue2.0 [第二季]第2节 Vue.extend ...

  3. vue构造函数(根实例化时和组件实例对象选项)参数:选项详解

    实例选项(即传给构造函数的options):数据,DOM,生命周期钩子函数,资源,组合,其他 数据 data 属性能够响应数据变化,当这些数据改变时,视图会进行重渲染. 访问方式: 1.通过 vm.$ ...

  4. 使用反射类、Class类获取指定的构造器并实例化对象

    package com.test; public class Car { private String brand; private String color; private int maxSpee ...

  5. vue实例的几个概念

    1.构造器 vue应用都是通过vue构造函数创建实例来启动的,在创建vue实例时需要传入一个options对象,该对象可以包含数据.模板.挂在元素.方法.生命周期钩子等选项: var vm = new ...

  6. 【Vue的路由,SPA概念】

    前言 本章是为了以后实现前端页面的搭建而写的, 重点在于如何实现 单页Web应用 因为相对于以前的传统多页面web,有很大的缺陷. 那么就必须了解一下Vue的路由设置. SPA的概念 总的而言,我们知 ...

  7. 深入理解Vue组件3大核心概念

    摘要: 搞懂Vue组件! 作者:浪里行舟 原文:详解vue组件三大核心概念 Fundebug经授权转载,版权归原作者所有. 前言 本文主要介绍属性.事件和插槽这三个vue基础概念.使用方法及其容易被忽 ...

  8. 【VUE】8.VUEX核心概念

    1. Vuex核心概念主要如下 state : 存储共享数据 mutation: 变更store中的数据,方法,不能异步操作 action: 异步操作,通过触发mutation变更数据 getter: ...

  9. 在Vue的构造器里我们写一个add方法,然后我们用实例的方法调用它

    html <div id="app"> <div>{{message}}</div> </div> js var vm = new ...

随机推荐

  1. Oracle10g 安装步骤

    一.Oracle10g 安装预备步骤 取得 Oracle 10g 安装程序,或从 Oracle 技术网(OTN)下载光盘映像.在评估阶段您可以免费下载和使用无技术限制的全功能 Oracle,但在正式的 ...

  2. 基于Java Netty框架构建高性能的Jt808协议的GPS服务器(转)

    原文地址:http://www.jt808.com/?p=971 使用Java语言开发一个高质量和高性能的jt808 协议的GPS通信服务器,并不是一件简单容易的事情,开发出来一段程序和能够承受数十万 ...

  3. vue2.0 实现click点击当前li,并动态添加class(这种方法不太喜欢)

    1,文件内容 ---- 使用v-for遍历数据 ---- @click="selectSort(item)"添加点击事件,并把每个obj=item传入 ---- v-show=&q ...

  4. 1.3 Seven Testing Principles

    1.3 Seven Testing Principles 2015-06-23 Principle 1 - Testing shows presence of defects(测试显示存在缺陷) Te ...

  5. Django REST framework 知识点总结

    一.安装DjangoREST framework #先安装Django #安装必要的包 pip install djangorestframework coreapi (1.32.0+) - Sche ...

  6. 解决将Ubuntu下导出的requirements.txt到Centos服务器上面出现pkg-resource的版本为0.0.0

    最直接有效的方法: 原因:

  7. Android开发日记(七)

    trim()方法返回调用字符串对象的一个副本,但是所有起始和结尾的空格都被删除了,例子如下:String s="  Hello World   ".trim();就是把" ...

  8. 彻底征服 Spring AOP 之 理论篇

    基本知识 其实, 接触了这么久的 AOP, 我感觉, AOP 给人难以理解的一个关键点是它的概念比较多, 而且坑爹的是, 这些概念经过了中文翻译后, 变得面目全非, 相同的一个术语, 在不同的翻译下, ...

  9. js中获取event keycode的兼容办法

    window.onkeypress=function(e){ var event = e || window.event, //在ff下event会做为参数传进来,ie下会在window下 keyCo ...

  10. Eclipse4.4 安装java反编译插件Eclipse Class Decompiler

    一.在线安装方式: Eclipse Class Decompiler整合了眼下最好的2个Java反编译工具Jad和JD-Core,而且和Eclipse Class Viewer无缝集成.可以非常方便的 ...