Vue
以项目为主去探索vue的知识点
前端小白在前进
一名学习前端的大学生,阿里云社区专家博主,全栈领域优质创作者,22年度博客之星前端TOP7,致力于提高前端开发能力,现在是研0
展开
-
vue3中使用markdown
vue3使用markdownvue3安装markdown在main.js中注册在自己注册的组件内使用下图为使用markdown成功后的截图vue3安装markdown# 使用 npmnpm i @kangc/v-md-editor@next -S在main.js中注册import { createApp } from 'vue';import VueMarkdownEditor from '@kangc/v-md-editor';import '@kangc/v-md-editor/lib/原创 2022-02-11 18:12:31 · 3724 阅读 · 6 评论 -
vue路由传参那些事
vue路由传参为什么要使用vue传参vue传参主要的主要方式(以下内容为vue3中使用)router-link 页面式跳转传参为什么要使用vue传参在写vue项目时大多数情况下会遇到动态路由问题,如果要求五个数据要用五个路由页面渲染出来,我们不可能去写五个路由页面,这时候我们就可以使用路由传参来实现动态路由,自动生成五个路由。vue传参主要的主要方式(以下内容为vue3中使用)router-link 页面式跳转传参使用路由导航传递参数,这里的to为动态组件,实现路由导航的可动性,这里的site是原创 2022-02-05 15:05:06 · 859 阅读 · 0 评论 -
vue3相较于vue2的一些改变
文章目录vue3新增属性setup()ref()函数reactive()函数待开发vue3的生命周期vue3新增属性setup()setup() 函数,是 vue3 中,专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。setup 函数会在 beforeCreate 之后、created 之前执行 setup是可以完全替代beforeCreate,created的setup函数有两个形参 第一个形参是props,就是接收父组件传递来原创 2022-01-24 11:04:04 · 686 阅读 · 0 评论 -
vue与django交互时处理id相关问题
vue中动态idvue中接口加入动态id在vuex中的state中写入一个属性在指定的页面中访问需要动态id的接口vue中接口加入动态id在vuex中的state中写入一个属性export default new Vuex.Store({ state : { alldata:'', }, })将后台返回的数据中的id取出来存放在vuex写的属性中this.$store.state.alldata = res.data.id在指定的页面中访问需要动态id原创 2021-12-04 16:52:58 · 1052 阅读 · 0 评论 -
vue与django交互时传数据转化为json数据
formdata数据转化formadata数据转化为jsonvue实现编辑功能时使用json形式(案例)formadata数据转化为json //formdata转换为json格式 jsonData(formData) { const jsonData = {}; formData.forEach((value, key) => jsonData[key] = value); return jsonData },vue实现编辑功能时使用原创 2021-12-04 16:42:57 · 1201 阅读 · 0 评论 -
vue中使用echarts进行数据展示
vue-echartsvue中使用echartsecharts的安装在vue-cli中引入echarts全局注册echartsvue项目中详细使用echarts初始化echarts实例绘制自己想要的图表vue中使用echartsecharts的安装npm install echarts --save在vue-cli中引入echartsimport echarts from 'echarts'全局注册echartsVue.prototype.$echarts = echarts引入ech原创 2021-11-13 21:02:48 · 1314 阅读 · 0 评论 -
2021-10-29
vuex状态管理vuex中state存属性state存放多种状态属性通过应用state属性进行实例化页面刷新时vuex的信息保存倒sessionstorage中vuex中state存属性state存放多种状态属性import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state : { token : '', use : ''原创 2021-10-31 11:46:13 · 131 阅读 · 0 评论 -
vue中axios的基本使用
axios的基本使用(前后端交互)import Vue from 'vue'import App from './App.vue'import axios from 'axios'import * as url from "url";Vue.config.productionTip = falsenew Vue({ render: h => h(App),}).$mount('#app')// axios({// url:'http://123.207.32.32:.原创 2021-09-12 18:31:06 · 256 阅读 · 0 评论 -
vue脚手架代码结构及解析
vue代码结构及解析README.md — 项目说明文件package.json — 定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。package-lock.json — 会自动为npm修改node_modules树或任何操作而生成package.jsonLICENSE — 开源协议index.html — 项目默认首页模板.postcssrc.js — 是对postcss的一个配置项.gitignore — git提交忽略文件清单.eslintrc.原创 2021-08-15 09:51:40 · 128 阅读 · 0 评论 -
配置vue项目框架和vuex简单使用
配置项目基本框架assetscomponentsnetworkrequestrouterstoreviewsapp.vuemain.jsvuex基本使用<template><div> <h2>{{$store.state.counter}}</h2></div></template><script>export default {name: "HelloVuex"}</s原创 2021-08-29 13:23:37 · 129 阅读 · 0 评论 -
vue中路由的快速入门
页面部分刷新路由模块//配置路由相关信息import VueRouter from 'vue-router'import Vue from 'vue'// import Home from '../components/home'// import About from "../components/about";// import user from "@/router/user";const Home = () => import('../components/home')c.原创 2021-08-22 11:24:22 · 187 阅读 · 0 评论 -
vue.js基础指令和父子通讯总结
基础指令知识代码案例v-bind指令<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-bind指令</title> <style> .active { border: solid 1px red; } </style><.原创 2021-08-08 09:38:40 · 143 阅读 · 0 评论 -
vue小案例(小黑记事本和购物车)
小黑记事本小案例 <footer class="footer" > <span class="todo-count" v-if="list.length!=0"> <strong>{{list.length}}</strong> items left </span> <button class="clear-completed" @click="clear" v-if="li.原创 2021-09-19 18:51:11 · 244 阅读 · 0 评论 -
vue2结合脚手架三搭建项目结构
vue2.x结合vue-cli3项目结构搭建项目中关于路由的灵活使用import Vue from 'vue'import VueRouter from 'vue-router'import Home from "@/views/Home"const exam = () => import('../views/exam')const group = () => import('../views/group')const interview = () => imp..原创 2021-09-26 21:16:53 · 144 阅读 · 0 评论 -
Vue2、脚手架三、路由的使用
目录vue的基础入门vue 2.x、脚手架的安装和基本的使用vue路由模块基本路由的使用vue的基础入门vue 2.x、脚手架的安装和基本的使用1、安装node.js,安装完node.js之后,npm也会自动安装查询是否安装成功的命令:node -vnpm -v2、全局安装脚手架工具vue-cli,命令如下npm install --global vue-cli3、vue项目初始化命令如下,若没有安装webpack,则先安装webpacknpm install -g webpacvue原创 2021-10-03 14:47:39 · 193 阅读 · 0 评论