Vue.js培训PPT幻灯片课件

Vue.js培训,2018,1,简要介绍,后端只给前端提供数据,前端负责HTML渲染和用户交互。,前后端分离,数据双向绑定,采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。,Vue.js是一个用于创建用户界面的开源JavaScript框架,JavaScript框架,2,准备工作,Vue官网上下载js文件：,3,第一个Demo,messagevarvm=newVue(el:#app,data:message:HelloVue.js!),4,1.条件判断(v-if),现在你看到我了菜鸟教程学的不仅是技术，更是梦想！哈哈哈，打字辛苦啊！varvm=newVue(el:#app,data:seen:true,ok:true),5,2.循环语句(v-for),2.1.迭代数组varvm=newVue(el:#app,data:sites:name:Runoob,name:Google,name:Taobao),6,2.2迭代对象valuevarvm=newVue(el:#app,data:object:name:菜鸟教程,url:,slogan:学的不仅是技术，更是梦想！),7,3.计算属性,原始字符串:message计算后反转字符串:reversedMessagevarvm=newVue(el:#app,data:message:Runoob!,computed:/计算属性的getterreversedMessage:function()/this指向vm实例returnthis.message.split().reverse().join(),8,4.监听属性watch,来响应数据的变化,varvm=newVue(.);vm.$watch(kilometers,function(newValue,oldValue)/.),9,5.样式绑定,.activewidth:100px;height:100px;background:green;.text-dangerbackground:red;varvm=newVue(el:#app,data:isActive:true,hasError:true),10,6.事件处理器(v-on),Greetvarapp=newVue(/在methods对象中定义方法methods:greet:function(event)/this在方法里指当前Vue实例alert(Hello++!)/event是原生DOM事件if(event)alert(event.target.tagName),11,7.表单,(1).输入框newVue(el:#app,data:message:Runoob),12,(2).单选与多选单个复选框：checked多个复选框：RunoobGoogletaobao选择的值为:checkedNamesnewVue(el:#app,data:checked:false,checkedNames:),13,8.组件,注册一个全局组件语法格式如下：Vponent(tagName,options)例子如下：/注册Vponent(runoob,template:自定义组件!)/创建根实例newVue(el:#app),14,prop是父组件用来传递数据的一个自定义属性：/注册Vponent(child,/声明propsprops:message,/同样也可以在vm实例中像this.message这样使用template:message)/创建根实例newVue(el:#app),15,9.Vue生命周期中mounted和created的区别,created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作varvm=newVue(el:#formId,created：function()/初始化执行方法,mounted:function()/也是初