File size: 2,732 Bytes
d95db82 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
'''
title: loadvue
'''
import simplestart as ss
ss.md("## ss.loadvue Load Vue SFC")
ss.space()
ss.md("In SimpleStart, you can load custom Vue Single File Components using ss.loadvue, enabling property and data interaction.")
ss.space()
ss.space()
ss.md('''
#### 🔅 Example
In this example, we define a simple frontend component that includes an "ontest" event. When the user clicks the "handle on server" button,
the Python side's ontest event handler will process it and receive data passed from the frontend component. Meanwhile, when the "Modify Data"
button on the Python side is clicked, the frontend component will respond by changing the displayed content.
''')
ss.space("mt-8")
ss.md("---")
ss.space("mt-8")
tagid = 0
tags = ["Python", "Java", "Javascript"]
data = {"count":0, "language":"C++"}
global myvue
#trigger event on server from client side
def ontest(event):
ss.message(event.value)
#change data in client component on server side
def changedata(event):
global tagid
myvue.data["language"] = tags[tagid]
myvue.update()
tagid = (tagid+1) % 3
ss.text("Python Side")
ss.button("Modify Data", onclick=changedata)
ss.space()
sec = ss.section()
def onPageLoad():
global myvue
#load code from file
with sec:
ss.text("Component Side")
myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
ss.space()
ss.write("Python Side Code")
ss.md('''
```python
import simplestart as ss
tagid = 0
global myvue
tags = ["Python", "Java", "Javascript"]
data = {"count":0, "language":"C++"}
#trigger event on server from client side
def ontest(state, value):
ss.message(value)
#change data in client component on server side
def changedata(state, value=None):
global tagid
myvue.data["language"] = tags[tagid]
tagid = (tagid+1) % 3
ss.text("Python Side")
ss.button("Modify Data", onclick=changedata)
def onPageLoad():
global myvue
#load code from file
myvue = ss.loadvue(path = "components/mycomponent.vue", data = data, handlers = {"ontest":ontest})
```
''')
ss.space()
ss.write("Vue JS Code")
ss.md('''
```js
<template>
<div class="my-component">
<h1>{{title}}: {{ data.language }}</h1>
<v-btn @click="testme">handle on server</v-btn>
</div>
</template>
<script>
module.exports = {
name: 'MyComponent',
data() {
return {
title:"computer",
}
},
methods: {
testme(){
this.streamsync.forwardData(this, eventname="ontest", "12345")
}
}
}
</script>
<style>
.my-component {
width:50%;
background-color: #f0f0f0;
padding: 20px;
margin:10px 0;
}
</style>
```
''') |