liaohanjie Goto Github PK

followers: 1.0 following: 0.0 repos: 54.0 gists: 0.0

Type: User

liaohanjie's Projects

naivechat

:performing_arts: 本项目是作者小傅哥使用JavaFx、Netty4.x、SpringBoot、Mysql等技术栈和偏向于DDD领域驱动设计方式，搭建的仿桌面版微信实现通信核心功能。课程文章已发布到GitChat专栏，欢迎购买。如果本项目能为您提供帮助，请给予支持(关注、:star:Star、分享)！

qipai

棋牌的胡牌算法，包括麻将、跑胡子、扑克。实现lua、c++、c#、golang、js、java、python版本。(Mahjong algorithm)

redis-game-transaction

在大型游戏中经常使用分布式，分布式中因为游戏逻辑会经常游戏事务，借助redis特性我们可以实现分布式锁和分布式事务。很多redis集群不支持redis的事务特性。这个框架用来解决分布式服务器下redis集群事务失效的情况下,基于分布式锁完成分布式事务。支持独占锁，共享锁，读写锁，并且支持事务提交失败情况下的回滚操作，让开发者可以有更多时间侧重游戏逻辑.

spring-boot-protocol

springboot功能扩充-动态协议，可以支持各种网络协议的动态切换（单端口支持多个网络协议）.支持mmap，sendfile零拷贝，http请求批量聚合

threecss-mmorpg

threecss-mmorpg是基于ThreeCSS分布式框架开发的一款通用型的MMORPG项目。(https://mmorpg.threecss.com)

Vue的学习主要是分为基础和全家桶，最后是一个小实例，学完后如果你对移动端开发感兴趣还可以学一下WEEX. 1, HTML的基础知识，你需要达到中级水平，写前端页面的结构代码完全没有问题。 2, CSS的基础知识，最好做过半年以上的切图和布局，最好了解CSS3的知识。 3, Javascript的基础知识，对基本语法掌握，这个要求不高，因为遇到难的我会在视频中讲解。 4, node.js初级知识，只需要会npm的使用和项目初始化就可以了. <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{message}}<p>num:{{num}}</p><p><button@click="add">增加数量</button></p><button@click="minus">减少数量</button></div><scripttype="text/javascript">//全局API混入方式Vue.mixin({beforeUpdate:function(){console.log('我是全局被混入的');alert('我是全局被混入的=mixin-beforeUpdate');}})//额外临时加入时，用于显示日志varaddLog={updated:function(){console.log("数据放生变化,变化成"+this.num+".");alert(this.num+"addLog-updated");},//构造器重名,不起作用methods:{minus:function(){alert('--------');}}}varapp=newVue({el:"#app",data(){return{message:'helloworld',num:1}},methods:{add:function(){this.num+=1;},minus:function(){this.num-=1;}},mixins:[addLog],updated:function(){alert('updated');},beforeUpdate:function(){alert('beforeUpdate');}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{num}}<p><button@click="add">add</button></p></div><scripttype="text/javascript">varextendOp={methods:{add:function(){alert('extendOp-methods-add');}},updated:function(){alert('extendOp-updated');}}varapp=newVue({el:"#app",data(){return{num:1}},methods:{add:function(){this.num++;}},updated:function(){alert('updated')},extends:extendOp})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{message}}<p>|{{suggestion}}|</p><hr><button@click="randomTem">生成随机数</button></div><scripttype="text/javascript">varapp=newVue({el:"#app",data(){return{message:'根据随机数变化',templeature:0,suggestion:null}},watch:{templeature:function(newVal,oldVal){if(newVal<3){this.suggestion='a';}elseif(newVal>3&&newVal<7){this.suggestion='b';}else{this.suggestion='c';}}},methods:{randomTem:function(){this.templeature=Math.floor(Math.random()*10);}}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{message}}</div><header-aid="tmp0"></header-a><header-aid="tmp1"props01="1111"></header-a><scripttype="text/javascript">varheader_a=Vue.extend({template:`<p>{{extendMessage}}=={{extendValue}}==props01:{{props01}}</p>`,data(){return{extendMessage:'我是谁',extendValue:'MMMM'}},props:['props01']})newheader_a({propsData:{props01:'我是props01Value'}}).$mount('#tmp0');newheader_a({propsData:{props01:'我是props01Value'}}).$mount('#tmp1');varapp=newVue({el:"#app",data(){return{message:'helloworld'}}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{message}}<p>{{num}}</p><buttonv-on:click="add">加法</button><buttonv-on:click="addNum(3)">加法3</button><buttonv-on:click="seeEvent($event)">seeEvent</button><p>{{logEvent}}</p><[email protected]="add"></btn><hr><btnonclick="app.add()"></btn></div><scripttype="text/javascript">varbtn={template:`<button>btnAdd</button>`}varapp=newVue({el:"#app",data(){return{message:'helloworld',num:0,logEvent:{}}},methods:{add:function(){this.num++;},addNum:function(plusNum){this.num+=plusNum;},seeEvent:function(event){console.log(event);this.logEvent=event;}},components:{"btn":btn}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{message}}{{coverCardNo}}<ul><liv-for="(xinwen,index)insortNews"><p>{{xinwen.date}}</p><p>{{xinwen.title}}</p></li></ul></div><scripttype="text/javascript">varnewsList=[{title:'香港或就“装甲车被扣”事件追责起诉涉事运输公司',date:'2017/3/10'},{title:'日本第二大准航母服役外媒：针对**潜艇',date:'2017/3/12'},{title:'**北方将有明显雨雪降温天气南方阴雨持续',date:'2017/3/13'},{title:'起底“最短命副市长”：不到40天落马，全家被查',date:'2017/3/23'},];varapp=newVue({el:"#app",data(){return{message:'helloworld',cardNo:"1234567890",news:newsList}},computed:{coverCardNo:function(){returnthis.cardNo.substr(4,5);},sortNews:function(){returnthis.news.reverse();}}})</script></body></html><!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Vue.js实例</title><style>#app{padding-bottom:150px;}</style></head><body><divid="app"><h1>{{message}}</h1><br><h3>【第一季】Vue2.0-内部指令(共8集)</h3><ol><li><ahref="第一季内部指令/01helloworld.html">01Helloword实例</a></li><li><ahref="./第一季内部指令/02v-if_show.html">v-if&v-else&v-show</a></li><li><ahref="./第一季内部指令/03v-for.html">v-for</a></li><li><ahref="./第一季内部指令/04v-text_html.html">v-text&v-html</a></li><li><ahref="./第一季内部指令/05v-on.html">v-on</a></li><li><ahref="./第一季内部指令/06v-model.html">v-model</a></li><li><ahref="./第一季内部指令/07v-bind.html">v-bind</a></li><li><ahref="./第一季内部指令/08v-others.html">v-others</a></li></ol><h3>【第二季】Vue2.0-全局API(共8集)</h3><ol><li><ahref="第二季全局VueAPI/01Vue_directive.html">Vue.directive自定义指令</a></li><li><ahref="第二季全局VueAPI/02Vue_extend.html">Vue.extend构造器的延伸</a></li><li><ahref="第二季全局VueAPI/03Vue_set.html">Vue.set全局操作</a></li><li><ahref="第二季全局VueAPI/04Vue_life.html">Vue的生命周期（钩子函数）</a></li><li><ahref="第二季全局VueAPI/05template.html">Template制作模版</a></li><li><ahref="第二季全局VueAPI/06component.html">Component初识组件</a></li><li><ahref="第二季全局VueAPI/07props.html">Component组件props属性设置</a></li><li><ahref="第二季全局VueAPI/08componentFather.html">Component父子组件关系</a></li><li><ahref="第二季全局VueAPI/09component标签.html">Component标签</a></li></ol><h3>【第三季】Vue2.0视频教程-选项（共6集）</h3><ol><li><ahref="第三季选项option/01propsData.html">propsDataOption全局扩展的数据传递</a></li><li><ahref="第三季选项option/02computed.html">computedOption计算选项</a></li><li><ahref="第三季选项option/03methods.html">MethodsOption方法选项</a></li><li><ahref="第三季选项option/04watch.html">Watch选项监控数据</a></li><li><ahref="第三季选项option/05Mixins混入选项操作.html">Mixins混入选项操作</a></li><li><ahref="第三季选项option/06ExtendsOption扩展选项.html">ExtendsOption扩展选项</a></li></ol><h3>【第四季】Vue2.0视频教程-实例和内置组件（共4集）</h3><ol><li><ahref="第四季实例和内置组件/01实例入门-实例属性.html">实例入门-实例属性</a></li><li><ahref="第四季实例和内置组件/02实例方法.html">实例方法</a></li><li><ahref="第四季实例和内置组件/03实例事件.html">实例事件</a></li><li><ahref="第四季实例和内置组件/04内置组件slot.html">内置组件slot</a></li></ol></div><scripttype="text/javascript">varapp=newVue({el:"#app",data:{message:'Vue2.0实例'}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{message}}<student><labelslot="nickName">{{student.name}}<imgsrc="https://raw.githubusercontent.com/NJHu/vue/master/githubimages/jicchumulu.jpg"width="100px"/></label><spanslot="userScore">{{student.score}}</span><spanslot="userAge">{{student.age}}</span></student><student></student></div><templateid="tmp"><div><p>name:<slotname="nickName"><label>DefaultName</label></slot></p><p>age:<slotname="userAge"><label>DefaultAge</label></slot></p><p>score:<slotname="userScore"><label>DefaultScore</label></slot></p></div></template><scripttype="text/javascript">letcmp={template:'#tmp'}varapp=newVue({el:"#app",data(){return{message:'helloworld',student:{name:"jim",age:19,score:99}}},components:{"student":cmp}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{message}}==app</div><divid="tmp"></div><buttononclick="app.$forceUpdate()">强制更新app</button><buttononclick="ex.$forceUpdate()">强制更新ex</button><buttononclick="destoryApp()">销毁</button><hr><buttononclick="changeName()">nextTick更改名字</button><scripttype="text/javascript">functionchangeName(){ex.name='rose';ex.$nextTick(function(){alert(ex.name);})setTimeout(function(){ex.name='jack';},2000);}varmyGlobalExntend=Vue.extend({template:`<div>|{{name}}|</div>`,data(){return{name:'Jim'}},destroyed:function(){console.log('myGlobalExntend-destroyed销毁之后')},beforeUpdate:function(){console.log('beforeUpdate数据更新前');},updated:function(){console.log('updated被更新后');},nextTick:function(){console.log('data更新啦');}})varapp=newVue({el:"#app",data(){return{message:'helloworld'}},destroyed:function(){console.log('10-destroyed销毁之后')},beforeUpdate:function(){console.log('5-beforeUpdate数据更新前');},updated:function(){console.log('6-updated被更新后');},nextTick:function(){console.log('1-data更新啦');}})letex=newmyGlobalExntend().$mount('#tmp');functiondestoryApp(){ex.$destroy();app.$destroy();}</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><scriptsrc="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><title>Helloworld</title><styletype="text/css">button{border:solid1pxblack;display:block;margin:20px;}</style></head><body><hr><divid="app">{{message}}<p>{{num}}</p><buttonv-on:click="add()">内部加法</button></div><buttononclick="callAppAdd()">外部加法</button><scripttype="text/javascript">varapp=newVue({el:"#app",data(){return{message:'helloworld',num:1}},mounted:function(){console.log($('#app'));$('#app')[0].style.backgroundColor='red';},methods:{add:function(){this.num+=1;}}})functioncallAppAdd(){app.add();}</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title><styletype="text/css">button{border:solid1pxblack;display:block;margin:20px;}</style></head><body><hr><divid="app"><p>{{message}}</p>{{num}}<buttonv-on:click="reduce()">methods内部减法</button><buttononclick="reduce()">减法</button><buttononclick="app.$emit('reduceOnce')">只能执行一次</button><buttononclick="offReduce()">关闭</button></div><scripttype="text/javascript">varapp=newVue({el:"#app",data(){return{message:'helloworld',num:0}},methods:{reduce:function(){this.message=Math.floor(Math.random()*10)+"我是随机数";}}})//一、$on在构造器外部添加事件。app.$on('reduce',function(){this.num--;})//二、$once执行一次的事件app.$once('reduceOnce',function(){this.$emit('reduce');})//三、$off关闭事件functionoffReduce(){app.$off('reduce');}//外部调用内部事件functionreduce(){app.$emit('reduce');}</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title><styletype="text/css">button{font-size:20px;}</style></head><body><h1>HelloWorld</h1><hr><divid="app"><h1>{{count}}</h1><buttononclick="add()">add():Vue.set(outData,'count',4);</button><buttononclick="add2()">add2():app.count++;</button><buttononclick="add3()">add3():outData.count++;</button><buttononclick="add4()">add4():app.$data.count++;</button></div><hr><divid="app2"><h1>Vue.set全局操作</h1><hr><ul><liv-for="textinarr">{{text}}</li></ul><buttononclick="changeArr()">changeArr()</button></div><scripttype="text/javascript">//MARK=================================varoutArray={arr:['aaa','bbb','ccc']}varapp2=newVue({el:"#app2",data:outArray})functionchangeArr(){console.log('================');//app2.arr[1]='ddd';//方法一Vue.set(app2.arr,2,'ddd');//方法二app2.arr.splice(1,1,'pppppp');}//MARK===============================//在构造器外部声明数据varoutData={count:1,goodName:'car'}varapp=newVue({el:"#app",data:outData})functionadd(){Vue.set(outData,'count',4);if(Vue==app){alert('Vue==app');}}functionadd2(){app.count++;}functionadd3(){outData.count++;}functionadd4(){app.$data.count++;}</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><h1>HelloWorld</h1><hr><h1>构造器的声明周期</h1><hr><keep-alive><divid="app">{{message}}<p><button@click="jia">加分</button></p></div></keep-alive><buttononclick="app.$destroy()">销毁</button><br><br><div><label>Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。<br>1、beforeCreate<br>　　在实例初始化之后，数据观测和event/watcher时间配置之前被调用。<br>2、created<br>　　实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。<br>3、beforeMount<br>　　在挂载开始之前被调用：相关的render函数首次被调用。<br>　　该钩子在服务器端渲染期间不被调用。<br>4、mounted<br>　　el被新创建的vm.$el替换，并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。<br>　　该钩子在服务端渲染期间不被调用。<br>5、beforeUpdate<br>　　数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。<br>　　你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。<br>　　该钩子在服务端渲染期间不被调用。<br>6、updated<br>　　由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。<br>　　当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。<br>　　该钩子在服务端渲染期间不被调用。<br>7、activated<br>　　keep-alive组件激活时调用。<br>　　该钩子在服务器端渲染期间不被调用。<br>8、deactivated<br>　　keep-alive组件停用时调用。<br>　　该钩子在服务端渲染期间不被调用。<br>9、beforeDestroy【类似于React生命周期的componentWillUnmount】<br>　　实例销毁之间调用。在这一步，实例仍然完全可用。<br>　　该钩子在服务端渲染期间不被调用。<br>10、destroyed<br>　　Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。<br>　　该钩子在服务端渲染不会被调用<br></label></div><scripttype="text/javascript">varapp=newVue({el:"#app",data:{message:1},methods:{jia:function(){this.message++;}},beforeCreate:function(){console.log('1-beforeCreate初始化之后');},created:function(){console.log('2-created创建完成');},beforeMount:function(){console.log('3-beforeMount挂载之前');},mounted:function(){console.log('4-mounted被挂载');},beforeUpdate:function(){console.log('5-beforeUpdate数据更新前');},updated:function(){console.log('6-updated被更新后');},activated:function(){console.log('7-activated');},deactivated:function(){console.log('8-deactivated');},beforeDestroy:function(){console.log('9-beforeDestroy销毁之前');},destroyed:function(){console.log('10-destroyed销毁之后')}//console.log(app.$element);})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><h1>HelloWorld</h1><hr><divid="app">{{message}}<author:value0="message"></author><divid="needAuthorExtend"value0="message"></div></div><scripttype="text/javascript">varauthorExtend=Vue.extend({template:`<div><p><a:href='authorUrl'>{{authorName}}|{{value0}}</a></p><button@click='actionLog'>logloglog</button><label>123</label></div>`,props:['value0'],data:function(){return{authorName:'njhu',authorUrl:'https://www.github.com/njhu/vue'}},methods:{actionLog:function(){console.log('====');}}});varapp=newVue({el:"#app",data:{message:'helloworld'}})letnewAuthor=newauthorExtend({propsData:{value0:app.message}}).$mount('author');letnewNeedAuthorExtend=newauthorExtend({propsData:{value0:"我是传参"}}).$mount('#needAuthorExtend');console.log(newAuthor);console.log(newNeedAuthorExtend);</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><divid="app">{{message}}<component-a></component-a><component-b></component-b><component-c></component-c><hr><componentv-bind:is="whoComponent"></component><hr><button@click="changeComponent">changeComponent</button></div><scripttype="text/javascript">varcomponentA={template:`<div>I'mcomponentA</div>`}varcomponentB={template:`<div>I'mcomponentB</div>`}varcomponentC={template:`<div>I'mcomponentC</div>`}varapp=newVue({el:"#app",data(){return{message:'helloworld',whoComponent:componentA}},components:{"componentA":componentA,"componentB":componentB,"componentC":componentC},methods:{changeComponent:function(){if(this.whoComponent==componentA){this.whoComponent=componentB;}elseif(this.whoComponent==componentB){this.whoComponent=componentC;}else{this.whoComponent=componentA;}}}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{message}}<my-component></my-component></div><hr><my-component></my-component><divid="app2">{{message}}<jubu-component></jubu-component></div><hr><scripttype="text/javascript">Vue.component('my-component',{template:'<divstyle="color:red;">全局化注册的sss标签</div>'})varapp=newVue({el:"#app",data(){return{message:'我是全局'}}})varapp2=newVue({el:"#app2",data(){return{message:'我是局部'}},components:{"jubu-component":{template:'<imgsrc="https://raw.githubusercontent.com/NJHu/iOSProject/master/images/sp/sytab.png"width="100px"height="100px">'}}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><h1>HelloWorld</h1><hr><divid="app">{{message}}<location-herehere="shanghai"from-where="meiguo"></location-here><location-herev-bind:here="locaiton":from-where="fromWhereLocation"></location-here></div><scripttype="text/javascript">varapp=newVue({el:"#app",data:{message:'helloworld',locaiton:'beijing',fromWhereLocation:'yingguo'},components:{'location-here':{template:'<divstyle="color:red">|{{here}}|{{fromWhere}}|{{abc}}|</div>',props:['here','fromWhere'],data(){return{abc:'123'}}}}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><h1>HelloWorld</h1><hr><divid="app"><divv-changecolor="color">{{num}}</div><div:changecolor="color">{{num}}</div><div><button@click="add">Add</button><buttononclick="unbind()">销毁</button></div></div><scripttype="text/javascript">Vue.directive('changecolor',{bind:function(el,binding,vnode){//被绑定el.style='color:'+binding.value;console.log(el,binding,vnode);console.log('1-bind');},inserted:function(){//绑定到节点console.log('2-inserted');},update:function(){//组件更新console.log('3-update');},componentUpdated:function(){//组件更新完成console.log('4-componentUpdated');},unbind:function(){//解绑console.log('5-unbind');}});varapp=newVue({el:'#app',data:{num:10,color:'red'},methods:{add:function(){this.num++;}}})functionunbind(){app.$destroy();}</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{message}}</div><divid="app2">{{message}}</div><divid="app3">{{message}}</div><templateid="demo2"><h2style="color:red">我是template标签模板</h2></template><scripttype="x-template"id="demo3"><h2style="color:red">我是script标签模板</h2></script><scripttype="text/javascript">varapp=newVue({el:"#app",data:{message:'helloworld'},template:'<h1style="color:red">我是选项模板</h1>'})varapp2=newVue({el:"#app2",data:{message:'helloworld2'},template:'#demo2'})varapp3=newVue({el:"#app3",data:{message:'helloworld3'},template:'#demo3'})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><divid="app"><hr><component01where="我是全局局部注册"></component01><hr><qian-taofather-where="我是局部嵌套"></qian-tao><hr><qian-tao-02qiao-tao02-params="我是全局嵌套"></qian-tao-02></div><scripttype="text/javascript">varcomponent01={template:'<div>Pandafrom{{where}}!</div>',props:['where']}varqianTao02={template:`<div>{{qiaoTao02Params}}<component01where="meiguo"></component01></div>`,props:['qiaoTao02Params'],components:{'component01':component01}}varapp=newVue({el:"#app",data:{message:'helloworld'},components:{"component01":component01,"qian-tao":{template:`<div>+{{fatherWhere}}div<component01where="yingguo"></component01></div>`,components:{"component01":component01},props:['fatherWhere']},"qian-tao-02":qianTao02}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><h1>v-for指令用法</h1><hr><divid="app"><ul><liv-for="iteminitems">{{item}}</li></ul><hr><ul><liv-for="iteminsortItems">{{item}}</li></ul><ul><liv-for="(student,index)insortStudent">{{index}}：{{student.name}}-{{student.age}}</li></ul></div><scripttype="text/javascript">functionsortNumber(a,b){returna-b;}//数组对象方法排序:functionsortByKey(array,key){returnarray.sort(function(a,b){varx=a[key];vary=b[key];return((x<y)?-1:((x>y)?1:0));});}varapp=newVue({el:'#app',data:{items:[20,23,18,65,32,19,5,56,41],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:21},{name:'King',age:45}]},computed:{sortItems:function(){returnthis.items.sort(sortNumber);},sortStudent:function(){returnsortByKey(this.students,'age');}}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title><styletype="text/css">[v-cloak]{display:none;}input{border:solid1pxblack;}</style></head><body><h1>HelloWorld</h1><hr><divid="app">{{message}}<hr>v-pre指令:<divv-pre>{{message}}</div>v-cloak指令在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用:<divv-cloak>{{message}}</div><divv-once>第一次绑定的值：{{message}}</div><div><inputtype="text"v-model="message"></div></div><scripttype="text/javascript">setTimeout(function(){varapp=newVue({el:"#app",data:{message:'helloworld'}})},2000)</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>v-on事件监听器</title><styletype="text/css">button{font-size:40px;}input{border:solidblack1px;}</style></head><body><h1>v-on事件监听器</h1><hr><divid="app">本场比赛得分：{{count}}<br/><buttonv-on:click="jiafen">加分</button><buttonv-on:click="jianfen">减分</button><hr><p>{{secondCount}}</p><inputtype="number"v-on:keyup.enter="onEnter"v-model="secondCount"></div><scripttype="text/javascript">varapp=newVue({el:'#app',data:{count:1,secondCount:0},methods:{jiafen:function(){this.count++;},jianfen:function(){this.count--;},onEnter:function(){this.count=parseFloat(this.secondCount)+5;}}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><h1>HelloWorld</h1><hr><divid="app"><span>{{messsage}}</span>=<spanv-text="messsage"></span><br/><pv-text="msgHtml"></p><spanv-html="msgHtml"></span></div><scripttype="text/javascript">varapp=newVue({el:"#app",data:{messsage:'helloworld',msgHtml:'<h2>helloVue!</h2>'}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title><styletype="text/css">input,textarea{border:1pxsolidblack;}</style></head><body><h1>HelloWorld</h1><hr><divid="app"style="padding-bottom:100px"><p>原始文本信息message：{{message}}</p><p>v-model:<inputtype="text"v-model="message"></p><p>原始文本信息textareaMessage：{{textareaMessage}}</p><textareacols="30"rows="10"v-model="textareaMessage"></textarea><p>原始文本信息lazyMessage：{{lazyMessage}}</p><p>v-model:<inputtype="text"v-model.lazy="lazyMessage"></p><p>原始文本信息numberMessage：{{numberMessage}}</p><p>v-model:<inputtype="number"v-model.number="numberMessage"></p><p>.trim：输入去掉首尾空格原始文本信息trimMessage：|{{trimMessage}}|</p><p>v-model:<inputtype="text"v-model.trim="trimMessage"></p><h3>多选按钮绑定一个值</h3><inputtype="checkbox"id="isTrue"v-model="isTrue"><labelfor='isTrue'>{{isTrue}}</label><h3>多选绑定一个数组</h3><p><inputtype="checkbox"id="JSPang"value="JSPang"v-model="web_Names"><labelfor="JSPang">JSPang</label><br/><inputtype="checkbox"id="Panda"value="Panda"v-model="web_Names"><labelfor="Panda">Panda</label><br/><inputtype="checkbox"id="PanPan"value="PanPan"v-model="web_Names"><labelfor="PanPan">PanPan</label><p>{{web_Names}}</p></p><h3>单选按钮绑定</h3><p><inputtype="radio"id="one"value="男"v-model="sex"><labelfor="one">男</label><inputtype="radio"id="two"value="女"v-model="sex"><labelfor="two">女</label><p>{{sex}}</p></p></div><scripttype="text/javascript">varapp=newVue({el:"#app",data:{message:'helloworld',textareaMessage:'',lazyMessage:'',numberMessage:0,trimMessage:'',isTrue:false,web_Names:[],sex:''}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><h1>v-if判断是否加载</h1><hr><divid="app"><divv-if="isLogin">你好：nj</div><divv-show="isLogin">我是v-show</div><divv-else>请登录后操作</div><button@click="clickLogin"style="color:black;font-size:44px">登录/退出</button></div><scripttype="text/javascript">varapp=newVue({el:'#app',data:{isLogin:false},methods:{clickLogin:function(){this.isLogin=!this.isLogin;}}})</script></body></html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><scriptsrc="https://cdn.jsdelivr.net/npm/vue"></script><title>Helloworld</title></head><body><hr><divid="app">{{message}}</div><scripttype="text/javascript">varapp=newVue(

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.