本篇介绍vue的属性,它分为以下五类
第一类与数据相关,绑定DOM节点属性与Vue属性之间的关系。例如data。
第二类与Vue实力的生命周期相关。
第三类与DOM相关,例如template, el。
第四类与Vue的功能有关,例如directive,自定义指令
第五类杂项。
1、数据
data:自定义属性,类型通常为方法,若为对象时,每一个Vue实例都共享。
示例如下:
<script> export default { name: 'hello-world', data () { return { seen: true }; } }; </script>
method:自定义方法,格式为method_name : func()。
computed:与自定义属性基本相同,想表达的含义是由已存在的自定义属性计算而得出的新属性。计算通常是方法, 新属性的值为方法的返回值。
watch:不会产生新属性,监测现有属性,若属性存在变化,触发对应的方法。方法的参数为新值,旧值。
watch: { seen : function(newVal, oldVal){ } }
props:设定组件的属性。例如在使用element-ui时,可使用的属性。两种格式。
第一种格式,字符串数组,元素为属性名称,props: ['size', 'myMessage']。
第二种格式,对象,每一个key对应一个属性,属性的值可以是对象,对象包含四个属性,type属性的类型,default属性的默认值,required属性是否为必填属性,validator属性的校验器。
props: { age: { type: Number, default: 0, required: true, validator: function (value) { return value >= 0 } }
propsData:在新创建的Vue实例中传入props的初始值。
2、DOM
el:DOM选择器,通常使用ID。
template:DOM的字符串形式。
render:渲染的具体实现逻辑,使用框架的默认实现即可。若想自定义,可以重写此方法。
renderError:渲染出错后,指定异常处理器。第一个参数为VNode对象,代表虚拟的DOM节点,第二个参数为Error对象,包含错误信息。
3、 生命周期
beforeCreate:在Vue实例创建之前执行。
created:在Vue实例创建之后执行。
beforeMount:在挂载之前执行。
mounted:在挂载之后执行
beforeUpdate:在数据更新之前执行。
updated: 数据更新之后执行。
beforeDestroy:在销毁之前执行
destroyed:在销毁之后执行
beforeActived:在激活之前执行,keep-alive包裹一系列组件,这些组件只有一个处于激活状态。若不使用keep-alive包裹,每次切换tab时会导致重新创建Vue实例。
actived:激活之后执行。
errorCaptured:捕获异常之后执行,异常处理器,全局设置一个即可。
4、 功能
components:默认情况下,只能使用全局引入的组件或继承自父节点(它是一颗树,根是App.vue)的组件。它可以用于引入组件。
filters:自定义过滤器,定义格式为filter_name: function()。使用格式为data | filter。示例参考
directives:参考自定义指令。