vue.js
关注
分享
扫一扫
CongJiYong
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue上线模式取消打印
Vue CLI 提供了一个代码压缩和优化工具，vue-cli-service，我们可以配置其使用 UglifyJsPlugin 插件丢弃掉所有console语句。使用 vue-cli-service。原创 2023-04-28 14:27:44 · 429 阅读 · 0 评论 -
Vue脚手架项目太大分享问题
把vue项目下的node_modules文件夹删除之后分享，这个文件夹占用空间大分享成功后使用cmd命令打开项目所在位置使用 npm install 安装node_modules文件原创 2021-02-20 09:28:08 · 445 阅读 · 0 评论 -
vue router 嵌套、父子、多个路由跳转传值获取不到参数undefined
传过来的id是undefined解决方法在router.js里面取消重定向到路由3，在路由2里面使用编程式导航跳转 { path: '/page1', name: 'page1', component: Page1, children: [ { path: '/page2', co原创 2022-04-24 11:41:01 · 2215 阅读 · 0 评论 -
Vue2路由Router
路由Router路由注意点路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。第个组件都有自己的$route属性，里面存储着自己的路由信息。整个应用只有一个router,可以通过组件的$router属性获取到路由使用//脚手架main.js引入import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)//A.导原创 2022-04-24 09:27:44 · 3219 阅读 · 0 评论 -
Vue中动态样式绑定class方式
Vue中动态样式绑定class方式对象方法:class = "{'active':isActive}":class = "{'active':isActive==-1}"或者:class="{'active':isActive==index}"绑定并判断多个:class="{'active':isActive,'sort':isSort}"变量放在data里面:class = "classObject"data(){ return { classObject:{ act原创 2022-04-16 10:30:00 · 571 阅读 · 0 评论 -
Vue3语法
setupref,reactive原创 2022-03-30 17:32:35 · 548 阅读 · 0 评论 -
本地存储、Cookie、LocalStorage
// 1.设置cookie// 不能一起设置，只能一个一个设置document.cookie = "username=CongJiYong"document.cookie = "password=123"// 2.读取cookieconsole.log(document.cookie) //读取的是所有的cookie// 读取的是一个字符串，每个名称和值之间由 : 一个分号和一个空格 隔开// 1.cookie的名称（Name）和值（Value）// 最重要的两个属性，创建cookie时必原创 2022-03-26 08:00:00 · 334 阅读 · 0 评论 -
Vue2插槽、计算属性、监听
普通插槽<slot>不传递里面放默认内容</slot>具名插槽（插入到固定位置）作用域插槽//作用域插槽<body> <div id="root"> <child> <!-- slote-scope接收数据props为变量名 在template里面使用props变量 --> <template slot-scope='props'> <h2>{{props.i原创 2022-03-15 10:53:44 · 1558 阅读 · 0 评论 -
Vue混写Minxin、虚拟Dom/ref、动态组件、缓存keep
minxin是混合的意思，把共性的部分用minxin，都调用它，如果混入后从新定义混入的方法，二者功能全部实现。虚拟Dom<div ref="wwg"></div>var obj = this.$refs.wwg;obj.style.backgorundColor = 'red';动态组件...原创 2022-03-11 16:43:57 · 1058 阅读 · 0 评论 -
Vue组件table里面加入tr组件、ul单面加入li组件问题
<body> <!-- table/tr/和ul/li组件中的小bug 使用is别名解决 就不会在多出标签，组件在标签外面 --> <div id="app"> <table> <!-- is不加： --> <tr is="row"></tr> </table> </div> </body> <script>.原创 2022-03-11 10:56:46 · 2057 阅读 · 0 评论 -
Vue脚手架取消空格报错
把红色框里面注释或删除，空格就不会报错了原创 2022-01-19 17:33:37 · 866 阅读 · 0 评论 -
AXIOS问题JSON地址传值转换
axios开发过程中，post请求前端传递了参数，后端没有收到，没有文件的时候，使用querystring.stringify()解决import querystring from "querystring"let user ={ phone:"123", password:"456"}let str1 = querystring.stringify(user); // 'phone=123&password=456'let str2 = querystring.parse(str);原创 2022-01-07 19:53:33 · 761 阅读 · 0 评论 -
Vue父传子组件传递数据
vParent.vue<template> <div class="box"> <h3>parent</h3> <div>name:{{name}}</div> 父组件使用属性给子组件传递数据,子组件通过props进行接收 <v-child :msg="name"></v-child> for循环传值 <v-child v-for="item in arr" :key="item" :msg原创 2022-01-04 18:34:43 · 610 阅读 · 0 评论 -
Vue框架import引入数据和组件
引入使用数据1、 export default{} 导出的数据，通过import aa from "path" 2、 export{}导出的数据，通过import {telReg,username,pasword} from "path" import arr,{fn1,fn2,fn3} from "./export" 可以混用，但是必须先引入变量arr放前面，{}放后面只是执行1遍，没有引进来任何东西，可以加载css文件import "路径文件"引入使用组件App.vue3.使用原创 2022-01-04 10:47:10 · 2127 阅读 · 0 评论 -
Vue路由案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2021-12-27 21:52:12 · 409 阅读 · 0 评论 -
Vue编程式导航|跳转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2021-12-27 21:03:28 · 722 阅读 · 0 评论 -
Vue动态路由匹配函数传值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2021-12-27 20:50:23 · 177 阅读 · 0 评论 -
Vue路由嵌套
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2021-12-27 20:13:36 · 220 阅读 · 0 评论 -
Vue路由的基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.原创 2021-12-27 19:55:45 · 220 阅读 · 0 评论 -
Vue时间封装过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-12-23 20:04:09 · 709 阅读 · 0 评论 -
Vue脚手架安装
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统Vue CLI: Vue command line interface vue命令行接口特点: 1.一个运行时依赖 (@vue/cli-service)，该依赖： 2.可升级； 3.基于 webpack 构建，并带有合理的默认配置； 4.可以通过项目内的配置文件进行配置； 5.可以通过插件进行扩展。 6.一个丰富的官方插件集合，集成了前端生态中最好的工具。 7.一套完全图形化的创建和管理 Vue.js 项目的用原创 2021-12-23 19:58:27 · 448 阅读 · 0 评论 -
Vue的if和for注意事项
<!-- 注意事项:不建议将 v-for和v-if在同一个标签同时使用,因为v-for的优先级高于v-if可以在for的外面加一个template标签解决问题--> <template v-if="students.length > 0"> <tr v-for="(item,index) in students" :key="item.id"> <...原创 2021-12-21 19:32:18 · 315 阅读 · 0 评论 -
Vue解决闪屏问题
解决闪屏问题: 1.使用v-text解决 2.使用v-cloak指令解决,当vue.js文件没有加载完成时,设置v-cloak对应的元素全部隐藏[display:none],当vue.js文件加载完成时,将v-cloak对应的元素设置为显示[display:block]eg: <div id="app" class="container" v-cloak> .... {{}} </div> <style>原创 2021-12-21 19:26:42 · 2115 阅读 · 0 评论