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

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