收藏 分销(赏)

2.Vue.js培训PPT学习课件.ppt

上传人:精**** 文档编号:10044181 上传时间:2025-04-19 格式:PPT 页数:17 大小:2.33MB
下载 相关 举报
2.Vue.js培训PPT学习课件.ppt_第1页
第1页 / 共17页
2.Vue.js培训PPT学习课件.ppt_第2页
第2页 / 共17页
2.Vue.js培训PPT学习课件.ppt_第3页
第3页 / 共17页
2.Vue.js培训PPT学习课件.ppt_第4页
第4页 / 共17页
2.Vue.js培训PPT学习课件.ppt_第5页
第5页 / 共17页
点击查看更多>>
资源描述

1、单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,#,Vue.js,培训,2018,1,简要介绍,后端只给前端提供数据,前端负责HTML渲染和用户交互。,前后端分离,数据双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。,V,ue.js,是一个用于创建用户界面的开源JavaScript框架,JavaScript,框架,2,2025/4/19 周六,准备工作,Vue,官网上下载 js文件:,script src=,3,

2、2025/4/19 周六,第一个,Demo,message,var vm=new Vue(,el:,#app,data:,message,:Hello Vue.js!,),4,2025/4/19 周六,1.条件判断(v-if),现在你看到我了,菜鸟教程,学的不仅是技术,更是梦想!,哈哈哈,打字辛苦啊!,var vm=,new Vue(,el:#app,data:,seen:true,ok:true,),5,2025/4/19 周六,2.循环语句(v-for),2.1.,迭代数组,site.name,var vm=new Vue(,el:#app,data:,sites:,name:Runoob

3、name:Google,name:Taobao,),6,2025/4/19 周六,2.2,迭代对象,value,var vm=,new Vue(,el:#app,data:,object:,name:菜鸟教程,url:,slogan:学的不仅是技术,更是梦想!,),7,2025/4/19 周六,3.计算属性,原始字符串:,message,计算后反转字符串:,reversedMessage,var vm=new Vue(,el:#app,data:,message,:Runoob!,computed,:,/计算属性的 getter,reversedMessage,:function(),/th

4、is 指向 vm 实例,return this.message.split().reverse().join(),),8,2025/4/19 周六,4.,监听属性 watch,来响应数据的变化,var,vm,=new Vue(.);,vm.,$watch,(kilometers,function(newValue,oldValue),/.,),9,2025/4/19 周六,5.样式绑定,.active,width:100px;height:100px;background:green;,.text-danger,background:red;,var vm=,new Vue(,el:#app,

5、data:,isActive,:true,hasError,:true,),10,2025/4/19 周六,6.,事件处理器,(,v-on,),Greet,var app=new Vue(,/在 methods 对象中定义方法,methods:,greet,:function(event),/this 在方法里指当前 Vue 实例,alert(Hello +this.name+!),/event 是原生 DOM 事件,if(event),alert(event.target.tagName),),11,2025/4/19 周六,7.表单,(1).,输入框,new Vue(,el:#app,da

6、ta:,message,:Runoob,),12,2025/4/19 周六,(2).,单选 与 多选,单个复选框:,checked,多个复选框:,Runoob,Google,taobao,选择的值为:checkedNames,new Vue(,el:#app,data:,checked:false,checkedNames:,),13,2025/4/19 周六,8.,组件,注册一个全局组件语法格式如下:,Vponent(tagName,options),例子如下:,/注册,Vponent(runoob,template:自定义组件!,),/创建根实例,new Vue(,el:#app,),14

7、2025/4/19 周六,prop 是父组件用来传递数据的一个自定义属性:,/注册,Vponent(child,/声明 props,props:message,/同样也可以在 vm 实例中像 this.message 这样使用,template:message,),/创建根实例,new Vue(,el:#app,),15,2025/4/19 周六,9.,Vue生命周期中mounted和created的区别,created,:在模板渲染成html,前,调用,即通常初始化某些属性值,然后再渲染成视图。,mounted,:在模板渲染成html,后,调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作,var vm=new Vue(,el:#formId,created,:,function(),/,初始化执行方法,mounted,:function()/,也是,初始化执行方法,this.,reload,();,methods:,reload,:function()/,比如加载,Ajax,请求数据,);,16,2025/4/19 周六,Thankyou,LOREM IPSUM DOLOR,17,2025/4/19 周六,

展开阅读全文

开通  VIP会员、SVIP会员  优惠大
下载10份以上建议开通VIP会员
下载20份以上建议开通SVIP会员


开通VIP      成为共赢上传
相似文档                                   自信AI助手自信AI助手
搜索标签

当前位置:首页 > 包罗万象 > 大杂烩

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        抽奖活动

©2010-2025 宁波自信网络信息技术有限公司  版权所有

客服电话:4009-655-100  投诉/维权电话:18658249818

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :gzh.png    weibo.png    LOFTER.png 

客服