个人网站建设制作,asp网站发布ftp,wordpress 酒店模板,有经验的手机网站建设vue和thymeleaf #xff1a; 若先显示框架后加载数据则用vue 若后端处理好之后发送给前端页面显示用thymeleaf (弹幕) 对于前后端分离的认识#xff1a; 使用vue 将前端页面、框架等建立好#xff0c;只需要后端发送数据即可 但thymeleaf就需要在服务器启动之前将数据保存到…vue和thymeleaf 若先显示框架后加载数据则用vue 若后端处理好之后发送给前端页面显示用thymeleaf (弹幕) 对于前后端分离的认识 使用vue 将前端页面、框架等建立好只需要后端发送数据即可 但thymeleaf就需要在服务器启动之前将数据保存到session等作用域中发送给前端之后才会使用thymeleaf渲染这些数据。 1、定义js对象 headmeta charsetUTF-8titleTitle/titlescript languageJavaScript srcsrc/main/webapp/srcipt/vue.js/scriptscript languageJavaScriptfunction hello(){person.sayhello();}//定义js 对象var person {pid:p001,pname:jim,sayhello:function (){alert(Hello world);}}/script /head bodydiv iddiv0spanHello/spaninput typebutton value打招呼 onclickhello()/div /body 2、定义vue对象 headmeta charsetUTF-8titleTitle/titlescript languageJavaScript srcsrcipt/vue.js/scriptscript languageJavaScript//window.onload 类似于java中的staticwindow.onloadfunction (){var vue new Vue({//el:element 标识当前的vue对象可以和对应的div_id 进行绑定el:#div0,data:{// data中的元素以key-value方式存储以 , 分割msg:hello world!,uname:李元霸},methods:{}});}/script /headbodydiv iddiv0span{{msg}} /span/div /body 2.1 new Vue({})  每个vue对象有3个标识符 el : 标识当前的vue对象可以和对应的div_id 进行绑定 data: 存放json类型的数据 methods存放定义的一些函数 2.2 声明式渲染 再body体 中可以使用{{vue.data.key}}来显示对应的value window-onload 认识 JS中window.onload事件详解_pseudonym_的博客-CSDN博客_window.onload 3、vue中语法  3.1 v-bindvalue 表示将value属性交给vue进行管理即绑定到Vue对象 bodydiv iddiv0span{{uname}}/spaninput typetext v-bind:valueuname/div /body 此时我们只需要改变Vue对象中的uname值即可改变文本框中显示的值。 3.2 v-model:value 也是将value属性交给Vue对象进行管理但与v-bind不同的是v-model为双向绑定即我们再文本框中也可以改变Vue对象中data属性里的值。 bodydiv iddiv0span{{msg}}/spanbr/input typetext v-model:valuemsg/div /body 页面显示结果 当修改文本框中的值 4   vue语法之if 4.1 v-if、v-else headmeta charsetUTF-8titleTitle/titlescript languageJavaScript srcsrcipt/vue.js/scriptscript languageJavaScriptwindow.onloadfunction (){var vue new Vue({el:#div0,data:{num:2}});}/script /headbodydiv iddiv0input typetext v-model:valuenumdiv v-ifnum%20 stylewidth:100px;height: 100px;background-color: chartreuse;nbsp;/divdiv v-elsenum%20 stylewidth:100px;height: 100px;background-color: orangered;nbsp;/div/div /body 注 v-else中也需要写与v-if中一样的条件进行判断并且两个节点之间不能有其他节点 页面展示结果 当num为偶数时 颜色为chartreuse 当num为奇数时 颜色为orangered 4.2 v-show  bodydiv iddiv0input typetext v-model:valuenumdiv v-shownum%20 stylewidth:200px;height: 200px;background-color: blueviolet;nbsp;/div/div /body v-show通过控制其display属性来确定是否显示 等于说 如果满足条件 display就不为none就会显示否则为none就不显示。 5、vue语法之for 基本语法为 v-for循环体 in 集合 headmeta charsetUTF-8titleTitle/titlescript languageJavaScript srcsrcipt/vue.js/scriptscript languageJavaScriptwindow.onloadfunction (){var vue new Vue({el:#div0,data:{fruitList:[{fname:苹果,price:5,fcount:100,remark:苹果很好吃},{fname:香蕉,price:100,fcount:666,remark:香蕉很好吃},{fname:橘子,price:23,fcount:455,remark:orange很好吃},{fname:香瓜,price:41,fcount:555,remark:香瓜很不好吃}]}});}/script /head bodydiv iddiv0table border1 width400 cellpadding4 cellspacing0trth名称/thth单价/thth库存/thth备注/th/trtr v-forfruit in fruitListtd{{fruit.fname}}/tdtd{{fruit.price}}/tdtd{{fruit.fcount}}/tdtd{{fruit.remark}}/td/tr/table/div /body 页面显示结果 6、事件驱动 6.1 v-on:click 6.1.1字符串顺序反转 input typebutton value反转 v-on:clickmyReverse/ 首先在按钮上定义事件通过v-on:click来绑定事件之后再Vue中再method属性中写对应事件的函数即可。 headmeta charsetUTF-8titleTitle/titlescript languageJavaScript srcsrcipt/vue.js/scriptscript languageJavaScriptwindow.onloadfunction (){var vue new Vue({el:#div0,data:{msg:hello world!},methods:{myReverse:function (){this.msgthis.msg.split().reverse().join(),}}});}/script /head bodydiv iddiv0span{{msg}}/span// v-on:click 也可以简写为clickinput typebutton value反转 v-on:clickmyReverse//div /body 注: str.split()与str.join() 都是将字符串按照   内的值来进行分割或者连接的 example1: msg hello world , msg.split(o) 展示结果为 即以 字符o 作为分割的值。 example2:msg hello world , msg.split( ) 展示结果为 即以 字符 空格 作为分割的值。 6.2 侦听属性 所谓“侦听”就是对message的属性进行监控当值发生改变时调用一些函数等 小白案例 headmeta charsetUTF-8titleTitle/titlescript languageJavaScript srcsrcipt/vue.js/scriptscript languageJavaScriptwindow.onloadfunction (){var vue new Vue({el:#div0,data:{num1:1,num2:2,num3:0},watch:{//侦听属性num1 和num2 当num1的值发生改变时调用后面的方法num1:function (newValue){this.num3 parseInt(newValue)parseInt(this.num2);},num2:function (newValue){this.num3 parseInt(newValue)parseInt(this.num1);}}});}/script /head bodydiv iddiv0input typetext v-model:valuenum1 size2input typetext v-model:valuenum2 size2span{{num3}}/span/div /body 7、Vue的生命周期 7.1 vue对象创建 /*vue对象创建之前*/beforeCreate:function (){/*此时再浏览器控制台里会显示msg:undefined */console.log(beforeCreate:vue对象创建之前--------);console.log(msg:this.msg);},/*vue对象创建之后*/created:function (){console.log(Created:vue对象创建之后--------);console.log(msg:this.msg);},/body 控制台输出结果 7.2 数据装载 数据装载指 再body体内把对应的表示的 变量 赋值 /*数据装载之前*/beforeMount:function (){console.log(beforeMount数据装载之前--------);console.log(msg:document.getElementById(a).innerText);},/*数据装载之后*/mounted:function (){console.log(mounted数据装载之后--------);console.log(msg:document.getElementById(a).innerText);},bodydiv iddiv0span ida{{msg}}/span/div /body 控制台输出结果 可以看到数据装载之前 span中表示的动态内容是静态的并没有赋值。 7.3数据更新 methods:{change:function (){this.msg this.msg world;}},beforeUpdate:function (){console.log(beforeUpdate数据更新之前--------);console.log(msg:this.msg)console.log(span:document.getElementById(a).innerText);},/*数据更新之后*/updated:function (){console.log(updated数据更新之后--------);console.log(msg:this.msg)console.log(span:document.getElementById(a).innerText);}bodydiv iddiv0input typebutton value点我 v-on:clickchange//div 展示结果 初始页面 点击按钮之后 再次点击  控制台输出结果