vuejs
关注
分享
扫一扫
文章平均质量分 63
男孩12
爱工作，爱生活
展开
-
vue2 项目转化为vue3
拿到我们需要转换的项目。原创 2023-07-05 11:29:00 · 655 阅读 · 0 评论 -
vue3 手写甘特图
封装的组件(gantt-chart/index.vue)<template> <div class="ganttChartClass"> <!-- 顶部标题 --> <div class="topTitle"> <div style="position:relative" :style="{ width: leftTitleWidth + 'px' }">原创 2023-07-03 11:36:15 · 1564 阅读 · 0 评论 -
vue虚拟滚动
通过改变视图层的位置查看固定个数的元素。原创 2023-06-19 21:26:47 · 141 阅读 · 0 评论 -
预览pdf及图片
代码：原创 2023-02-18 10:26:58 · 462 阅读 · 0 评论 -
vue3使用pinia
安装pinia在vue3的main.js中引入pinia在根目录下使用创建store目录来使得pinia可以保存数据或修改数据。原创 2023-01-21 20:49:05 · 390 阅读 · 0 评论 -
vue2 视图层手动更新
大家众所周知大家都知道vue2实现双向数据绑定的原理吧。原创 2022-11-29 20:33:54 · 1105 阅读 · 0 评论 -
Vue3新特性
Vue3将成为时代的新技术。原创 2022-10-25 14:27:34 · 696 阅读 · 0 评论 -
vue3基础语法
vue3新增语法vue3创建响应式对象：reactive当对象中的数据发生了改变，则这个对象中对应的值也会随之发生改变<script setup> import {reactive} from "vue"; let app = reactive({ title : "你是我的眼"， page : 1, size : 12 })</script>vue3用onmounted代替mounted父子组件传值vue3相对于vue2父子组件传值，已经实现了双向原创 2022-05-29 15:07:25 · 496 阅读 · 0 评论 -
vue3组合api
vue3创建项目打开 git bash第一步,搭建脚手架npm install -g create-vite-app第二步：用脚手架创建项目create-vite-app projectName第三步:npm i安装运行项目的依赖第四步,安装vue-router并分配好路由给组件npm i vue-router@4vue3定义数据见如下:<template> <div> {{phone}} </div></t原创 2022-03-24 23:07:08 · 788 阅读 · 0 评论 -
组件通行方式
祖孙组件通信方法:provide和inject祖宗和后代传值1.祖宗使用provide定义数据或方法2.后代(任何层级)都可以使用inject获取数据// 祖宗组件, App.vue<script>export default { provide: { username: '张三', say() { console.log(this.username+'是狂徒'); } }}</script>// 后代组件<t原创 2022-03-23 21:43:23 · 381 阅读 · 0 评论 -
vue的双向数据绑定及组建的缓存
双向数据绑定核心他是通过Object.defineproperty()对数据进行劫持,然后通过发布-订阅者模式来是实现的.发布-订阅者模式就是向我们这些动漫爱好者，当一个动漫更新了，我们都接受到了信息，这样我们称为~~。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont原创 2022-03-23 21:33:41 · 460 阅读 · 0 评论 -
跨域方法--proxy代理请求
跨域之proxy代理请求定义: 其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象，达到预期的目的~操作://vue.config.js文件 devServer: { // 代理 proxy: { // 所有包含有'api'字符串的请求地址都会转发到target指向的地址 "/api": { target: "http://原创 2022-03-23 20:11:26 · 1823 阅读 · 0 评论 -
vue语言国际化
vue国际化(详情请见Elemnt ui官方文档)1.首先配置 i18n安装依赖 npm i i18n@6 -g2.根据文档中步骤配置好// 在mian.js文件中，配置好我们的配置文件import VueI18n from "vue-i18n/dist/vue-i18n.esm.js";Vue.use(VueI18n); // 通过插件的形式挂载const i18n = new VueI18n({ locale: "zh", // 语言标识 // this.$i18n.locale原创 2022-03-23 19:52:13 · 890 阅读 · 0 评论 -
路由监听以及复制文本、不让用户选中复制
路由监听使用computed来对路由进行监听.代码如下:computed:{ router(){ return this.$route.fullPath }}复制文本首先安装依赖: npm i vue-clipboard2然后将我们安装的依赖在mian.js中进行导入import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard);最后就是可以将我们要复制的文本进行复制了,详情代码如下: <原创 2022-03-21 19:12:41 · 546 阅读 · 0 评论 -
vue后台管理系统的路由守卫以及角色管理权限的限定
vue的路由守卫像网络拦截器一样，当我们的请求发送一次就去拦截器中进行一次拦截，当符合一定条件允许这次请求的发送a.同理我们的vue路由也是如此监听我们的vue路由的更改,当满足我们的条件的时候我们允许此次的路由跳转,不满足的话将他替换掉核心的函数是router.beforEach((to,from,next)=>{})to表示的我们将想要跳转的路由from表示的是我们当前的路由next表示的是允许进行跳转 但是当我们next("/login")表示的是跳转到login使用代码：//路原创 2022-03-11 20:14:07 · 2071 阅读 · 0 评论 -
vue高阶知识点
vue高阶rem移动端适配(1)元素单位有哪些1.px(像素)2.百分比3…vh和vw4.em和rem都是相对大小rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素vue项目配置rem1.安装插件npm i amfe-flexible --save2.在main.js导入 import 'amfe-flexible"3.px自动转rem原创 2022-03-10 23:00:31 · 712 阅读 · 0 评论 -
vue打包工具
vue打包操作步骤:1.在根目录下,创建文件.env.development和.env.production在两个文件中输入以下代码:# 开发环境 .env.developmentVUE_APP_URL = http://localhost:3003# 生产环境 .env.productionVUE_APP_URL = http://huruqing.cn:3003配置好之后,在项目的其他的地方可以使用 process.env.VUE_APP_URL若是我们使用的是 axios 请原创 2022-03-08 22:33:06 · 1614 阅读 · 0 评论 -
使用websocket来使得前端与后台进行连接
websocket（HTML5新特性）这个j技术会让我们的前端在不需要发送请求的情况下,可以接收后台传来的数据,且可以让浏览器监听不到使用方法如下我们首先随便创建一个前端页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me原创 2022-03-07 22:42:46 · 4044 阅读 · 0 评论 -
vuex的使用
Vue使用安装vuex npm i vue@3然后引入vuex//src/store/indeximport Vue from "vue"import Vuex from "vuex"Vue.use(Vuex);const store = new Vuex.Store({})export default store;挂载// ./src/main.jsimport store from './store/index'new Vue({ router, store,原创 2022-03-03 23:06:53 · 124 阅读 · 0 评论 -
vue-router组件父子组件的传值
vue-router父子组件的传值何为父组件父组件就是当我们在一个组件中去引用另外一个组件的时候,这个时候我们在这个组件是引用组件的父组件父子组件传值的方式分别为:path 和 query传参实现的方式是通过router-link 和 to 搭配使用来让我们的使得我们跳转并将我们所传的参数会在跳转后的页面上的网页地址栏中显示，获取方法就是this.$query代码如下://父组件<template> <div> <router-link to="/r原创 2022-02-28 23:30:15 · 719 阅读 · 0 评论 -
vue2项目创建
vue2项目的创建1.全局安装脚手架npm install -g @vue/cli2.然后搭建项目vue create 项目名称将得到下面图，我们可以通过上下键选择第二个.得到我们的vue2小项目。然后用vs-code运行项目，运行代码npm run servevue组件的创建使用首先我们需要将eslint禁用了禁用方式：点击“文件”=>“首选项”=>“设置”=>在输入框中输入vetur=>将使用的eslint的复选框取消掉并且在我们文件vue.c原创 2022-02-28 20:24:52 · 3527 阅读 · 0 评论 -
vue-router
vue路由及vue3创建项目1.打开git push输入以下命令： npm install -g create-vite-appcreate-vite-app projectName实现的功能如下用vscode来打开你所创建的项目然后安装依赖,直接npm i最后验证是否安装成功直接输入以下代码到控制台npm run dev代码如下：如果点击其中一个终端中的连接，是否显示出来vue的页面，显示说明成功了,如下图配置路由在我们刚刚创建的文件夹中的src中创建view（这个原创 2022-02-24 23:19:53 · 368 阅读 · 0 评论 -
vuejs中的路由vue-router
vuejs获取元素的方法1.this.$refs方法来获取在vuejs实例对象控制的区域中有ref属性的标签元素的原生方法<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" con原创 2022-01-23 21:44:22 · 547 阅读 · 0 评论 -
组件及练习
组件1.定义：组件是Vue中的一个重要概念，是一个可以重复使用的Vue是可以复用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例，所以它们与new Vue（）接收相同的选项，例如data，computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项组件和模块化的不同模块化:是从代码逻辑的角度划分的。组件化:更多的是从UI角度进行划分的.组件创建方式方式一:使用Vu原创 2022-01-22 10:57:15 · 543 阅读 · 0 评论 -
vuejs动画及vue-resource
vue-resoursevue-resourse 他就是 vuejs框架的一个ajax.Vue 要实现异步加载需要使用到 vue-resource 库。操作步骤，如下：一、引入相关的库1.引入库vue-resourse库 同时也要导入vuejs的库vue-resourse----- <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>vuejs原创 2022-01-20 21:55:59 · 503 阅读 · 0 评论 -
vuejs过滤器及生命周期
本章思维导图https://www.kdocs.cn/view/l/ch5doSGflyOr过滤器本章节，作者将用一个项目来进行讲述<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewpo原创 2022-01-19 22:06:19 · 349 阅读 · 0 评论 -
vuejs
vueVue.js、Angular.js、React.js3者并称前端三大框架定义vue是一个构造用户界面的框架(且只注意视图层)作用在企业中使用框架，能够加快开发的效率。能够帮助我们减少不必要的Dom操作,提高渲染的效率.双向数据绑定（前台页面和服务器页面可以实现同步）的概念是通过框架提供的指令来实现的.好处使用框架后，我们前端程序员只需要关心数据的业务逻辑，不再关心dom是如何渲染的了MVVM和MVCMVC是后台的分成开发模式MVVM是前端视图层的分层开发思想,分为M(页面使用的数原创 2022-01-18 22:19:34 · 321 阅读 · 0 评论