1-2 1.4.3Vue实例对象的数据选项ppt课件 Vue.js基础与应用开发实战(微课版).pptx
《1-2 1.4.3Vue实例对象的数据选项ppt课件 Vue.js基础与应用开发实战(微课版).pptx》由会员分享,可在线阅读,更多相关《1-2 1.4.3Vue实例对象的数据选项ppt课件 Vue.js基础与应用开发实战(微课版).pptx(20页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、1-2 1.4.3 Vue实例对象的数据选项教学课件 Vue.js基础与应用开发实战(微课版)1.4.3 Vue实例对象的数据选项一般地,当模板内容较简单时,使用data选项配合表达式即可。涉及到复杂逻辑时,则需要用到methods、computed、watch等方法。1datadata是Vue实例的数据对象,Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化。简单来说,data应该只能是数据,不推荐观察拥有状态行为的对象。一旦观察过,就无法在根数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。【实例1-5】通过vm.$
2、data访问Vue实例的数据对象【操作要求】创建Vue实例,通过vm.$data访问Vue实例的数据对象,并使用不同方法访问Vue实例的数据对象。【实现过程】创建网页0105.html,编写以下代码实现要求的功能。message var vm=new Vue(el:#app,data:message:请登录!)console.log(vm.$data);console.log(vm.message);console.log(vm.$data.message);在Chrome浏览器中浏览网页0105.html,打开浏览器控制台,切换到【Console】选项卡,可以看到如图1-6所示的输出结果。V
3、ue实例创建之后,可以通过vm.$data访问原始数据对象。Vue实例也代理了data对象上所有的属性,因此访问vm.message等价于访问vm.$data.message。图1-6 浏览网页0105.html时在浏览器控制台【Console】选项卡中的输出结果2propsprops可以是数组或对象,用于接收来自父组件的数据。例如:Vponent(props-demo-simple,props:size,myMessage)props可以是对象,对象允许配置高级选项,例如类型检测、自定义验证和设置默认值。2props用户可以基于对象的语法使用以下选项:(1)type:可以是下列原生构造函数中
4、的一种:String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数或者上述内容组成的数组。会检查一个prop是否为给定的类型,否则抛出警告。(2)default:为该prop指定一个默认值。如果该prop没有被传入值,则换用这个默认值。对象或数组的默认值必须从一个工厂函数返回。2props(3)required:定义该prop是否是必填项。在非生产环境中,如果这个值为true且该prop没有被传入的值,则将会抛出一个控制台警告。(4)validator:自定义验证函数会将该prop的值作为唯一的参数代入。在非生产环境下,如
5、果该函数返回一个false的值(也就是验证失败),将会抛出一个控制台警告。2props例如:/对象语法,提供验证Vponent(props-demo-advanced,props:/检测类型 height:Number,/检测类型+其他验证 age:type:Number,default:0,required:true,validator:function(value)return value=0 )3propsData创建实例时用于传递props,主要作用是方便测试。只用于new创建的实例中。例如:var Comp=Vue.extend(props:msg,template:msg)var
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 1-2 1.4.3 Vue实例对象的数据选项ppt课件 Vue.js基础与应用开发实战微课版 1.4 Vue 实例 对象 数据 选项 ppt 课件 js 基础 应用 开发 实战 微课版
链接地址:https://www.deliwenku.com/p-87683200.html
限制150内