2024年-Vuejs培训PPT学习课件（精编）.ppt

Vue.js培训20181

简要介绍后端只给前端提供数据,前端负责HTML渲染和用户交互。前后端分离数据双向绑定采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。Vue.js是一个用于创建用户界面的开源JavaScript框架JavaScript框架22024/5/4

准备工作Vue官网上下载js文件：!--引入组件库--scriptsrc=@spring.url/public/javascripts/vue/vue.js/32024/5/4

第一个Demodivid=appp{{message}}/p/divscriptvarvm=newVue({el:#app,data:{message:HelloVue.js!}})/script42024/5/4

1.条件判断(v-if)divid=apppv-if=seen现在你看到我了/ptemplatev-if=okh1菜鸟教程/h1p学的不仅是技术，更是梦想！/pp哈哈哈，打字辛苦啊！！！/p/template/divscriptvarvm=newVue({el:#app,data:{seen:true,ok:true}})/script52024/5/4

2.循环语句(v-for)2.1.迭代数组divid=appolliv-for=siteinsites{{}}/li/ol/divscriptvarvm=newVue({el:#app,data:{sites:[{name:Runoob},{name:Google},{name:Taobao}]}})/script62024/5/4

2.2迭代对象divid=appulliv-for=valueinobject{{value}}/li/ul/divscriptvarvm=newVue({el:#app,data:{object:{name:菜鸟教程,url:,slogan:学的不仅是技术，更是梦想！}}})/script72024/5/4

3.计算属性divid=appp原始字符串:{{message}}/pp计算后反转字符串:{{reversedMessage}}/p/divscriptvarvm=newVue({el:#app,data:{message:Runoob!},computed:{//计算属性的getterreversedMessage:function(){//`this`指向vm实例returnthis.message.split().reverse().join()}}})/script82024/5/4

4.监听属性watch,来响应数据的变化varvm=newVue({...});vm.$watch(kilometers,function(newValue,oldValue){//........})92024/5/4

5.样式绑定style.active{width:100px;height:100px;background:green;}.text-danger{background:red;}/style/headbodydivid=appdivclass=staticv-bind:class={active:isActive,text-danger:hasError}/div/divscriptvarvm=newVue({el:#app,data:{isActive:true,hasError:true}})/script102024/5/4

6.事件处理器(v-on)div