vue构造器以及实例属性
一、构造器
1、vue.js就是一个构造器,通过构造器Vue来实例化一个对象;例如:var vm = new Vue({});
2、实例化Vue时,需要传入一个参数(选项对象);
3、参数:选项对象可以包含,数据(data)、挂载元素(el)、方法(methods)、模版(template)、生命周期函数等等;
4、扩展构造器Vue,从而用预定义选项创建可复用的组件构造器,所有组件都是被扩展的Vue的实例,使用Vue.extend({})来扩展;
注意:尽管可以命令式地创建扩展实例,不过在多数情况下建议将组件构造器注册为一个自定义元素,然后声明式地用在模板中。
二、属性与方法
1、每个Vue的实例都会代理其data对象里的所有属性,被代理的属性是响应的;
2、如果实例创建之后添加新的属性到实例上,不会触发视图更新;
3、不要在实例属性或者回调函数中(如 vm.$watch('a', newVal => this.myMethod()))使用箭头函数。因为箭头函数绑定父上下文,所以 this 不会像预想的一样是 Vue 实例,而是 this.myMethod 未被定义。
4、Vue实例暴露了一些有用的实例属性和方法,带有前缀 $ ,便于与代理的data区分
a、vm.$el:类型(HTMLElement)挂载元素,Vue实例的DOM根元素;
var vm = new Vue({
el: "#app",
data: {
a: 'hello',
b: 'hi'
}
});
console.log(vm.$el === document.getElementById('app')); // true
b、vm.$data:类型(Object),Vue实例观察的数据对象
var data = { a: 'hello', b: 'hi' }
var vm = new Vue({
el: "#app",
data: data
});
console.log(vm.$data === data); // true
console.log(vm.$data.a); // 'hello'
console.log(vm.$data.b); // 'hi'
c、vm.$props:类型(Object),不清楚怎么用,哭哭哭。。。求指教。。。
<div id="app">
<child :bmsg="bmsg"></child>
<child bmsg="hi"></child>
</div>
<script type="text/javascript">
var vc = Vue.component('child',{
props:['bmsg'],
template: '<h1>{{bmsg}}</h1>'
})
var vm = new Vue({
el: "#app",
data: {
bmsg: 'hello'
}
});
console.log(vc.$props); //undefined
console.log(vm.$props); //undefined
d、vm.$options:类型(Object),用于当前Vue实例的初始化选项,在选项中需要包含自定义属性的时候很有用。
var vm = new Vue({
el: '#app',
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) // 'foo'
}
});
console.log(vm.$options); // Object {components: Object, directives: Object, filters: Object, el: "#app", customOption: "foo"…}
console.log(vm.$options.customOption); // 'foo'
console.log(vm.$options.el); // '#app'
e、vm.$parent:类型(Vue实例),父实例。
f、vm.$root:类型(Vue实例),当前组件树的根Vue实例,如果没有父实例,就是实例本身。
h、vm.$children:类型(Array(Vue实例)),当前实例的直接子组件
需要注意 $children 并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定,考虑使用一个数组配合 v-for 来生成子组件,并且使用 Array 作为真正的来源。
i、vm.$slots:类型({ [name: string]: ?Array<VNode> }),用来访问被 slot 分发的内容。每个具名 slot 有其相应的属性(例如:slot="foo" 中的内容将会在 vm.$slots.foo 中被找到)。default 属性包括了所有没有被包含在具名 slot 中的节点。
j、vm.$scopedSlots:;
k、vm.$refs:类型(Object),一个对象,其中包含了所有拥有 ref 注册的子组件;
l、vm.$isServer:类型(boolean),当前Vue实例是否运行于服务器;
vue构造器以及实例属性的更多相关文章
- vue四、实例
1.new Vue创建根实例 2.data对象,所有的属性加入到 Vue 响应式系统-值发生改变时,视图自动变更为新值 只有实例被创建时存在的属性才会响应式改变,后增加的不会 vue定义的实例属性和方 ...
- Vue基础二之全局API、实例属性和全局配置,以及组件进阶(mixins)的详细教程(案列实现,详细图解,附源码)
本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...
- vue实例属性(vm.$els)
不需要表达式 参数: id(必需) 用法: 为 DOM 元素注册一个索引,方便通过所属实例的 $els 访问这个元素. 注意: 因为 HTML 不区分大小写,camelCase 名字比如 v-el:s ...
- Vue基础进阶 之 常用的实例属性
Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...
- Vue 组件实例属性的使用
前言 因为最近面试了二.三十个人,发现大部分都还是只是停留在 Vue 文档的教程.有部分连教程这部分的文档也没看全.所以稍微写一点,让新上手的 Vuer 多了解 Vue 文档的其他更需要关注的点. 因 ...
- 简述Vue的实例属性、实例方法
1.实例属性 组件树访问 $parent -----> 用来访问当前组件实例的父实例: $root -----> 用来访问当前组件树的根实例,如果当前组件没有父实例,则$root表示当前组 ...
- Vue实例属性/方法/生命周期
一 实例属性 var app = new Vue(); app.$el ===>返回当前挂在DOM对象. app.$data ===>返回当前实例data里面的数据 app.$option ...
- vue自带的实例属性和方法($打头)
Vue 实例内置了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = new Vue({ el: '#examp ...
- vue学习笔记 实例(二)
var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 ...
随机推荐
- Freedom DownTime
Storyline Computer hackers are being portrayed as the newest brand of terrorists. This is a story of ...
- WebDriver高级应用——操作Web页面的滚动条
目的: (1)滑动页面的滚动条到页面最下方 (2)滑动页面的滚动条到页面某个元素 (3)滑动页面的滚动条向下移动某个数量的像素 测试的网址: http://www.seleniumhq.org/ 代码 ...
- ASP.NET2.0 Newtonsoft.Json 操作类分享
JSON 是现在比较流行的数据交互格式,NET3.0+有自带类处理JSON,2.0的话需要借助Newtonsoft.Json来完成,不然自己写的话,很麻烦. 网上搜索下载 Newtonsoft.Jso ...
- Photoshop的脚本开发
之前的博客的文章,贴过来了.PhotoshopCS开始增加了脚本.Photoshop的脚本可以用JavaScript,AppleScript以及VbScript和visualBasic.其中Apple ...
- 基于GeoServer切片地图服务的发布
接着上一篇文章,如何将JPG格式的图片转化为带地理坐标的TIFF格式里提及的最近的一个项目,数据源是一张高分辨率的2.5维图片,现在已经成功转化成了带有地理坐标的TIFF格式.下面将介绍借助GeoSe ...
- Android intent 传值不更新的原因和解决办法
当 Activity 的启动模式是 singleTask 或者 singleInstance 的时候.如果使用了 intent 传值,则可能出现 intent 的值无法更新的问题.也就是说每次 int ...
- 获取BinaryReader中读取的文件名
BinaryReader br; br = null; br = new BinaryReader(new FileStream("E:demo.txt", FileMode.Op ...
- day05.2-一个文件的增删改查实例
一. 测试程序 #INFO.txt源文件内容 global log 127.0.1 local2 daemon maxconn 256 log 127.0.0.1 local2 info defa ...
- lamp-linux2
LAMP编程之Linux(2) 一.进阶指令 1.du指令 作用:du表示directory used,显示出目录所占的磁盘空间大小的情况. 语法:#du -sh 目录路径 选项说明: -s:表示su ...
- [转载] cassandra Unable to complete request: one or more nodes were unavailable
今天碰到的问题跟这个一模一样,特地转过来记录一下 https://support.datastax.com/hc/en-us/articles/204893189-CQL-query-results- ...