jakejie163 Goto Github PK
Type: Organization
Type: Organization
这个项目是一个基于Django开发的功能齐全的论坛类网站。项目基于React和Django作为前后端框架开发而成,集成了第三方插件来丰富网站的功能,包括用户登陆时候的ReCAPTCHA打击垃圾邮件注册,设置Pletora来控制用户的行为,提供UserOnline的功能提供用户的在线信息可查,模仿V站实现文章帖子的不可删除的功能,丰富的民意调查系统,实现批量自定义可见的功能。
QQZone mood spider and analysis. QQ空间多线程爬虫和数据挖掘,并做了大量数据可视化。提供线上服务,扫码登陆即可自动爬取和分析数据;使用docker-compose打包程序,方便部署;额外提供QQ空间抽奖小程序。
artistic QR Code in Python (Animated GIF qr code)- Python 艺术二维码生成器 (GIF动态二维码、图片二维码)
Redis管理平台Repoll,现已开源,基于redis3.x,支持单机、哨兵以及集群模式
Resume template for Chinese programmers . 程序员简历模板系列。包括PHP程序员简历模板、iOS程序员简历模板、Android程序员简历模板、Web前端程序员简历模板、Java程序员简历模板、C/C++程序员简历模板、NodeJS程序员简历模板、架构师简历模板以及通用程序员简历模板
An e-commerce storefront for Python and Django
Scrapy spider middleware to ignore requests to pages containing items seen in previous crawls
scrapy-monitor,实现爬虫可视化,监控实时状态
Scrapyd cluster management, Scrapy log analysis & visualization, Basic auth, Auto packaging, Timer tasks, Email notice, and Mobile UI. :eyes: PREVIEW :point_right:
Privacy-respecting metasearch engine
中文语义分析、网络舆情、中文分词 资料
Sentry is cross-platform application monitoring, with a focus on error reporting.
这是一个电子商务技术专业的教学项目,集中体现了构建一个电商网站所需要的各种技术:web前端bootstrap框架;后端django框架等,如果你在学习过程中遇到问题,欢迎联系我email:[email protected]
程序员技能图谱
图书馆借还系统,一个Django写的练手项目
Python Social Auth - Application - Flask
爬虫实例:微博、b站、csdn、淘宝、今日头条、知乎、豆瓣、知乎APP、大众点评
基于python2+django开发的爬虫监控/调度平台
抓取网易云音乐热门评论
优酷爬虫-下载优酷视频
scrapy爬虫管理界面/a scrapy admin ui/open source scrapinghub
基于分布式爬虫的电商销售分析系统
手撕包菜网站
Stream Framework is a Python library, which allows you to build news feed, activity streams and notification systems using Cassandra and/or Redis. The authors of Stream-Framework also provide a cloud service for feed technology:
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
Download Twitter video streams.
:heart:**科学技术大学课程资源
Python爬虫-视频下载
分布式视频信息爬虫,抓取豆瓣,bilibili等中的电视剧、电影、动漫演员等信息
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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><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><!--<labelslot="nickName"></label>--><!--<labelslot="userScore"></label>--><!--<labelslot="userAge"></label>--></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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><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><!--<h1>HelloWorld</h1>--><hr><divid="app">{{message}}</div><scripttype="text/javascript">varapp=newVue(
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.