Commit 861c70f0 authored by Adam Procter's avatar Adam Procter

Vue examples 3-6

Created some more examples building on each other in varying ways.
parent e6083c73
body {
font-size: 22px;
line-height:28px;
font-family: "Chaparral W01";
font-weight: 400;
font-style: normal;
color: rgba(51, 51, 51, 1);
}
h1 {
font-family: "Galano Classic W00";
font-weight: 700;
font-style: bold;
font-size: 45px;
line-height: 62px;
}
li{
font-family: "Pica 10 Pitch W01";
font-weight: 400;
font-style: bold;
font-size: 16px;
line-height: 20px;
}
textarea {
width: 90%;
height: 400px;
border: none;
border-right: 1px solid #ccc;
resize: none;
outline: none;
background-color: #f6f6f6;
font-size: 14px;
font-family: 'Monaco', courier, monospace;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Vue 5 app</title>
<script type="text/javascript" src="http://fast.fonts.net/jsapi/123daa36-b737-45e7-87de-86581d6755c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/deepstream.io-client-js/2.1.1/deepstream.js"></script>
<script src="js/vue.js"></script>
<script src="js/marked.js"></script>
<script src="js/lodash.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
</head>
<body>
<div id="app">
<h1>Five Alive</h1>
<p>Test Vue.js app attached to Deep Stream Hub</p>
<div class="group connectionState">
Connection-State is: <em id="connection-state">{{connectionState}}</em>
</div>
<my-record :ds="ds"></my-record>
</div>
<script>
const Record = {
template:'<div class="group realtimedb"><h2>Realtime Datastore</h2> <div class="input-group half left"><label>Field A</label><input type="text" v-model="fielda" @input="handleFAUpdate()" /></div><div class="input-group half"><label>Field B</label><input type="text" v-model="fieldb" @input="handleFBUpdate()" /><div class="input-group half"><label>Field C</label><input type="text" v-model="fieldc" @input="handleFCUpdate()" /></div><div class="input-group half"><label>Field D</label><input type="text" v-model="fieldd" @input="handleFDUpdate()" /></div></div>',
props: ['ds'],
data: function() {
return {
fielda: '',
fieldb: '',
fieldc: '',
fieldd: '',
}
},
created: function() {
this.record = this.ds.record.getRecord('vue5/datarecord');
this.record.subscribe(values => {
this.fielda = values.fielda;
this.fieldb = values.fieldb;
this.fieldc = values.fieldc;
this.fieldd = values.fieldd;
})
},
methods: {
handleFAUpdate: function() {
this.record.set('fielda', this.fielda);
},
handleFBUpdate: function() {
this.record.set('fieldb', this.fieldb);
},
handleFCUpdate: function() {
this.record.set('fieldc', this.fieldc);
},
handleFDUpdate: function() {
this.record.set('fieldd', this.fieldd);
}
}
};
new Vue({
el: '#app',
components: {
'my-record': Record,
},
data: {
ds: null,
connectionState: 'INITIAL'
},
created: function() {
this.ds = deepstream('wss://154.deepstreamhub.com?apiKey=0c6811b0-afa5-40df-93c8-c71d6f1cc0b5')
.login()
.on('connectionStateChanged', connectionState => {
this.connectionState = connectionState;
});
},
methods: {
}
})
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This Simple Vue.js project connects to deepstream hub to store data and sync this between client and datastore.
body {
font-size: 22px;
line-height:28px;
font-family: "Chaparral W01";
font-weight: 400;
font-style: normal;
color: rgba(51, 51, 51, 1);
}
h1 {
font-family: "Galano Classic W00";
font-weight: 700;
font-style: bold;
font-size: 45px;
line-height: 62px;
}
li{
font-family: "Pica 10 Pitch W01";
font-weight: 400;
font-style: bold;
font-size: 16px;
line-height: 20px;
}
textarea {
width: 90%;
height: 400px;
border: none;
border-right: 1px solid #ccc;
resize: none;
outline: none;
background-color: #f6f6f6;
font-size: 14px;
font-family: 'Monaco', courier, monospace;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="js/vue.js"></script>
<script src="js/marked.js"></script>
<script src="js/lodash.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://fast.fonts.net/jsapi/123daa36-b737-45e7-87de-86581d6755c3.js"></script>
</head>
<body>
<div id="app">
<!-- index is used to check with current screen index -->
<div v-for="(screen, index) in mydata.screens">
<!-- Hide all screen info, show only the one with index === to current screen index -->
<div v-show="index === screenIndex">
<h1>{{screen.text}}</h1>
<textarea :value="input" @input="update" v-if="screenIndex == 0" ></textarea>
<div v-if="screenIndex == 1" v-html="compiledMarkdown"></div>
</div>
</div>
<div v-show="screenIndex === mydata.screens.length">
<h2>Finished</h2>
</div>
<button v-if="screenIndex > 0" v-on:click="prev">Edit</button>
<button v-if="screenIndex < 1" v-on:click="next">Preview</button>
</div>
<script>
var mydata = {title: 'Welcome', screens:[{text: "Edit Mode"},{text: "Preview"}]
};
var vm = new Vue({
el: '#app',
data: {
input: '# Hello', mydata : mydata, screenIndex: 0
} ,
computed: {
compiledMarkdown: function () {
return marked(this.input, { sanitize: true })
}
},
methods: {
update: _.debounce(function (e) {
this.input = e.target.value
}, 300),
// Go to next screen
next: function() {
this.screenIndex++;
},
// Go to previous screen
prev: function() {
this.screenIndex--;
}
}
})
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
body {
font-size: 22px;
line-height:28px;
font-family: "Chaparral W01";
font-weight: 400;
font-style: normal;
color: rgba(51, 51, 51, 1);
}
h1 {
font-family: "Galano Classic W00";
font-weight: 700;
font-style: bold;
font-size: 45px;
line-height: 62px;
}
li{
font-family: "Pica 10 Pitch W01";
font-weight: 400;
font-style: bold;
font-size: 16px;
line-height: 20px;
}
textarea {
width: 90%;
height: 400px;
border: none;
border-right: 1px solid #ccc;
resize: none;
outline: none;
background-color: #f6f6f6;
font-size: 14px;
font-family: 'Monaco', courier, monospace;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Vue 5 app</title>
<script type="text/javascript" src="http://fast.fonts.net/jsapi/123daa36-b737-45e7-87de-86581d6755c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/deepstream.io-client-js/2.1.1/deepstream.js"></script>
<script src="js/vue.js"></script>
<script src="js/marked.js"></script>
<script src="js/lodash.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
</head>
<body>
<div id="app">
<h1>SIX </h1>
<p>Second test Vue.js app attached to Deep Stream Hub</p>
<div class="group connectionState">
Connection-State is: <em id="connection-state">{{connectionState}}</em>
</div>
<my-record :ds="ds"></my-record>
</div>
<script>
var recordName = 5
const Record = {
template:'<div><textarea v-model="textarea" @input="handleTEXTAREAUpdate()"></textarea><label>Author</label><input type="text" v-model="author" @input="handleAUTHORUpdate()"/><div v-html="compiledMarkdown"></div></div>',
props: ['ds'],
data: function() {
return {
textarea: '',
author:'',
}
},
created: function() {
recordName = this.ds.getUid();
this.record = this.ds.record.getRecord('vue5/datarecord_'+recordName);
this.record.subscribe(values => {
this.textarea = values.textarea;
this.author = values.author;
})
},
computed: {
compiledMarkdown: function () {
return marked(this.textarea , { sanitize: true })
}
},
methods: {
update: _.debounce(function (e) {
this.textarea = e.target.value
}, 300),
handleTEXTAREAUpdate: function() {
this.record.set('textarea', this.textarea);
},
handleAUTHORUpdate: function() {
this.record.set('author', this.author);
}
}
};
new Vue({
el: '#app',
components: {
'my-record': Record,
},
data: {
ds: null,
connectionState: 'INITIAL'
},
created: function() {
this.ds = deepstream('wss://154.deepstreamhub.com?apiKey=0c6811b0-afa5-40df-93c8-c71d6f1cc0b5')
.login()
.on('connectionStateChanged', connectionState => {
this.connectionState = connectionState;
});
}
})
</script>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
More Advanced Vue.js project connecting to deepstream hub to store data and sync this between client and datastore. This example creates unique data records or "documents" when you load the page.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment