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.post1.tar.gz (77.7 kB view details)

Uploaded Source

Built Distribution

pyvuejs-2.0.5.post1-py3-none-any.whl (79.1 kB view details)

Uploaded Python 3

File details

Details for the file pyvuejs-2.0.5.post1.tar.gz.

File metadata

  • Download URL: pyvuejs-2.0.5.post1.tar.gz
  • Upload date:
  • Size: 77.7 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.3.0 pkginfo/1.7.0 requests/2.25.1 setuptools/51.0.0 requests-toolbelt/0.9.1 tqdm/4.56.0 CPython/3.7.9

File hashes

Hashes for pyvuejs-2.0.5.post1.tar.gz
Algorithm Hash digest
SHA256 41a77cf8a61a4c9f03c569f751177baef88314b295fc18932d86e172e8572401
MD5 9cb77b8e17daa6bc02efa3a47b93661c
BLAKE2b-256 8400c75c9aaf6f42d69381c3584744612a3fc8573bca9862a123f31a0503e61d

See more details on using hashes here.

File details

Details for the file pyvuejs-2.0.5.post1-py3-none-any.whl.

File metadata

  • Download URL: pyvuejs-2.0.5.post1-py3-none-any.whl
  • Upload date:
  • Size: 79.1 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.3.0 pkginfo/1.7.0 requests/2.25.1 setuptools/51.0.0 requests-toolbelt/0.9.1 tqdm/4.56.0 CPython/3.7.9

File hashes

Hashes for pyvuejs-2.0.5.post1-py3-none-any.whl
Algorithm Hash digest
SHA256 4c51737c64051bd6c29ab929797d087e5cc3abcd19d43ea8dc4433394b920c73
MD5 601e084aeed365defbac0355f4a22c06
BLAKE2b-256 79bd0f37be32a21e53dbd4b5446d9f69f8ae7707a4ba68ec5c9feff86ba1f496

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page