
VUE
执梦起航
日拱一卒,功不唐捐
展开
-
Vue2+Vue3教程
b站教程摘录原创 2022-12-01 13:08:38 · 1142 阅读 · 0 评论 -
vue改变data,视图未实时更新问题
方法一:如果操作的data是数组或对象,可以使用$set方法进行修改this.$set('userInfo',name,'小红');原创 2021-06-18 14:50:50 · 462 阅读 · 0 评论 -
axios的拦截器
axios的拦截器主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为01.请求拦截:将当前城市信息放入请求头中axios.interceptors.request.use(config => { config.headers.cityCode = window.sessionStorage.cityCode //原创 2020-07-06 13:54:03 · 369 阅读 · 0 评论 -
js实现简单的双向绑定
vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通转载 2020-07-01 10:35:47 · 509 阅读 · 0 评论 -
路由匹配404页面
为了更好的用户体验,需要在用户访问某个路由的时候,如果匹配不上就跳转到另外一个页面。也就是通常所见的404页面。方式一:在路由的匹配规则最后加入*,必须放在最后const routes = [ {path:'/',redirect:'/home'}, { path: '/home', name: 'Home', component: Home }, { path: '/about', name: 'About', componen原创 2020-07-01 10:33:23 · 1437 阅读 · 0 评论 -
vuecli3全局引入jquery
1.下载jquerycnpm i jquery2.在根目录下新建vue.config.js并如下配置vuecli3中修改webpack配置const webpack = require("webpack");module.exports = { configureWebpack: { //支持jquery plugins: [ new webpack.ProvidePlugin({ $:"原创 2020-06-29 11:05:59 · 1605 阅读 · 0 评论 -
keep-alive保存组件状态
Vue.js的keep-alive用法 一、问题提出 在我们用Vue.js做移动端开发的时候,经常会遇到这样的应用场景: 首先,让用户看到新闻列表;然后点击新闻标题,切换到新闻详情的组件,以展示新闻详情。 很多应用场景都于此类似,比如先进入商品列表,点击某一个商品条目,则切换到商品详情的组件。 这种场景往往会碰到一个问题,当我每一次从详情组件退回到列表组件的时候,列表组件会重新发出ajax请求。考虑到下面2条原因,总觉得这么不好。 1.列表组件上的数据不会在短短几分钟之内原创 2020-06-29 10:03:50 · 533 阅读 · 2 评论 -
vue-cli 4.0安装及项目搭建
安装1.卸载旧版本vue-clinpm uninstall -g vue-cli如果卸载有问题,检查C:\Users\用户\.npmrc文件,删除以下代码cache=C:\Program Files\nodejs\node_cacheprefix=C:\Program Files\nodejs\node_global2.安装新版本node版本必须在10.0.0以上才支...转载 2019-11-07 16:41:29 · 13522 阅读 · 0 评论 -
Vuex
VueX概念:Vuex是vue配套的 公共数据管理工具,它可以把组件之间一些共享的数据,保存在vuex中,方便整个程序中的任何组件直接获取或修改我们的公共数据只有组件之间要共享的数据,才有权利放到vuex中安装:1.安装vuexcnpm i vuex -S2.导入vueximportVuefrom'vue'importVuexfrom'vuex'3....原创 2019-10-06 11:13:19 · 150 阅读 · 0 评论 -
Vue缩略图预览插件
Vue缩略图预览插件1.安装vue-previewcnpm i vue-preview -S2.导入pluginimportVuePreviewfrom'vue-preview'Vue.use(VuePreview)3.使用方法https://github.com/LS1231/vue-preview...原创 2019-10-06 11:08:43 · 1052 阅读 · 0 评论 -
禁用webpack严格模式
1.安装babel-plugin-transform-remove-strict-modecnpm i babel-plugin-transform-remove-strict-mode -D2.找到.babelrc文件,如下配置{ "plugins":["transform-remove-strict-mode"]}原创 2019-10-06 11:07:57 · 336 阅读 · 0 评论 -
Promise解决回调地狱
Promise解决回调地狱constfs=require('fs')constpath=require('path')//当new一个Promise实例是,就是立即执行这个异步操作中的代码functiongetFileByPath(fpath){varpromise=newPromise(function(resolve,reject){...原创 2019-10-06 11:07:05 · 479 阅读 · 0 评论 -
VUE事件修饰符、表单修饰符
.stop:阻止向上冒泡<div id="app" @click="divclick"> <input type="button" value="戳他" @click.stop="btnclick"></div>点击button会触发上层div的click事件,用.stop阻止向上冒泡.prevent:阻止默认事件,例如&...原创 2019-09-26 17:23:21 · 188 阅读 · 1 评论 -
Vue样式
使用Class样式第一种方式:直接传递一个数组,注意:这里的class需要使用v-bind做绑定<h1 :class="['thin','red','active']">这是一个大H1</h1>第二种方式:在数组中使用三元表达式<h1 :class="['thin','red',isactive?'active':'']">这是一个大H1&l...原创 2019-09-26 17:26:38 · 242 阅读 · 0 评论 -
computed计算属性
computed计算属性的三个特点1.计算属性使用时当作普通属性使用,不能加()当方法使用2.计算属性的function内部,任何data发生改变,这个计算属性就会重新计算3.计算属性的结果会被暂时缓存,方便下次使用<inputtype="text"placeholder="姓名"v-model='fullname'>--------------------...原创 2019-09-28 13:29:57 · 871 阅读 · 0 评论 -
vue项目抽离路由模块
抽离路由模块1.在src目录下新建router.js文件2.把main.js中的所有导入路由模块剪切进router.js//导入Account.vueGoodslist.vue组件importaccountfrom'./main/Account.vue'importgoodslistfrom'./main/Goodslist.vue'//导入Account的...原创 2019-10-06 10:56:47 · 495 阅读 · 0 评论 -
使用Mint-Ui
1.安装mint-uicnpm i mint-ui -S2.全局导入组件//导入mint-uiimportMintUIfrom'mint-ui'import'mint-ui/lib/style.css'Vue.use(MintUI)3.按需导入组件:能够缩小项目体积(1)安装babel-plugin-component插件,帮助引用需要的组件cnpm i ...原创 2019-10-06 10:58:34 · 167 阅读 · 0 评论 -
使用git托管代码
使用git托管代码1.在根目录下新增.gitignore文件并配置node_modules.idea.vscode.git2.在根目录下新增README.md文件3.复制MUI的LICENSE文件到根目录下4.使用git命令打包托管git init 初始化打包项目git status 查看文件状态git add . 添加文件跟踪git commit...原创 2019-10-06 11:02:00 · 297 阅读 · 0 评论 -
普通文件读取及下载方法
普通读取文件方法constfs=require('fs')constpath=require('path')functiongetFileByPath(fpath,succCb,errCb){fs.readFile(fpath,'utf-8',(err,datastr)=>{ //异步方法,主程序直接把fs.readfile方法放入队列...原创 2019-10-06 11:04:54 · 327 阅读 · 0 评论 -
Vue指令
v-cloak: 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码,使用v-cloak 指令来解决屏幕闪动的问题。[v-cloak]{ display: none;}--------------------------------<p v-cloak> {{message}} </p>v-tex...原创 2019-09-26 17:19:41 · 112 阅读 · 0 评论