《Vue.js 前端开发技术与实践》课件-第5章 vue实例对象

第5章vue实例对象每个Vue应用都是通过用Vue构造函数来创建一个新的Vue实例开始的。varvm=newVue({//选项})5.1配置对象常用的配置选项5.1.1methods方法事件调用的函数都在methods属性中定义。例：methods:{

sum(){

this.total=this.price*this.count;

}

}定义方法语法：方法名(){}或方法名:function(){}方法调用的方式：方法名()<input

type="text"

v-model.number="price"

@keyup="sum()">5.1.2计算属性computed当某个属性的值依赖于其他属性的值时，在计算属性中定义该属性。定义计算属性在computed属性中定义，语法：计算属性名：function(){//计算表达式

return结果}例：computed:{total:function(){returnthis.price*this.count}}5.1.3watch侦听器

watch侦听器是用来侦听数据变化时（data对象属性或者计算属性的变化），让开发者处理一些事务。定义侦听器语法：watch:{[key:string]:string|Function|Object|Array}当一个被侦听属性的值发生变化时，触发该属性的回调函数执行。watch:{"price":function(newVal,oldVal){returnthis.total=newVal*this.count;},"count":function(newVal,oldVal){returnthis.total=this.price*newVal;},}5.1.4过滤器filters在输出结果之前对数据进行过滤（格式处理等）Vue中的过滤器分为两种，全局过滤器和局部过滤器。（1）全局过滤器全局过滤器的定义，是定义在Vue对象上的，定义语法：Vue.filter(‘过滤器的名称’,function(参数列表){函数体})（２）过滤器调用语法如下：{{要过滤的数据｜过滤器名（参数列表）}}过滤器调用只用在Mustache插值和V-bind表达式中。局部过滤器的定义，是定义在Vue对象的实例上，在配置对象的filers选项属性中定义。（3）局部过滤器局部过滤器定义语法和调用语法与全部过滤器的语法相同。局部过滤器与全部过滤器除定义的位置不同外，还有调用的范围不相同，局部过滤器只有在该Vue实例控制的（#app）页面区域内有效，全部过滤器在整个页面上所有Vue实例控制的页面区域内都有效。5.2

Vue实例生命周期Vue实例从创建到销毁的过程，就是Vue实例的生命周期。在这个生命周期过程中的各个阶段上会自动执行相应的处理函数。5.3常用的Vue实例属性vm.$data：获取实例观察的数据对象；vm.$el：获取实例挂载的元素；vm.$options：获取实例的初始化选项对象；vm.$refs：一个对象，持有注册过ref属性的所有DOM元素和组件实例；5.4常用的Vue实例方法5.4.1实例方法/数据（1）vm.$set（2）vm.$delete（3）vm.$watch5.4.2实例方法/事件（1）vm.$on（2）vm.$once（3）vm.$emit（4）vm.$off5.4.3实例方法/生命周期（1）vm.$mount(