目录 前端路由的概念与原理 vue-router 的基本用法 vue-router 的高级用法 后台管理案例 总结 前端路由的概念与原理 1. 什么是路由 路由（英文：router）就是对应关系。路由分为两大类 ① 后端路由 ② 前端路由 2. 回顾：后端路由 后端路由指的是： 请求方式 、 请求地
第一步 首先创建一个Vue项目 之后输入 npm install element-plus --save 第二步 修改main.js import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' createApp(App).use(ElementPlus).mount('#app') 第三步 - 测试导入成功没 <template>
报错的问题 直接上代码 自定义图标名称
目录 102.默认插槽 103.具名插槽 104.作用域插槽 105.Vuex简介 106.就和案例_纯vue版 107.Vuex工作原理图 108.搭建Vuex环境 109.求和案例_Vuex版 110.Vuex开发者工具的使用 111.getter配置项 112.mapState和mapGetters 113.mapAction与mapMutations 114.多组件共享数据 115.Vue
Teleport： 什么是Teleport?——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。 如图所示： 文件目录： Child.vue代码： <template> <div class="child"> <h3>我是Child组件</h3> <Son/> </div> </template> <script>
准备脚手架: 前言:请先自行下载安装node npm 等必须工具 1. 卸载2.0 npm uninstall vue-cli -g 2. 安装3.0 npm install -g @vue/cli 3. 配置环境变量:搜索vue.cmd路径 配置到环境变量path中 4. vue -V 检查版本 5. 安装cnpm npm install -g cnpm --registry=https://r
目录 038.收集表单数据 039.过滤器 040.v-text指令 041.v-html指令 042.v-cloak指令 043.v-once指令、 044.v-pre指令 045.自定义指令_函数式 046.自定义指令_对象式 047.自定义指令_总结 038.收集表单数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
.sync使用方法改变 一、带参数的 v-model 2.x <ChildComponent :title.sync="pageTitle" /> 3.x <ChildComponent v-model:title="pageTitle" /> 二、不带参数的 v-model 3.x <ChildComponent v-model="pageTitle" /> export
在日益复杂的前端应用中，状态管理是一个经常被提及的话题，从早期的刀耕火种时代到jQuery，再到现在流行的MVVM时代，状态管理的形式发生了翻天覆地的变化，我们再也不用维护茫茫多的事件回调、监听来更新视图，转而使用双向数据绑定，只需要维护相应的数据状态，就可以自动更新视图，极大提高开
首先发布vue2.0中的响应式原理，主要是利用了 Object.defineProperty中的set和get方法来实现响应式。 let p = {} Object.defineProperty(p, 'name', { // 有人读取name时调用 get() { return person.name
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: () => import(/* webpackChunkName: "hom
首先是引入乾坤 npm i qiankun -S 在main.js中，引入乾坤 import { registerMicroApps,runAfterFirstMounted,addGlobalUncaughtErrorHandler } from 'qiankun'; 注册 registerMicroApps( { name: 'son', entry: 'http://localhost:8001/',
基础知识 快速上手 WebAssembly 应用开发：Emscripten 使用入门 本文选取 Emscripten 及 C/C++ 语言来简要讲述 WebAssembly 相关工具链的使用，通过较为简单的例子帮助大家更快速地上手 WebAssembly 相关的应用开发。 带你快速了解React Hooks Hooks 本质上就是一类特殊的函数，它们
文章目录 Vue 简介1.1 什么是vue1.2 解读核心关键词：构建用户界面1.3 构建用户界面的传统方式1.4使用 vue 构建用户界面1.5 解读核心关键词：框架1.6 总结：什么是vue二、Vue的特性2.1 数据驱动视图2.2 双向数据绑定2.3 MVVM2.4 MVVM 的工作原理 三、Vue的版本3.1 vue3.x和vue2.
点击查看代码 <router-link to="/Home" v-slot="{ navigate }" custom> <button @click="navigate"> → </button> </router-link> 注意: 1.v-slot变量只能为navigate,并且必须带大括号{}
封装方式一 import axios from 'axios' import qs from 'qs' import { Toast } from 'vant' import Lockr from 'lockr' axios.defaults.timeout = 30000 axios.defaults.baseURL = import.meta.env.VITE_HOST axios.defaults.headers[
vue3.0父子组件的通信 Vue3.0组件通信 Vue3.0组件通信 vue3.0脚手架setup内部的组件通信 1、父到子通过props 父组件 <template> <div > <Son data="currentRole.arr"></Son> </div> </template> <script lang="ts"> import { defineC
1.代码 let Vue = createApp(App) Vue.directive('tableInfiniteScroll', { mounted(el, binding) { let tbody = el.querySelector(".el-table__body-wrapper"); el.tableInfiniteScrollFn = function () { if (this.scro
前言 组件功能：把 el-switch 的值 true/false, 动态绑定输出为 0, 1 组件代码 封装el-switch组件，当el-switch的值为false,输出值为0；当el-switch的值为true,输出值为1； <template> <el-switch v-model="switchValue" @change="changeEvent"> </el-switch> </template&
vue3.0 + echart可视化 案例1： 案例代码 <template> <div ref="test" style="width:800px;height:600px;"></div> </template> <script> import * as echart from 'echarts' import {ref,onMounted } from 'vue&
vue3.0 上手体验 vue3.0 beta 版本已经发布有一阵子了，是时候上手体验一波了～ 注意，本文所有演示都是基于 vue3.0 beta 版本，不保证后续正式版 api 不改动。等官方文档出来后，以官网为准。 环境搭建 直接使用脚手架，如果本地没有安装的可以执行脚手架安装命令： npm install -g @vue
【千字长文，熬夜更新，原创不易，多多支持，感谢大家】 前言 小伙伴们大家好。上篇文章中我们为问卷系统进行重新布局以及添加了用户登录功能，并且在用户登录时可以选择不同的角色进行登录。但是不管是什么角色（包括匿名）登录进来后显示的权限都是一样的，即只要登录不管是什么角色都
这里不考虑大屏,所以不做amfe-flexible的配置 首先是安装依赖 yarn add postcss-loader postcss-pxtorem -D yarn add autoprefixer -D 然后新建postcss.config.js文件 module.exports = { 'plugins': { 'autoprefixer': { overrideBrowserslist: [ 'And
分环境打包配置 新建.env.dev(或者.env) VITE_NODE_ENV = 'dev' VITE_HOST = 'http://local.host.com' 执行yarn dev ,控制台执行结果如下 新建.env.test VITE_NODE_ENV = 'test' VITE_HOST = 'https://xxx.xxx.cn' 新建.env.prod VITE_NODE_ENV = '
一：vuejs 3.0源码组织方式 源码组织方式的变化：3.0的源码全部采用ts重写，项目的组织方式也发生了变化，使用monorepo的方式来组织项目的结构。把独立的功能模块都提取到不同的包中。composition api。组合api，为了解决v2.0在大型项目中，遇到超大组件不好拆开和重用问题。性能提升。
