COMP4021 SPA Project
API Documentaion: https://ustcourse.docs.apiary.io
npm i # or yarn
npm run dev # Runs dev server with live-reload
npm run build # Builds project for production
npm run serve # Serve the built project# Serve the built project
"X:\path-to-php-folder\php.exe" -d extension_dir="X:\path-to-php-folder\ext" -d extension=sqlite3 -S localhost:8080 -t dist-
Create a html file in
components/folder, with following content:<style> /* CSS here */ </style> <template> <!-- HTML here --> </template> <script> // JS here exportTag('abc-xyz') </script>
-
Add the html import and its tag in
index.html:<body> <!-- After vendor imports --> <link rel="import" href="./components/abc-xyz.html"> <abc-xyz></abc-xyz> </body>
exportTag('xyz-abc', class extends MyElement {
someFunction () {
console.log($(this.shadowRoot).children('#send-email'))
}
}<template>
<button @click="sendEmail">Send</button>
</template>
<script>
exportTag('xyz-abc', class extends MyElement {
sendEmail (e) {
e.preventDefault()
api.sendMail()
console.log('sending email')
}
})
</script><template>
<input :value="message" @input="changeMessage">
<div :children="message"></div>
</template>
<script>
exportTag('abc-xyz', class extends MyElement {
// NOTE: Use a function that returns the initial value
data () {
return {
cc: 100,
message: 'qq'
}
}
changeMessage (e) {
this.data.message = e.target.value
}
})
</script><template>
<input ~value="magic" @input="changeMessage">
<div ~children="magic"></div>
</template>
<script>
exportTag('abc-xyz', class extends MyElement {
changeMessage (e) {
this.context.magic = e.target.value
}
})
</script><template>
<div x-for="abc:messages" :children="abc"></div>
</template>
<script>
exportTag('abc-xyz', class extends MyElement {
data () {
return {
messages: ['hello', 'bye', 'magic']
}
}
})
</script><template>
<button @click="toggleEdit">Edit</button>
<input x-if="isEditting" :value="content" @input="changeContent">
<div x-else :children="content"></div>
</template>
<script>
exportTag('abc-xyz', class extends MyElement {
data () {
return {
isEditting: false,
content: ''
}
}
toggleEdit () {
this.data.isEditting = !this.data.isEditting
}
changeContent (e) {
this.data.content = e.target.value
}
})
</script>cd server
sqlite3 data.db < api/init.sql