Vuejs培训--ppt课件

Vue.js培训20181PPT课件简要介绍后端只给前端提供数据,前端负责HTML渲染和用户交互。前后端分离数据双向绑定采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。Vue.js是一个用于创建用户界面的开源JavaScript框架JavaScript框架2PPT课件准备工作•Vue官网上下载js文件：•!--引入组件库--•scriptsrc=@spring.url'/public/javascripts/vue/vue.js/3PPT课件第一个Demo•divid=app•p{{message}}/p•/div•script•varvm=newVue({•el:'#app',•data:{•message:'HelloVue.js!'•}•})•/script4PPT课件1.条件判断(v-if)•divid=app•pv-if=seen现在你看到我了/p•templatev-if=ok•h1菜鸟教程/h1•p学的不仅是技术，更是梦想！/p•p哈哈哈，打字辛苦啊！！！/p•/template•/div••script•varvm=newVue({•el:'#app',•data:{•seen:true,•ok:true•}•})•/script5PPT课件2.循环语句(v-for)•2.1.迭代数组•divid=appol•liv-for=siteinsites•{{site.name}}•/li•/ol/div•script•varvm=newVue({•el:'#app',•data:{•sites:[•{name:'Runoob'},•{name:'Google'},•{name:'Taobao'}•]•}•})•/script6PPT课件•2.2迭代对象•divid=appul•liv-for=valueinobject•{{value}}•/li•/ul/div••script•varvm=newVue({•el:'#app',•data:{•object:{•name:'菜鸟教程',•url:'•slogan:'学的不仅是技术，更是梦想！'•}•}•})•/script7PPT课件3.计算属性•divid=app•p原始字符串:{{message}}/p•p计算后反转字符串:{{reversedMessage}}/p•/div••script•varvm=newVue({•el:'#app',•data:{•message:'Runoob!'•},•computed:{•//计算属性的getter•reversedMessage:function(){•//`this`指向vm实例•returnthis.message.split('').reverse().join('')•}•}•})•/script8PPT课件4.监听属性watch,来响应数据的变化•varvm=newVue({...});•vm.$watch('kilometers',function(newValue,oldValue){•//........•})9PPT课件5.样式绑定•style•.active{width:100px;height:100px;background:green;}•.text-danger{background:red;}•/style•/head•body•divid=app•divclass=static•v-bind:class={active:isActive,text-danger:hasError}•/div•/div•script•varvm=newVue({•el:'#app',•data:{•isActive:true,•hasError:true•}•})•/script10PPT课件6.事件处理器(v-on)•divid=app•buttonv-on:click=greetGreet/button•/div••script•varapp=newVue({•//在`methods`对象中定义方法•methods:{•greet:function(event){•//`this`在方法里指当前Vue实例•alert('Hello'+this.name+'!')•//`event`是原生DOM事件•if(event){•alert(event.target.tagName)•}•}•}•})•/script11PPT课件7.表单•(1).输入框•inputv-model=messageplaceholder=编辑我……•script•newVue({•el:'#app',•data:{•message:'Runoob'•}•})•/script12PPT课件•(2).单选与多选•divid=app•p单个复选框：/p•inputtype=checkboxid=checkboxv-model=checked•labelfor=checkbox{{checked}}/label•p多个复选框：/p•inputtype=checkboxid=runoobvalue=Runoobv-model=checkedNameslabelfor=runoobRunoob/labelinputtype=checkboxid=googlevalue=Googlev-model=checkedNameslabelfor=googleGoogle/label•inputtype=checkboxid=taobaovalue=Taobaov-model=checkedNameslabelfor=taobaotaobao/label•br•span选择的值为:{{checkedNames}}/span•/div•script•newVue({•el:'#app',•data:{•checked:false,•checkedNames:[]•}•})•/script13PPT课件8.组件•注册一个全局组件语法格式如下：•Vue.component(tagName,options)•例子如下：•divid=app•runoob/runoob•/div•script•//注册•Vue.component('runoob',{•template:'h1自定义组件!/h1'•})•//创建根实例•newVue({•el:'#app'•})•/script14PPT课件•prop是父组件用来传递数据的一个自定义属性：•divid=app•childmessage=hello!/child•/div•script•//注册•Vue.component('child',{•//声明props•props:['message'],•//同样也可以在vm实例中像this.message这样使用•template:'span{{message}}/span'•})•//创建根实例•newVue({•el:'#app'•})•/script15PPT课件9.Vue生命周期中mounted和created的区别•created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。•mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作•varvm=newVue({•el:'#formId',•created：function(){//初始化执行方法•},•mounted:function(){//也是初始化执行方法•this.reload();•},•methods:{•reload:function(){//比如加载Ajax请求数据•}•}•});16PPT课件ThankyouLOREMIPSUMDOLOR17PPT课件