Skip to main content

Pythonic Vue.js

Project description




RE:Newal!

  • changed project style more silimar to vuejs 2.x template
  • use vue file by vbuild

Install

using pip

pip install pyvuejs



Usage

start server by main.py file in project directory

python ./main.py



serve configurations

config update by Vue.use in main.py

  • parameters
    • host[str]: host url of server(default: "0.0.0.0")
    • port[int]: port number of server(default: 47372)
    • debug[bool]: flag of show bottle log(default: True)
    • open_webbrowser[bool]: flag of open browser when start(default: True)
Vue.use(
    VueConfig(
        host = "0.0.0.0",
        port = 47372,
        debug = True,
        open_webbrowser = True
    )
)



view/component editing guide

same as vue.js, can support by linting

<!-- template block -->
<template>
    <div>
        <label>{{ count }}</label>
        <div>
            <button style="margin-right:10px;" v-on:click="up_count">up</button>
            <button v-on:click="down_count">down</button>
        </div>
    </div>
</template>
<!-- style block -->
<style scoped>
button {
    width: 80px;
}
</style>
<!-- script block -->
<script lang="python">
class Component:
    def __init__(self):
        self.count = 0

    def up_count(self):
        self.count += 1

    def down_count(self):
        if self.count > 0:
            self.count -= 1
</script>



use view/component

just call name in other view

<template>
    <div id="app">
        <div id="nav">
            <router-link to="/Home">Home</router-link> |
            <router-link to="/About">About</router-link> |
            <router-link to="/Counter">Counter</router-link>
        </div>
        <router-view/>
    </div>
</template>



events mapping

define map class and map functions in each file of maps

  • if debug option in config, functions can be reached by "GET" and "POST". else, "POST" only
from pyvuejs import VueMap

class Counter(VueMap):
    count = 0

    @VueMap.map
    def get_count(self):
        return self.count

    @VueMap.map
    def up_count(self):
        self.count += 1

    @VueMap.map
    def down_count(self):
        if self.count > 0:
            self.count -= 1



routes

define route path and component in router.py

from pyvuejs import Vue, VueRouter

Vue.use(VueRouter([
    {
        "path": "/About",
        "component": "About"
    },
    {
        "path": "/Home",
        "component": "Home"
    },
    {
        "path": "/Counter",
        "component": "Counter"
    }
]))



Todo

  • routes



License

pyvuejs is MIT license


Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

pyvuejs-2.0.5.post3.tar.gz (77.7 kB view hashes)

Uploaded source

Built Distribution

pyvuejs-2.0.5.post3-py3-none-any.whl (79.2 kB view hashes)

Uploaded py3

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page