vue
文章平均质量分 78
wenmin1987
这个作者很懒,什么都没留下…
展开
-
vue2搭建教程 vue2+vant2
vue2+vant2搭建原创 2023-03-13 18:55:55 · 339 阅读 · 0 评论 -
vue3相比vue2性能上提升体现
vue3相比vue2原创 2023-03-08 16:32:07 · 2258 阅读 · 0 评论 -
vue3搭建教程(基于webpack+create-vue+ element-plus)
vue3搭建教程--vuecli直接搭建原创 2023-03-02 22:13:07 · 731 阅读 · 0 评论 -
vue3搭建教程(基于vite+create-vue+ element-plus)
vue3基于vite+create-vue搭建原创 2023-03-01 22:27:34 · 4504 阅读 · 0 评论 -
vue2 diff算法
vue diff原理原创 2023-02-27 21:45:54 · 570 阅读 · 0 评论 -
vue中登录记住密码 --使用sessionStorage
sessionStorage和localStorage比较二者区别sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。localStorage和sessionStorage操作localStorage和sessionStora原创 2020-10-09 23:45:36 · 721 阅读 · 0 评论 -
vue登录记住密码-cookie使用
功能详解:用户登录时,勾选记住密码,系统会将登录信息存入浏览器cookie中,下次登录时系统会自动将信息回写在输入框中(默认设置保存时间为3天,此处需要将密码进行加密处理,以提高安全性)1.定义页面元素,v-model绑定变量2.3.引入vue的加密组件 CryptoJS,执行这条命令,系统会自动安装npm install crypto-js安装成功后,还需在登录页面引入组件4.定义操作cookie的三个方法,后面需要用到,代码我贴出来 /*****...原创 2020-10-09 23:36:39 · 1267 阅读 · 0 评论 -
vue-router如何响应路由参数的变化(watch监听|导航守卫)
什么是路由参数的变化当使用路由参数时,例如从/user/foo导航到/user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。监测路由参数变化的方法(watch监听|导航守卫)方法一watch监听:watch: { // watch的第一种写法$route (to, from) {console.log(to)console.log(from)}},wa...转载 2020-09-26 20:13:22 · 6418 阅读 · 0 评论 -
vue-router传递参数方法(3种)
第一种:get方法传递值<router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</router-link>或<router-link :to="{name:'test',query: { userId: 123,userName:'xia' }}">跳转</router-link>接收值(页面刷新的时候不会消失)this.$route.que转载 2020-09-26 20:02:44 · 7322 阅读 · 0 评论 -
vue3--介绍
Vue3.0来了,一起来看看尤大大说了啥众所周知,前端的技术一直更新的特别快,特别是框架这块。4月21号晚,Vue作者尤雨溪在B站直播分享了 Vue.js 3.0 Beta 最新进展,想必大家都有去观摩吧?那我们今天一起来回顾下尤大大的分享:关于Performance当我们项目功能越来越多、模块规模一步步扩大,这个时候性能考量是非常重要的,那么 Vue.js 3.0 Beta 在性能上给我们带来了哪些惊喜呢? 重写了虚拟Dom实现(且保证了兼容性,脱离模版的渲染需求旺盛)原创 2020-09-15 11:26:12 · 8337 阅读 · 0 评论 -
vue高实3--vuerouter与vuex
通过vue router把页面拆解 独立开来,页面独立开来难免有 数据公用的情况,这需要 使用vuex 进行数据的全局状态管理main.js:importVuefrom"vue";importElementUIfrom"element-ui";import"element-ui/lib/theme-chalk/index.css";importAppfrom"./App.vue";importstorefrom"./store";importrou...原创 2020-07-11 17:24:32 · 230 阅读 · 0 评论 -
vue高实2--element组件与aixos
在main.js引入elementUI,在vue.config.js造假数据configureWebpack:{before:{app.get("/api/goods",function(req,res){}} },造好的数据使用axios请求axios.get("./api/goods")main.js:importVuefrom"vue";importElementUIfrom"element-ui";import"element-ui/lib...原创 2020-07-11 16:42:48 · 235 阅读 · 0 评论 -
vue高实1---非组件与组件对比
非组件写法:App.vue:<template><div><h1>hello{{title}}常规非组件化</h1><ul><liv-for="(good,index)ingoods":key="good.text">{{good.text}}|{{good.price}}...原创 2020-07-11 16:16:08 · 267 阅读 · 0 评论 -
vue基础1---input\select\is(is解决组合标签渲染错位)
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title&...原创 2020-06-30 10:29:32 · 367 阅读 · 0 评论 -
vue总结---总结几个vue-router的使用技巧
SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是:更新视图而不重新请求页面;vue-router在实现单页面前端路由。本文在github进行了收录。route和router$route 是“路由信息对象”,包括path,params,hash,query,fullPath,matched,name等路由参数。 $router 是“路由实例”对象包括了路由转载 2020-06-30 09:32:45 · 415 阅读 · 0 评论 -
vue总结---vue知识体系之高级应用篇
vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!本文主要讲述一些vue开发中的几个高级应用,希望能对大家有所帮助。Vue.use我们使用的第三方 Vue.js 插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,它会被作为install方法。install方法调用时,会将Vue作为参数传入。该方法需要在调用new Vue.转载 2020-06-29 18:37:54 · 637 阅读 · 0 评论 -
vue总结---总结vue知识体系之实用技巧
vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!本文主要讲述一些vue开发中的实用技巧。监听组件的生命周期比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,常规的写法可能如下:// Parent.vue<Child @mounted="doSomething"/>.转载 2020-06-29 15:39:07 · 512 阅读 · 0 评论 -
vue总结----vue知识体系之基础入门篇
vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!Vue 的优缺点是什么优点:低耦合。视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的 View 上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。 可重用性。你可以把一些视图逻辑放在一个..转载 2020-06-29 10:48:36 · 669 阅读 · 0 评论 -
vue3.0 Composition API 初识 综合版本(基本新特性+生命周期)
本篇是基于vue2.0平台,安装 npm install vue-function-api --save最近新出的是@vue/composition-api ,安装npm install @vue/composition-api --save学习参考文献 :https://github.com/vuejs/composition-api/blob/HEAD/README.zh-CN.mdhttps://composition-api.vuejs.org/zh/#api-%E4%BB%8...原创 2020-06-19 18:49:17 · 2091 阅读 · 0 评论 -
vue实现原理
1、建立一个vue类: 其constructor(options)包含 $el ---获取根对象 $option ---获取传递过来的options参数 $watchEvent --设置一个对象 保存修改更新事件 this.observe();//劫持事件(劫持属性-set(设置并触发watch的key更新事件) get(得值) 、 劫持方法) this.compile(this.$el...原创 2020-06-18 10:00:11 · 1372 阅读 · 1 评论 -
vue环境下基于contenteditable实现高度自适应多行文本域(div模拟<textareaa>)
1、在web应用中,常用的多行文本输入<textarea>,满足了我们绝大部分的需求,唯一不足之处就是文本高度不能随内容自适应,如果需要高度自适应需要通过js脚本实现2、div有天然的高度自适应,在加上个contenteditable属性,就可以变成一个文本内容自适应的多行文本输入框 <div contenteditable="true"></div>...原创 2018-12-25 18:18:27 · 1717 阅读 · 0 评论 -
vue-class-component 以class的模式写vue组件
原文链接:http://www.cnblogs.com/crazycode2/p/7821089.htmlvue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利:1.methods,钩子都可以直接写作class的方法2.computed属性可以直接通过g...原创 2019-09-27 16:50:46 · 8303 阅读 · 0 评论 -
vue中内置的组件(component transition transition-group keep-alive slot)
Vue中内置的组件有以下几种:1)component2)transition3)transition-group4)keep-alive5)slot 1)component组件:有两个属性---is inline-template渲染一个‘元组件’为动态组件,按照'is'特性的值来渲染成那个组件<!-- 动态组件由 vm 实例的属性值 `compo...转载 2018-09-02 20:41:20 · 1776 阅读 · 0 评论 -
router--路由配置页
---index.jsimport Vue from 'vue'import Router from 'vue-router'import App from '@/App'import HelloWorld from '@/components/HelloWorld'import login from '@/components/loginSys'import notFoundWra...原创 2018-08-08 23:08:25 · 175 阅读 · 0 评论 -
vue超快速学习(各个知识要点)
基础知识:vue的生命周期: beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、beforeDestory/destoryed vue常用指令: v-for、v-bind(缩写形式:prop)、v-on(缩写形式@click=’sss')、v-if/v-else/v-else-if、v-model、v-once、v-h...原创 2018-12-10 16:54:06 · 362 阅读 · 0 评论 -
前端的一些文档规范--git的使用vue相关文档
###一、git的使用:--阅读git-flow的工作流程:https://mp.weixin.qq.com/s/7ZYw5LqXehZN3NFJlDGVoQ--安装git-flow : https://github.com/nvie/gitflow工具 以辅助 git-flow 实践:https://nvie.com/posts/a-successful-git-bra...原创 2018-12-20 15:14:38 · 390 阅读 · 0 评论 -
vue--$nextTick()使用
html:<div id="div" v-if="showDiv">这是一段文本</div><button @click="getText">获取div内容</button>js:data: {showDiv: false},methods: {getText: function() {原创 2018-12-03 16:53:27 · 746 阅读 · 0 评论 -
vue-cli安装(2.0)/vue-3.0
vue-2.0的vue-cli安装:使用脚手架工具 vue-cli 可以快速地构建项目安装过程:1、全局安装 : npm install -g vue-cli2、初始化webpack: vue init webpack my-test(工程名称)3、根据提示走4、进入你的工程目录 : cd my-test5、下载所有配置文件的内容: npm install6、热加载...转载 2018-08-27 10:22:33 · 3486 阅读 · 0 评论 -
关于axios的引入以及简单封装(基于pomise封装)
axios的引入方式一: import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios'//---- #通过use方法加载axios插件 Vue.use(VueAxios,axios) this.$axios.get() axios的引入方式...转载 2018-08-13 20:59:04 · 11560 阅读 · 0 评论 -
vue的多页面配置
一、webpack.base.conf.js编辑module.exports={ //增加页面入口entry:{ demo:['babel-polyfill','./src/demo/main.js'], cv:['babel-polyfill','./src/cv/main.js'],evaluate:['babel-polyfill','./src/evaluate...原创 2018-08-13 19:14:20 · 707 阅读 · 0 评论 -
router--main.js
--main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'imp...原创 2018-08-08 23:10:48 · 799 阅读 · 0 评论 -
router--登录页
login.vue<!--登录页面--><template> <div class="login" > <div class="loginDiv"> <h1 class="loginH">健康传奇管理系统登录页面</h1原创 2018-08-08 23:06:53 · 1292 阅读 · 0 评论 -
vue路由
vue路由:第一种方式:<router-link to="./"></router-link> <router-link to="/home/login">登录</router-link> <router-link to="/home/reg">注册</router-link&原创 2018-08-08 23:01:40 · 150 阅读 · 0 评论 -
axiosAPI封装
1.request.jsimport axios from 'axios'import { Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// create an axios instanceconst service = axios.crea...原创 2018-08-13 07:53:14 · 1858 阅读 · 0 评论 -
vuex状态管理
分享一篇好的vuex简单、入门文档:把对话框抽离出来https://www.jianshu.com/p/68e41dcb83611、Vuex 是什么? Github vue-spa-demo 项目地址 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题。(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作为中介...转载 2018-08-12 23:09:29 · 175 阅读 · 0 评论 -
vue组件应用与element验证实例
<!--会所设置clubManagement.vue--><template> <div> <div class="smy-header" > <el-breadcrumb separator-class="el-icon-arrow-right">原创 2018-08-14 07:54:49 · 757 阅读 · 0 评论 -
vue分环境打包
https://blog.csdn.net/qq_35844177/article/details/80038829 在项目开发中,我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦。如果能根据不同环境打包就完美了。代码如下:1.config/prod.e...转载 2018-08-27 10:31:46 · 214 阅读 · 0 评论 -
解决vue-cli npm run build之后vendor.js文件过大的问题(打包优化)
https://blog.csdn.net/qq_35844177/article/details/78599064问题 vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓慢的问题。解决方案 像vue、axios、element-ui这些基本上不会改变的依赖我们可以把它...转载 2018-08-27 10:44:58 · 7594 阅读 · 0 评论 -
vuex的本地持久化
http://www.bslxx.com/a/vue/2017/1124/1454.html刷新某个视图,数据依然存在手动存取 localStorage 的方式还可以做得更简便。那就是引入 vuex-persist 插件,它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中。使用方法安装:...转载 2018-08-23 14:09:35 · 1308 阅读 · 0 评论 -
vue实际应用----props的默认数据,methods与computed
1.子组件props的写法 如果默认porps的为对象 props:{ xxobj:{ type:Object, default:()=>{ return{ } } }}如果默认props的为数组pro...原创 2018-11-27 21:27:41 · 2008 阅读 · 1 评论