vue组件

最新推荐文章于 2023-07-29 14:46:08 发布
最新推荐文章于 2023-07-29 14:46:08 发布
阅读量734 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43297727/article/details/114908505
版权

vue组件

在这里插入图片描述
在这里插入图片描述
变量使用

@ 是v-on的简写
在这里插入图片描述
v-bind用于绑定数据
v-for用于循环遍历
v-if 进行判断
组件就是对html代码片段进行封装

vue组件中的data和props属性

组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。就像是python中封装一个类，在其他类中可以继承和调用类中的属性和方法。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

组件的基本使用

全局组件是将整个页面当成一个组件

  • 全局组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app"> 
         <!-- 将组件名以标签的形式添加到div中，调用组件中的内容 -->
         <!-- 当这个组件名写错了也不会进行报错-->
        <zujian_all></zujian_all>   
    </div>

 <script>
    // 全局组件通过 Vue.component注册
    // 全局组件定义
    Vue.component(
        'zujian_all',
        {   // template指定组件显示的html内容
        	// 将要封装的代码片段放到template中
            template:'<div>全局组件</div>',
        }
    )

    new Vue({
        el: '#app',
    })
   </script>
</body>
</html>
  • Vue.component()方法中参数说明

第一个参数指定组件名

第二参数以 {} 形式传递，在里面指定组件的属性，template指定组件的要加载的内容

  • 局部组件指定
    定义了局部组件之后，需要在全局组件内注册
    注册包括两步，1是放到components中，2是以标签的形式使用局部组件变量添加到templates中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

 <script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'<div>局部组件1</div>',
     };
    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'<div>全局组件  <zujian_a></zujian_a>  </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a
            }
           }
    )

    new Vue({
        el: '#app',
    })

    </script>
</body>
</html>
  • 组件内使用变量
    在这里插入图片描述
    在这里插入图片描述
    局部组件的变量使用
    在这里插入图片描述

在这里插入图片描述

  • 组件数据调用
    各个组件只能直接调用组件内部的数据，但可以间接调用
    全局组件相当于父组件，局部组件相当于子组件
  • 父组件给子组件传值
    在这里插入图片描述
    通过bind将name传递给pro ，子组件将pro中的数据取出来
    要在子组件中定义接口来接收父组件中变量，再在模板使用中通过v-bind进行父组件到子组件传值
    在这里插入图片描述
  • 子组件给父组件传值
    未进行组件传值，父组件不能直接使用子组件的值
    在这里插入图片描述
    组件也不能直接调用vue中的方法
    在这里插入图片描述
    要在父组件中单独定义方法

在这里插入图片描述
子组件给父组件传值通过定义方法
子组件上传
在这里插入图片描述
this.$emit 第二个参数为要上传的变量名 upload名字不固定，也可以是自己上传的
在这里插入图片描述

在这里插入图片描述
在父组件中定义isShow 并绑定到子组件listen事件上

  • 多个局部组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

 <script>
    // 局部组件注册,定义局部组件
    var zujian_a={
        template:'<div>局部组件1</div>',
     };
     var zujian_b={
        template:'<div>局部组件2</div>',
     };
    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'<div>全局组件  <zujian_a></zujian_a>  <zujian_b></zujian_b>  </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a,
                zujian_b
            }
           }
    )

    new Vue({
        el: '#app',
    })
    </script>
</body>
</html>
  • 组间的关系
    • 组件中可以通过components嵌套另外的组件,比如可以在组件zujian_a中嵌套组件zujian_b
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        <zujian_all></zujian_all>
    </div>

 <script>
    // 局部组件注册,定义局部组件
    var zujian_b={
        template:'<div>局部组件2</div>',
     };

    var zujian_a={
        template:'<div>局部组件1   <zujian_b></zujian_b> </div>',
        components:{
            zujian_b
        }
     };

    // 全局组件
    Vue.component(
        'zujian_all',
        {   // 在全局中调用局部组件
            template:'<div>全局组件  <zujian_a></zujian_a>    </div>',
            // components 将局部组件注册到全局组件中
                components:{
                zujian_a
            }
           }
    )
    new Vue({
        el: '#app',
    })

    </script>
</body>
</html>

注意:

如果要进行组件嵌套，则必须先将要嵌套的组件定义出来，否则不生效，比如在组件zujian_a中嵌套zujian_b则必须先将zujian_b定义出来

单文件组件

将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如：“breadcrumb.vue”。

.vue 后缀的为vue单文件组件
包含template style script 三部分内容

// 使用template标签来定义html部分
<template>
    <div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">
        当前位置是：{{ pos }}
    </div>
</template>

// javascript要写成模块导出的形式：
<script>
    export default{
        props:['pos'],
        data:function(){
            return {
                isHot:false                
            }
        }
    }
</script>

// 样式中如果有scope关键字，表示这些样式是组件局部的，不会影响其他元素
<style scoped>
.crumb{
    width:90%;
    line-height:50px;
    margin:0px auto;
    border-bottom:1px solid #ddd;
}
.hot{
    color:red;
    font-weight:bold;
    text-indent:10px;
}
</style>

比如可以将按钮封装成一个组件，在需要的地方进行使用

在下面的网站可以进行组件拷贝
https://element.eleme.cn/#/zh-CN/component/installation

单文件组件使用配置

在这里插入图片描述
下面一路回车就可以
在这里插入图片描述
在这里插入图片描述

按照下文修改package.json的文件内容
在这里插入图片描述
进行依赖下载
在这里插入图片描述
这里面包含所有下载的依赖包文件
在这里插入图片描述
包含依赖包的信息摘要

单文件组件不能直接运行使用，需要依赖node项目对其进行解析打包，在使用之前需要先进行环境配置

  1. 安装node版本管理工具nvm
    默认已经安装过了
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// 更新配置
source .bashrc
  1. 安装最新版本的node
npm install node

查看安装的版本

node -v
  1. 更新npm的安装源
    默认为国外的网站，更新为淘宝的源
npm config set registry https://registry.npm.taobao.org
  1. 创建项目目录
mkdir project
  1. 进入项目目录，初始化项目目录
cd project
npm init

初始化完成后在当前目录中会生成一个package.json文件，该文件指定项目所以依赖的模块
  1. 配置package.json文件
{
    "name": "project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "babel-core": "^6.22.1",
        "babel-loader": "^7.1.1",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "css-loader": "^0.28.11",
        "element-ui": "^2.7.2",
        "file-loader": "^1.1.4",
        "lodash": "^4.17.4",
        "style-loader": "^0.23.1",
        "url-loader": "^1.1.2",
        "vue": "^2.6.10",
        "vue-loader": "^15.7.0",
        "vue-router": "^3.0.2",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^4.29.6",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.2.1"
    }
}

g该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

  1. 安装项目依赖模块
npm install
  1. 创建项目文件 main.js ,index.html, App.vue
touch index.html main.js App.vue. 

可以借助vscode编辑工具创建文件

index.html文件时项目的首页文件

main.js 文件定义vue及调用单文件组件，也是项目打包时所依赖的文件

App.vue文件为单文件组件文件

如果想对vue进行智能提示
在这里插入图片描述
下载这个插件

  1. 创建webpacke打包的配置文件webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: { main: "./main.js" }, //入口文件
    output: {
        filename: 'index.js', //出口文件名
        path: path.resolve(__dirname), //当前目录
        library: 'index' // 打包后模块的名称
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module: {
        rules: [ //定义不同类型的文件使用的loader
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loader: 'vue-style-loader',
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                options: {
                    minimize: true //添加
                }
            }, 
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader'
              },
        ]
    }
}

在通过webpack对项目进行打包时，需要指定相应的配置文件，同过配置文件对单文件组件中的各个内容进行解析，生成一个index.js的压缩文件，在index.html只需引该文件就可进行页面加载渲染

目录创建完成后结构如下

Snip20190404_1

单文件组件打包

项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id='app'><App></App></div>

    <!-- 引入打包后的index.js文件。该文件的名字不是固定名字，可以在webpack.config.js的出口文件中指定 -->
    <script src="./index.js"></script>
</body>
</html>

main.js

create 为对单文件组件进行渲染操作

// 引入vue和App组件
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el:'#app',
    // 渲染App组件中的内容，返回给index.html文件使用
    render:function(creater){
        return creater(App)
    }
})

App.vue

<template>
    <!-- 指定html显示内容 -->
    <div>单文件组件</div>
</template>


<script>
    // 指定js内容
// export default {

// }
</script>

<style>
/* 指定css内容 */
</style>

项目打包

文件编写完成后并不能直接运行index.html产生效果，需要对项目进行打包生成一个渲染后的index.js文件进行使用

npm run build

打包后会在当前目录下生成一个index.js 文件，在index.html中引用该文件，运行index.html文件看到效果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目调试运行

每次我们需要看到组件效果需要手动生成一个index.js文件，这是我们可以借助webpack-dev-server自动运行我们的代码

// 在项目目录下，执行下面指令可以开启前端服务，自动运行前端代码
./node_modules/.bin/webpack-dev-server

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
修改前端代码好像会自动重启
在这里插入图片描述

多个单文件组件使用

在project目录下创建components文件夹，然后将所有子组件放入components文件夹下
在这里插入图片描述

1、多组件嵌套使用

单文件组件名首字母要大写
在这里插入图片描述

Child1.vue
<template>
    <div>子组件1</div>
</template>

<script>
// export default {

// }
</script>

<style>

</style>
Child2.vue
<template>
    <div>子组件2</div>
</template>

<script>
// export default {

// }
</script>

<style>

</style>
App.vue

import 必须写在script中，这是es6的语法

<template>
    <div>
        单文件组件
        <!-- 调用子组件 -->
        <Child1></Child1>
        <Child2></Child2>
    </div>

</template>


<script>
    //导入components目录下的子文件 Child1为指定的组件名，可以任意命名，不一定按照文件名
//导入 from 后面可以写一个相对路径
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'

export default {
    // 将子组件添加到App.vue中
    components:{
        Child1,
        Child2,

    }
}
</script>

<style>

</style>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2、多组件路由使用

在这里插入图片描述
但实际开发中每个组件应该是都可以单独进行访问的

在这里插入图片描述

使用路由形式将多个单文件组件组合在一起

  1. 定义路由目录和路由文件
mkdir router
touch router.js
  1. 编写路由文件router.js
import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
import Child1 from '../components/Child1.vue'
import Child2 from '../components/Child2.vue'
// 在vue中使用插件，指定vue使用路由
Vue.use(Router)

export default new Router({
    // 定义匹配规则
   routes:[
       {
           path:'/',  // 匹配根路径／，加载Child1中的内容
           component:Child1
       },
       {
           path:'/child2',
           component:Child2
       }
   ]
})
  1. 在main.js中使用路由
import Vue from 'vue'
import App from './App.vue'
//导入定义好的路由
import router from './router/router.js'

new Vue({
    el:'#app',
    router,  //使用路由
    render:function(creater){
        return creater(App)
    }
})
在App.vue中指定路由标签

<template>
    <div>
        单文件组件
         <!-- 记载路由标签 -->
        <router-view></router-view>
    </div>

</template>

<script>
</script>

<style>
</style>
  1. 在App.vue中指定路由标签
<template>
    <div>
        单文件组件
         <!-- 记载路由标签 -->
        <router-view></router-view>
    </div>

</template>

<script>
</script>

<style>
</style>

在这里插入图片描述
在这里插入图片描述

使用Element-ui

单文件组件就像是一个个封装好的页面样板，我们可一把这些样板组合在一起形成一个完整的页面。就像QQ空间装扮一样，将个个样板放入QQ空间页面中组成自己风格的页面。而Element-ui就将我们需要的样式封装成单文件组件，我们可以直接集成到我们的项目中。

  1. 在main.js中将emelent-ui引入到项目中

进行下面三步

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
// 引入ElementUI
import ElementUI from 'element-ui'
// 引入css
import 'element-ui/lib/theme-chalk/index.css'
// 使用ElementUI
Vue.use(ElementUI)

new Vue({
    el:'#app',
    router,
    render:function(creater){
        return creater(App)
    }
})
  1. 在子组件中使用element-ui的代码,
<template>
<div>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-slider v-model="value1"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">自定义初始值</span>
    <el-slider v-model="value2"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">隐藏 Tooltip</span>
    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">格式化 Tooltip</span>
    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">禁用</span>
    <el-slider v-model="value5" disabled></el-slider>
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: 50,
        value3: 36,
        value4: 48,
        value5: 42
      }
    },
    methods: {
      formatTooltip(val) {
        return val / 100;
      }
    }
  }
</script>

Emelent的其他效果样式可以参考官方网站：

http://element-cn.eleme.io/#/zh-CN/component/progress
在这里插入图片描述
想使用什么样的组件就直接拷贝过来就行
在这里插入图片描述
通过定制好像可以快速生成前端页面

vue-cli的使用

我们的项目文件都是手动创建出来，在实际开发中我们可以借助vue-cli创建出我们的所有项目文件

  1. 全局安装vue-cli
npm install --global vue-cli
  1. 项目创建
vue init webpack 项目名
  1. 运行调试项目
// 进入项目目录下，执行下面指令
npm run dev
  1. 项目打包
npm run build

在这里插入图片描述
会在当前文件目录下生成一个dist的目录，在项目部署上传的时候只需要上传一个dist目录

在这里插入图片描述
一路回车使用项目的默认配置就好
在这里插入图片描述
在这里插入图片描述
@ 表示当前项目的src目录
在这里插入图片描述

项目目录结构

在这里插入图片描述

  • 文件夹1(src)，主开发目录，要开发的单文件组件全部在这个目录下
  • 文件夹2(static)，静态资源目录，所有的css，js文件放在这个文件夹
  • 文件夹3(components)，组件目录，vue格式的单文件组件都存在这个目录中
  • 文件夹4(router)，路由目录，在此文件夹中配置组件路由
  • 还有node_modules目录是node的包目录，config是配置目录，build是项目打包时依赖的目录。

页面结构说明
在这里插入图片描述

整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。
在这里插入图片描述
启动项目，启动完成之后会绑定一个IP

dist使用说明

在这里插入图片描述
在这里插入图片描述
打包会删去许多只有在开发时候才使用的文件
模拟将dist放到服务器上
在这里插入图片描述
在这里插入图片描述
不可以直接修改dist的内容

笔记

  1. js变量名称也可以 $ 和 _ 开头
  2. drf 八个功能用的多的是 ：认证，权限，排序，分页
  3. 限流有用户限流，和视图限流两种方式
  4. 前后端分离就不要向前端要页面了
  5. 在这里插入图片描述
大托尔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue基础知识以及操作
weixin_44786482的博客
10-07 363
Vue概述 Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。 Vue.js读音 /vjuː/, 类似于 view Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API Vue.js是一个构建数据驱动的Web界面的库 Vue.js是一套构建用户界面的 渐进...
Vue实现页面布局栏目组件化
z981832649的博客
07-19 2289
Vue实现页面布局栏目组件化，并且解决组件化后使用中UI移位的错误。
Python_Vue组件
魔法革1996
07-07 693
Vue组件 组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。就像是python中封装一个类，在其他类中可以继承和调用类中的属性和方法。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。 组件的基本使用 全局组件的使用 <!DOCTYPE html> <html lang="en"> <head> <meta char
vue中的组件
buhuo7493的博客
03-23 598
一、vue中定义组件模板的七种方式 参考文章：https://www.jianshu.com/p/7b7736303f63 1.字符串（‘’） 2.模版字符串（``） 3.内联模版（inline-template） 4.外联模板（text/x-template） 5.渲染函数（render（createElement）） 6.jsx 7.单文件组件（性能高） 二、一些特殊功能的组...
Python技术栈前后端分离项目（Vue）容器化部署解决方案
最新发布
代码大萝卜的博客
07-29 2107
本文主要介绍了多种python技术栈的web项目部署方式
Python VUE 基础知识
weixin_30552635的博客
01-26 469
一 什么是VUE 它是一个构建用户界面的JavaScript框架，自动生成(js,css,HTML文件) 二 如何使用VUE 1. 应用vues.js <script src="vue.js"></script> 2. 展示html <div id="app"> <input type="text" v-mod...
vue-remote-import:通过URL导入远程VUE组件
05-06
该模块用于通过url加载远程VUE组件。 因此，您可以在路由器，全局或本地组件参考中使用它。 这个怎么运作 它将使用import-html-entry包加载html文件，因此html文件就像组件的最小描述。 然后它将解析它，以获得html...
vue组件培训ppt
01-09
vue组件培训ppt VUE组件基础、组件交互、路由、vuex等
Vue 组件间的样式冲突污染
12-12
得益于 Vue-loader，在 Vue 中可以使用类似于 Web Component 的组件化写法, <template></template><style></style>[removed][removed] ，在大多数情况下，我们希望组件间定义的样式是相互隔离的，在 ...
Python-可复用的Vue2转换组件
08-12
✨ 可复用的Vue 2转换组件
vue组件-自定义滚动条
06-30
vue组件-自定义滚动条
二十七、python学习之前端(十):Vue入门
浅弋、璃鱼的博客
10-11 6374
一、vue简介: 1.vue简介:   Vue.js是前端三大新框架：Angular.js、React.js、Vue.js之一，Vue.js目前的使用和关注程度在三大框架中稍微胜出，并且它的热度还在递增。   Vue.js可以作为一个js库来使用，也可以用它全套的工具来构建系统界面，这些可以根据项目的需要灵活选择，所以说，Vue.js是一套构建用户界面的渐进式框架。   Vue的核心库只关注视图层...
python封装api给vue_封装vue2和vue3都能使用的插件
weixin_39635084的博客
12-08 239
前言vue3的已经正式发布了，从官方文档来看，部分api和功能有较大的改动，刚好，最近想写个vue3的插件，转念一想那我能不能同时也支持vue2呢？就引出了这个问题，我们能使插件支持vue3的同时也能支持vue2么？通用代码最简单的方式就是写vue2和vue3都能运行的代码(指vue2与vue3都支持的api)，就像人们为python2和python3那样处理。编写这样的插件要求我们避免使用在vu...
python前端框架vue_VUE前端框架
weixin_39567046的博客
12-08 974
Vue项目环境搭建1) 安装node官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/2) 换源安装cnpm>: npm install -g cnpm --registry=https://registry.npm.taobao.org3) 安装vue项目脚手架>: cnpm install -g @vue/cli注：2或3终端安装失败时，可以清空 npm...
python vue.js_Python 28 Vue框架
weixin_39677419的博客
12-20 206
一、基本使用{{ greeting }}let vm = newVue({el:"#odiv",data: {greeting:"hello world",}})二、常用指令1、v-text、v-htmlgreeting: "hello world"2、v-for：循环创建标签{{ num }}{{ student.name }}yin: [1, 2, 3]students: [{name:"yi...
pythonvue自动化_自动化运维平台（前端vue）
weixin_39876645的博客
12-20 397
前端的大体流程：首先是Login登录组件，当输入用户名和密码之后，发送post请求到后端，然后根据返回的数据的是否正常，如果正常，将返回的token以及用户名保存到sessionStorage中，并使用导航守卫进行跳转到主页面。主页面中有默认页面，目前没有做，本打算默认页面是显示所有服务的服务状态以及可以重启按钮等操作的，除了默认按钮之外就是就是应用名(*宝和*神)。然后当点击这两个应用名之后，会...
vuejs python_Python vuejspython包_程序模块 - PyPI - Python中文网
weixin_39605296的博客
12-08 267
vuejs python将vuejs的概念引入了python。您可以使用非常方便的vuejs语法将模型/数据编写为python对象和html ui/视图。一旦模型的一部分发生更改，所有依赖变量都将更新，html ui将自动刷新。我们的目标不仅是使用python语言，还要使用python平台(包括numpy、系统api和其他“原生”的东西)。安装pip install vuejspython小例子您...
vue使用python_如何使用Python和Vue创建两人游戏
cumi7754的博客
07-27 1403
vue使用pythonby Neo Ighodaro 由新Ighodaro 如何使用Python和Vue创建两人游戏 (How to create a two-player game with Python and Vue) In this tutorial, we will create a realtime tic-tac-toe game using Python and Pusher ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值