精华内容
下载资源
问答
  • Python 28 Vue框架

    2019-09-27 15:51:49
    一、基本使用 <div id="odiv">{{ greeting }}</div> ...script src="./static/vue.min.js"></script> <script> let vm = new Vue({ el: "#odiv", data: {...

    一、基本使用

    <div id="odiv">{{ greeting }}</div>
    
    <script src="./static/vue.min.js"></script>
    <script>
        let vm = new Vue({
            el: "#odiv",
            data: {
                greeting: "hello world",
            }
        })
    </script>

    二、常用指令

    1、v-text、v-html

    <div id="odiv" v-text="greeting"></div>
    <div id="odiv" v-html="greeting"></div>
    greeting: "<h1>hello world</h1>"

    2、v-for:循环创建标签

    <div id="odiv" v-for="num in yin">{{ num }}</div>
    <div id="odiv" v-for="student in students">{{ student.name }}</div>
    
    yin: [1, 2, 3]
    students: [{name: "yin"}, {name: "wen"}, {name: "jie"}]

    3、v-if、v-show

    v-if是先append多个标签,如果不符合条件再remove,这样来回切换的效率较低。

    v-show是给不符合条件的标签加上display=none,效率更高一些。

    <div v-if="word == 'xxx'">有</div>
    <div v-else-if="word == 'xx'">还是</div>
    <div v-else>没有</div>
    <div v-show="isShow">你好</div>

    4、v-bind:绑定属性

    <div v-bind:href="path">点击</div>
    <div v-bind:class="{active:isActive}">有</div>
    <div v-bind:class="[attr]">有</div>
    
    isActive:true,
    attr: "active"

    5、v-on:绑定事件

    <div v-on:click="change">点击</div>  // 可以简写成@click

    methods:{
    change:function(){xxx}
    }

    6、v-model:获取用户输入

        <div id="app">
            <input type="text" v-model="name"/>
    
            <input type="checkbox" value="男" v-model="genders"/>
            <input type="checkbox" value="女" v-model="genders"/>
    
            <select v-model="girlfriends">
                <option>康抻</option>
                <option>鞠莹莹</option>
                <option>嘉琪</option>
            </select>
    
            <textarea></textarea>
    
            <hr>
            {{ name }}
            {{ genders }}
            {{ girlfriends }}
        </div>
    
        <script>
            // 数据模板引擎
            // v-开头的指令是帮助我们渲染数据用的
            let vm = new Vue({
                el: "#app",
                data: {
                    name: "juyingying",
                    genders: [],
                    girlfriends: []
                },
            })
        </script>
    View Code

    7、计算属性:对数据进行加工操作

    <input v-model="a">
    <input v-model="b">
    <input v-model="c">
    <div>{{ total }}</div>
    
    data:{a:1,b:2,c:3},
    computed:{
        total: function(){
           return this.a + this.b + this.c
       }
    }

    8、侦听器:当数据发生改变时触发

      data: {
        question: '',
        answer: 'I cannot give you an answer until you ask a question!'
      },
      watch: {
        // 如果 `question` 发生改变,这个函数就会运行
        question: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer()
        }
      },

    9、指令修饰符:对用户输入的数据加工

    v-model.number="xx"  // 将输入的数据改为数值类型
    v-model.trim="xx"  // 将输入的数据两端的空白去除
    v-model.lazy="xx"  // 在失去焦点时才更新数据

    10、获取DOM元素

    <div id="app">
        <div ref="t" v-text="greeting"></div>
        <button v-on:click="changeColor">点击变红</button>
    </div>
    
    <script src="./static/vue.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                greeting: "hello world",
            },
            methods:{
                changeColor:function(){
                    this.$refs.t.style.color = "red";
                }
            }
        })
    </script>

    11、自定义指令

    Vue.directive("pos", function(el, bindding){  // 第一个参数是指令名称,第二个参数是一个函数,其中参数1是绑定的标签,参数2是传入的数据
        if (bindding.value=true){
            el.style.position = "fixed";
            el.style.right = 0;
            el.style.bottom = 0;
        }
    })

     

    三、组件

    1、全局组件和局部组件

    全局组件就是定义之后不用在Vue对象中注册,可以并且只可以在html中使用的。局部组件必须在父组件中注册,但是可以在任意的组件中使用。

    <div id="app"><Box></Box></div>
    
    <script>
        Vue.component("Box",{
            template: `<button v-on:click="times++">你点击了{{ times }}次</button>`,
            data(){
                return {
                    times: 0,
                }
            }
        });
    
        new Vue({
            el: "#app",
        })
    全局组件
    <div id="app"><Box></Box></div>
    
    <script>
        let Box = {
            template:`<button v-on:click="times++">你点击了{{ times }}次</button>`,
            data(){
                return {
                    times: 0,
                }
            }
        };
    
        new Vue({
            el: "#app",
            components:{
                Box:Box,
            }
        })
    局部组件

     2、父子组件通信

    // 子组件
    let son = {
        template: `
            <div>{{ fdata }}</div>
        `,
        props: ["fdata", ]
    }
    
    // 父组件
    let father = {
        template: `
            <son fdata=_fData_><son>
            <div></div>
        `,
        data(){
            return {
                fData: 0
            }
        },
        components:{
            son: son,
        }
    }
    父向子传值

    如果在子组件中想要监听这个值的变化可以使用侦听器

    <div id="app"><father></father></div>
    
    <script>
        let son = {
            template:`<button v-on:click="sonClick">点击变大</button>`,
            methods:{
                sonClick(){
                    this.$emit("sonClick", 1)
                }
            }
        };
    
        let father = {
            template: `
                <div>
                    <div v-bind:style="{ fontSize:size + 'px' }">字体大小</div>
                    <son v-on:sonClick="changeSize"></son>
                </div>
            `,
            data(){
                return {
                    size: 10
                }
            },
            components:{
                son: son,
            },
            methods:{
                changeSize(num){
                    console.log(num);
                    this.size += num;
                    console.log(this.size)
                }
            }
        };
    
        new Vue({
            el: "#app",
            components:{
                father: father
            }
        })
    子修改父值

    3、插槽:用于组件复用

    <body>
        <div id="app">
            <global-component>首页</global-component>
            <global-component>免费课程</global-component>
            <global-component>轻课</global-component>
            <global-component>智能题库</global-component>
            <global-component>学位课程</global-component>
        </div>
    <script>
        Vue.component("global-component", {
            template: `
                <div class="box"><slot></slot></div>
            `
        });
    
        new Vue({
            el: "#app",
        })
    </script>
    插槽

     

    四、生命周期

    1、beforeCreate:在Vue实例被创建之前,此时页面已加载完成,但是还没有Vue实例。

    2、created:在Vue实例创建之后,此时Vue实例已经创建,数据、函数等已经创建完成,但是还没有渲染页面,没有el。

    3、beforeMount:在挂载之前,此时已经找到了要渲染的标签,el中已经有了这个标签,但是还没有加载数据。

    4、mounted:在挂载之后,此时页面已被渲染完毕。

    5、beforeUpdate:在状态更新之前,data中的数据已被更新,但页面中的数据还没更新。

    6、updated:在状态更新之后,data和页面中的数据都已更新。

    7、beforeDestroy、destroyed

    8、activated、deactivated:用<keep-alive></keep-alive>标签将某个组件包裹起来,这样这个组件的切换就只是隐藏和显示,不再是直接remove,保证了切换效率,但是同时让上面的八种声明周期方法都失效,只能使用activated和deactivated。

     

    五、VueRouter

    1、基本使用

    <div id="app">
        <!-- router-link会被渲染成a标签,to会被渲染成href -->
        <router-link to="/">首页</router-link>
        <router-link to="/login">登陆</router-link>
        <!-- 显示组件 -->
        <router-view></router-view>
    </div>
    
    <script src="./static/vue.min.js"></script>
    <script src="./static/vue-router.js"></script>
    <script>
        // 1、使用VueRouter
        Vue.use(VueRouter);
    
        // 2、定义路由组件
        let home = {
            template: `<div>这是首页</div>`
        };
    
        let login = {
            template: `<div>这是登陆页面</div>`
        };
    
        // 3、定义路由关系
        routes = [
            {path: "/", component: home},
            {path: "/login", component: login}
        ];
    
        // 4、实例化一个router对象
        let router = new VueRouter({
            routes: routes
        });
    
        // 5、将router和Vue挂载
        new Vue({
            el: "#app",
            router: router
        })
    
    </script>
    基本使用

    在其他地方想点击跳转,可以:

    this.$router.push({name: "xx", params: {xx: "xx"}})

    2、路由命名

    <router-link :to="{ name:'home' }">首页</router-link>
    <router-link :to="{ name:'login' }">登陆</router-link>
    routes = [
        {path: "/", component: home, name: "home"},
        {path: "/login", component: login, name: "login"}
    ];

    3、路由传参

    用 :id表示需要传递params,构成路由的一部分

    什么都不加表示需要传递query,构成?xx=xx的数据

        let userParams = {
            template: `<div>这是用户{{ $route.params.id }}</div>`
        };
    
        let userQuery = {
            template: `<div>这是用户{{ $route.query.id }}</div>`,
        };
    
        routes = [
            {path: "/user/:id", component: userParams, name: "userParams"},
            {path: "/user/", component: userQuery, name: "userQuery"}
        ];
    JS
    <div id="app">
        <router-link :to="{ name:'userParams', params: {id: '1'} }">用户</router-link>
        <router-link :to="{ name:'userQuery', query:{id:1} }">用户</router-link>
        <!-- 显示组件 -->
        <router-view></router-view>
    </div>
    html

    4、路由重定向

    routes: [
        { path:"/a", redirect:"/b" },
        { path:"/a", redirect:{name: 'b'} }
    ]

    5、路由嵌套

    6、路由钩子函数

    const router = new VueRouter({ ... })
    router.beforeEach((to, from, next) => {
      // ...
    })

    7、路由去掉井号

    let router = new VueRouter({
         mode: 'history',
    )}

     

    六、Node、spm、webpack

    1、Node.js

    Node.js就是JavaScript的运行环境,可以让js语言在没有浏览器的情况下直接在终端运行,变成像python一样的脚本语言。

    2、npm

    npm是JS的第三方库管理工具,安装Node.js后就默认安装了npm。

    npm安装包分为全局安装和局部安装,全局安装:npm install -g vue,局部安装:npm install vue --save

    # 初始化项目目录
    npm init -y
    
    # 下载包
    npm install -g xxxx
    npm install xxx --save
    
    # 卸载
    npm uninstall xxx
    
    # 更新
    npm update xxx

    3、webpack

     

    七、vue-cli

    vue-cli是帮我们快速搭建项目的脚手架工具

    # 1、全局安装vue-cli
    npm install -g @vue/cli  # 3版本安装方式
    
    # 2、在文件夹中创建项目
    npm init -y
    vue init webpack vue-demo
    
    # 3、切换到项目目录中,启动项目
    cd vue-demo
    npm run dev

    项目结构和使用:

     

    八、Vuex

    用来进行状态管理,提供一个公共的部分存放数据,各个组件都能访问。

    import Vue from "vue"
    import Vuex from "vuex"
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
       // 用来共享数据,this.$store.state.name
       state:{
           name: "yin"
       },
       // 对数据加工,this.$store.getters.new_name
       getters:{
           new_name: function(state){
              return state.name + "1"
           }
       },
      // 对数据修改, this.$store.commit("change_name", "xxx")
       mutations:{
           "change_name": function(state, data){
               state.name = data
           }
       },
    })
    store.js
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    });
    main.js

     

    九、axios

    // 以后可以在组件中通过$axios来使用
    import axios from 'axios'
    Vue.prototype.$axios = axios
      mounted(){
    let that = this
    this.$axios.request({ url: "xxx", method: "get" }).then(function(data){ // 成功的回调 }).catch(function(data){ // 失败的回调 }) }

     

    十、打包发布

    1、修改打包后寻找静态文件的路径

    因为打包后产生的dist文件夹里面有一个index.html,一个static文件包,如果要找静态资源需要相对路径。

     

     注意:这里是在build{ }下修改而不是开头的那个

    2、执行打包命令

    npm run build

    3、将生成的dist部署到nginx

     

    转载于:https://www.cnblogs.com/yinwenjie/p/11282141.html

    展开全文
  • 本文是简单介绍vue.js以及js的数据绑定原理

    本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记,欢迎学习交流。同时感谢陆老师的精彩传授!

    一、课程目标

    • vue.js简介
    • 数据绑定原理

    二、详情解读、

    2.1.vue.js简介

    vue.js是由一位名叫尤雨溪的中国程序员开发的js框架
    通过该框架可以在前端实现数据与视图分离,从而提高前端开发效率
    在设计模式上属于MVVM模式(Model-View-ViewModel)

    在这里插入图片描述

    1.vue.js官网:https://cn.vuejs.org/
    2.vue.js是渐进式框架,可以应用于简单的项目,也可以应用于复杂的项目
    3.文档齐全,而且有官方的中文教学视频:https://learning.dcloud.io/#/(vuejs教程可以先学到第11节,后面组件部分有时间再深入)

    2.2.vue.js数据绑定原理

    在javascript中,对象具有两个内部属性:
    1.数据属性 - 数据的可读性
    2.访问属性 - setter 与 getter事件
    通过这两个属性就可以实现数据的双向绑定

    2.2.1.js对象数据性

    js的对象的每个属性内部有两个属性:
    数据属性与访问器属性

    1.数据属性:

    属性说明
    Configurable表示能否删除修改该属性,默认为true
    Enumerable是否允许遍历
    Writable允许写入
    Value

    通过Object.defineProperty(对象,属性名,{内部属性,值})可以重新修改数据属性
    修改[[Configurable]]为false,禁止删除该属性

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">			
    			myObj = {
    				"name": "luxp",
    				"age" : 28
    			}
    			
    			// configurable 默认为true,因此可以删除该属性			
    			delete myObj.name
    			console.log(myObj)			
    			 
    			/* 
    			 通过Object.defineProperty(对象,属性名,{内部属性,值})可以重新修改数据属性
    			 修改[[Configurable]]为false,禁止删除该属性			 
    			 */			
    			Object.defineProperty(myObj, "name",{
    				'configurable':false
    			})
    			
    			// 由于configurable 被修改为false,所以无法delete
    			delete myObj.name
    			console.log(myObj)
    			
    			/* 
    			禁止遍历
    			默认情况下enumerable为true,遍历时,可以遍历到该属性
    			 */			
    			for (i in myObj){
    			 	console.log(i)
    			 }
    			
    			// 修改 enumerable 为false,遍历时则不会遍历出name			
    			Object.defineProperty(myObj, "name", {
    				"enumerable" :false
    			})			
    			
    			for (i in myObj){
    				console.log(i)
    			}			 
    			
    			/* 
    			 禁止修改
    			 默认情况下 writeable为true,因此我们可以修改属性值
    			 */			
    			myObj.name = "luxp4588"
    			console.log(myObj.name)
    			 
    			// 将writeable修改为 false后, 就无法修改属性值了
    			
    			Object.defineProperty(myObj, "name",{
    				"writable": false
    			})
    			
    			
    			myObj.name = "luxp"
    			console.log(myObj.name)
    			 
    			/* 
    			 利用Object.defineProperty()创建一个新的属性,禁止写入,删除,遍历
    			 */
    			
    			Object.defineProperty(myObj, "sex",{
    				"configureable":false,
    				"enumerable": false,
    				"writable": false,
    				"value": "man"
    			})
    			 
    			console.log(myObj)
    			console.log(delete myObj.sex) // false,无法删除sex属性,因为configureable为false
    			console.log(myObj)
    			myObj.sex = "woman"
    			console.log( myObj.sex) // 'man', 因为writable为false,无法修改
    			
    			for (i in myObj){
    				console.log(i) // 无法遍历
    			}
    			 
    		</script>
    	</body>
    </html>
    
    2.2.2.js对象可访问性

    访问器属性包含一对函数:setter函数与getter函数
    在读取访问器属性时,会调用getter函数
    在修改访问器属性时,会调用setter函数
    [[Get]] 读取属性时调用的函数
    [[Set]] 设置属性时调用的函数
    访问器属性需要用Object.defineProperty()设置

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>		
    		<script type="text/javascript">			
    			myObj = {
    				"name": "luxp",
    				"age" : 28,
    				"oldName":""				
    			}
    			
    			//设置setter,getter函数			
    			Object.defineProperty(myObj, "name",{
    				get:function(){
    					console.log("get....")
    				},
    				set:function(newVal){
    					console.log("set success:", newVal)
    				}
    			})
    			
    			// 触发get事件
    			a = myObj.name
    			
    			// 触发set事件
    			myObj.name = "luxp4588"			
    		</script>
    	</body>
    </html>
    

    运行结果:
    在这里插入图片描述

    2.2.3.数据绑定

    当访问对象属性值时触发get事件时,get函数调用getElement(el)函数获得对应id=el节点的html节点的innerHTML返回
    当修改对象属性值时触发set事件,set函数调用setElement(el)函数设置html
    节点的innerHTML

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<input type="text" name="" id="myname" value="" />		
    		<!-- 当访问对象属性值时触发get事件时,get函数调用getElement(el)函数获得
    		对应id=el节点的html节点的innerHTML返回
    		     当修改对象属性值时触发set事件,set函数调用setElement(el)函数设置html
    			节点的innerHTML
    		 -->
    		<div id="show">
    			<p>您的名字<span id="name"></span></p>
    			<p><span id="age"></span></p>
    			<p><span id="sex"></span></p>
    		</div>
    		
    		
    		<script type="text/javascript">
    		
    			myObj = {
    				"name": "luxp4588",
    				"age" : 28,
                    
    			}
    			/* 
    			根据id,从元素中获取数据或者修改数据 
    			 */
    			function setElement(el, val){
    				document.getElementById(el).innerHTML = val
    			}
    			
    			function getElement(el){
    				return document.getElementById(el).innerHTML
    			}
    			
    			//设置setter,getter函数
    			Object.defineProperty(myObj, "name",{
    				get:function(){
    					console.log("get....")
    					return getElement("name")
    				},
    				set:function(newVal){
    					setElement("name", newVal)
    					console.log("set success:", newVal)
    				}
    			})			
    			
    			Object.defineProperty(myObj, "age",{
    				get:function(){
    					console.log("get....")
    				},
    				set:function(newVal){
    					console.log("set success:", newVal)
    				}
    			})			
    
    			a = myObj.name
    			
    			myObj.name = "luxp4588"
    			myObj.name = "luxp"
    			
    			document.getElementById("myname").onchange = function(){
    				myObj.name = this.value
    			}
    		</script>
    	</body>
    </html>
    
    

    三、课程小结

    • 学习了vue.js的简介
    • 学习了js的数据绑定原理
    展开全文
  • python前后端分离-Vue框架

    千次阅读 2019-03-05 23:28:46
    1vue的基础 (1)引包 &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt; (2)创建实例化对象 new Vue({ el:'#app',//目的地 data:{ msg:"...

    1vue的基础

    (1)引包

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    

    (2)创建实例化对象

    new Vue({
    el:'#app',//目的地
    data:{
        msg:"hello Vue"
    }
    });
    /*
    {{}}: 模板语法插值
        {{变量}}
        {{1+1}}
        {{'hello'}}
        {{函数的调用}}
        {{1==1?'真的':'假的'}}
    */
    

    2指令系统

    //常用
    v-text 
    v-html 
    v-if
    v-show
    v-for
    v-bind
    v-on
    

    2.1v-if和v-show

    v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
    
    //保存数组或者对象 格式
    v-for = '(item,index) in menuList'
    v-for = '(value,key) in object'
    //item指的是数组中每项元素
    
    <a href="" class='box'></a>
    <img src="" alt="">
    使用v-bind:class = '{}||[]||变量名||常量' 对我们的页面中标签的属性进行绑定 所有的属性都可以进行绑定,注意只要使用了v-bind 后面的字符串一定是数据属性中的值
    

    2.2v-on, v-bind, v-for

    // 1.事件源 2.事件  3.事件驱动程序
    vue中使用v-on:click对当前DOM绑定click事件 注意:所有的原生js的事件使用v-on都可以绑定
    
    v-if和v-on 来对页面中DOM进行操作
    
    v-bind:class和v-on对页面中DOM的样式切换
    
    v-bind和v-on
    
    在vue中它可以简写: v-bind:         
    :class 等价于 v-bind:class   
    :src 等价于v-bind:src
    :id 等价于v-bind:id
    v-on:click   等价于 @click = '方法名'
    
    v-text  v-html  {{}}: 对页面的dom进行赋值运算   相当与js中innerText innerHTML
    
    v-if = 'true':
    //创建
    var oP =   document.createElement('p')  ;
    oDiv.appendChild(op)
    
    v-if = 'false'
    //销毁
    oDiv.removeChild(op)
    v-show = 'true'
    oDiv.style.display = 'block'
    v-show:'true'
    oDid.style.display = 'none'
    
    v-bind:class
    oDiv.className += ' active'
    
    /*
    渐进式的JavaScript框架
    做加法和做减法:大部分的人觉得做加法简单,做减法难
    vue这个框架 将 做减法的事情都给咱们做了(难的部分)
    学习简单的部分就能实现复杂的dom操作
    */
    

    3组件的使用

    var App = {
     tempalte:`
       <div class='app'></div>`
    };
    
    
    new Vue({
     el:"#app",
    
     template:<App />
    
     components:{
        App
     }
    
    })
    
    展开全文
  • Python_Vue基本使用

    千次阅读 2020-06-07 21:01:06
    Vue基本使用 第一个 Vue 应用 文档 导包 官方提供了两个包 开发环境版本 生产环境版本 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>...

    Vue基本使用

    第一个 Vue 应用

    文档

    • 导包

    官方提供了两个包

    • 开发环境版本

    • 生产环境版本

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 开发环境版本 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    
    </body>
    </html>
    
    • 采用模板语法来声明式地将数据渲染进 DOM 的系统
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
      {
      { message }}
    </div>
    </body>
    展开全文
  • vuejs-python:显示如何将vuejs与python Web框架(其余,websocket等)一起使用的示例
  • python前后端分离-Vue框架

    千次阅读 2019-03-05 13:52:36
    1 let 和const &lt;script type="text/script"&gt; //let声明的变量是块级作用域,不能重复声明 { let gkate=12; } console.log(a) &lt;/script&gt;...上面的代码表明...
  • Python Web前后端分离框架Django+Vue搭建 对前面所学知识的归纳整理,感兴趣的可以看看,欢迎指正,原文:...
  • 1.安装python虚拟环境包并新建一个环境 cmd窗口运行pip install virtualenvwrapper-win (linux下运行 pip install virtualenvwrapper ) 设置新建的虚拟环境所在路径(默认 C:\Users\Administrator\Envs) 打开...
  • flask +python+vue 监控软件(一)

    千次阅读 2019-11-27 16:50:44
    最近又在原来的基础上,又完善了该监控软件,使用flask+vue这种架构,完成了部分功能,多的不说,直接上图 1.登录界面 2.配置菜单 3.用户管理模块 4.Oracle监控模块 ...
  • python-vuejs:使用一组脚本将Python Web框架Vue.js粘合在一起……基本上是一个包装器
  • pyweb-dev-tools是使用pyqt+vue开发的实用工具脚手架,利用业余时间把工作中遇到的一些问题总结起来,打包进小工具集中,供大家在程序开发过程中参考和使用,同时支持二次开发,只要会python+web基础,就能进行...
  • 学习全文大概需要 12分钟,内容实战性较强。1. 前言本篇将基于Python 3.7+Django 3.0结合Vue.js前端框架,为大家介绍如何基于这三者的技术栈来实现一个前端后离的W...
  • python eel + vue 教程 eel打包命令 python -m eel [your_main_script] [your_web_folder] python -m eel main.py /web eel如何结合vue开发 一、启动文件配置 import eel import sys import platform """ 原理是: ...
  • vue框架是ui框架么An amazing conference regarding the Vue framework was held in the US in the first week of March 2020 for two fantastic days. Some spectacular presentations were given during that time...
  • Vue框架实例成员及项目搭建

    千次阅读 2020-02-13 22:40:32
    文章目录Vue框架实例成员及项目搭建Vue实例成员一、el:实例二、data:数据三、methods:方法四、computed:计算五、watch:监听Vue项目环境项目安装项目创建项目移植vue项目开发:请求声明周期,组件、组件的声明...
  • 使用 flask 和 vue-cli 脚手架,开发 vue3.x 版本的 python 与 typeScript web 项目 目前 vue3.x 版本已经出来很久了,已经有不少UI库开发者和公司在使用3.x版本了。 代码地址 github地址:...
  • vue前端+Python后端环境配置及前后端访问1、项目需求2、项目初始化3、前后端连接4、vue项目打包5、pycharm 调试 ...大致查看了一下大神们分析的Python后端框架。最后选择了django 2、项目初始化 vue项目搭建...
  • 比较好用的vue框架

    2019-01-09 13:56:03
    vant(轻量级,适合微信公众号项目使用) [https://youzan.github.io/vant/#/zh-CN/intro] iview ...Ant Design Vue [https://www.antdv.com/docs/vue/introduce/] element http://element.eleme.io/ vuetify ...
  •   Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。   Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统...
  • 本视频采用了前后端分离的开发模式,前端使用Vue.js+Element UI实现了Web页面的呈现,后端使用Python 的Django框架实现了数据访问的接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端的...
  • python+Django+vue+mysql+pycharm开发环境的搭建

    万次阅读 多人点赞 2019-01-28 09:48:13
    创建前段目录前要先确认本机是否安装了vuevue cli,如何判断本机是否安装了vue呢,在Terminal窗口,输入:vue --version或vue -V,如果如下图显示版本号了,就说明安装了,否则就没有。 如果没有安装,可以...
  • 后端:python+flask+Jenkins 前端:vue+nodejs+h5 主要功能 新建用户 新建项目 新建全局参数 导入swagger 增删改测试用例 新建测试集 执行测试用例或测试集并生成报告 自动化平台的缺点此处不做探讨,...
  • python+django+vue 新建项目

    千次阅读 2019-03-11 15:55:19
    一. 原理流程 ...python的django框架的项目,代码流程是: 前端url调用-------项目同名的application下的urls.py文件-------其他各application下的urls.py文件-------views.py中的方法------(用到mod...
  • Distributed Crawler Management Framework Based on Scrapy, Scrapyd, Scrapyd-Client, Scrapyd-API, Django and Vue.js. Support Gerapy is developed over Python 3.x. Python 2.x will be supported later. Usa ...
  • flask +python+vue 监控软件(二)

    千次阅读 2019-12-17 11:20:15
    https://blog.csdn.net/shiyu1157758655/article/details/103278459 接着之前的监控,这次又添加了mysql的监控模块,直接上图 接下来写redis的监控模块
  • Django是Python体系下最成熟的web框架之一,由于Python语言的易用性和受众面广,Django框架也因其能够快速开发网站应用的特性成为了中小型网站开发框架首选。且Django具备的数据分析(Pandas)、任务队列(Celery)、...
  • python+flask+vue开发第一天

    万次阅读 2018-03-21 17:08:24
    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入: npm --registry ...安装vue n...
  • Apollo 简介 通过这个项目将自己所会的技术以及自己的架构思想尽可能的体现出来 技术栈 python flask vue-element-admin element-ui mysql ...直接使用了vue-element-admin框架,代码尽可能复用element

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,857
精华内容 6,742
关键字:

vue框架python

python 订阅
vue 订阅