Mirroristas/gun
2
0
Fork 0
mirror of https://github.com/amark/gun.git synced 2025-06-25 07:22:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #569 from reinerBa/patch-1

Browse Source 
Make example great again
This commit is contained in:
Mark Nadal 2018-07-03 05:27:06 -07:00 committed by GitHub
commit e293abf703
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 167 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
examples/vue/index.html
View File

@ -3,8 +3,9 @@
<title>Gun plugin for Vue</title> <title>Gun plugin for Vue</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- This example works only with vue 1 -->
<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script> <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
<script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue@1.0.0/dist/vue.min.js"></script>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
@ -14,7 +15,7 @@
<tr> <tr>
<td> <td>
Vue instance data: Vue instance data:
<pre>{{ $data }}</pre> <pre v-html="prettyJSON($data)"></pre>
</td> </td>
<td valign="top" style="text-align:right;"> <td valign="top" style="text-align:right;">
test<br> test<br>
@ -104,14 +105,35 @@
// var http = require('http'), Gun = require('gun'); // var http = require('http'), Gun = require('gun');
// Gun({ web: http.createServer().listen(8080) }); // Gun({ web: http.createServer().listen(8080) });
/********************** MODIFY WITH OUR OWN SERVER ADDRESS **********************/ /********************** MODIFY WITH OUR OWN SERVER ADDRESS **********************/
// Vue.use(GunData, 'http://REPLACE.WITH.YOUR.GUN.SERVER:SERVERPORT/gun'); // Vue.use(GunData, 'http://REPLACE.WITH.YOUR.GUN.SERVER:SERVERPORT/gun');
new Vue({ var inst = new Vue({
el: '#app', el: '#app',
methods: { methods: {
addProp () { Vue.set(this.obj,'newProp_'+Object.keys(this.obj).length,'qwerty') } addProp() { Vue.set(this.obj, 'newProp_' + Object.keys(this.obj).length, 'qwerty') },
// the prettyJSON code is from icebob https://jsfiddle.net/icebob/0mg1v81e/
prettyJSON: function (json) {
if (json) {
json = JSON.stringify(json, undefined, 4);
json = json.replace(/&/g, '&').replace(/</g, '<').replace( />/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
}
}, },
gunData: { gunData: {
// _rootKey: 'put-your-gunDB-root-key-here', // DEFAULTS TO HOSTNAME // _rootKey: 'put-your-gunDB-root-key-here', // DEFAULTS TO HOSTNAME
@ -127,5 +149,30 @@
} }
}); });
</script> </script>
<style>
pre {
overflow: auto;
}
pre .string {
color: #885800;
}
pre .number {
color: blue;
}
pre .boolean {
color: magenta;
}
pre .null {
color: red;
}
pre .key {
color: green;
}
</style>
</body> </body>
</html </html>