![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js
Milk595
努力做自己喜欢做的事
展开
-
【Vue】移动端图片裁剪组件--vue-imgcut
移动端图片裁剪组件–vue-imgcut安装npm install vue-imgcut --saveGitHub地址使用说明template模板中引入文件编写方法callback :回调函数 img 是base64字符串width: 截取宽单位pxheight :截取高单位px原创 2020-10-28 11:19:02 · 1199 阅读 · 0 评论 -
【Vue】props + $emit 实现父子组件传值【实战篇】
props + $emit 实现父子组件传值例子要求:通过例子要求我们可以分析出: 三个组件主组件(父组件–展示个人信息列表~)新增子组件(子组件–填写数据、新增用户)详情子组件(子组件–查看点击的当前用户的个人信息详情)既然有父子组件,那么他们其中必然需要联系,这时候 props、$emit 就派上用场了!!!在这之前:如果你还不了解props、$emit、$parent,你可以先看看下面的博客,理解后再看本篇文章:了解何为 props ?该如何使用呢 ?何为 $emit ? 如何原创 2020-10-26 15:24:49 · 688 阅读 · 1 评论 -
【Vue】component 动态组件 和 is属性
component 动态组件 和 is属性何为动态组件?动态组件:多个组件使用同一个挂载点,并动态切换必要条件:组件标签使用:<component></component>动态绑定使用 is 特性 v-bind:is=""<div id="main"> <button @click="changeCom('home')">Home</button> <button @click="changeCom转载 2020-10-26 15:23:23 · 2945 阅读 · 0 评论 -
【Vue】何为 $emit ? 如何使用 ?
$emit 的用法何为 $emit ?子组件可以使用 $emit 触发父组件的自定义事件vm.$emit(event, arg) //触发当前实例上的事件vm.$on(event, fn); //监听event事件后运行 fn示例如下子组件:<template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&转载 2020-10-26 14:48:16 · 282 阅读 · 0 评论 -
【Vue】何为 $parent ?它的使用场景是什么?
何为 $parent ?$ 是什么?首先 一般默认的来说,我们带 $ 符号的我们基本默认是 vue 实例对象身上的也就是 vue 中的 this,我们可以 console 一下 this$parent 简介官方介绍:$parent:当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己$parent 既 可 以 接 受 父 组 件 数 据 , 又 可 以 修 改 父 组 件 数 据, 是 双 向 的$parent 可以调用父组件的方法使用场景子组件发生某个事转载 2020-10-26 14:38:33 · 6909 阅读 · 1 评论 -
【Vue】vuex冷门实例方法--replaceState
vuex冷门实例方法–replaceState状态合并看这段代码:if (sessionStorage.getItem("store")) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store")))) console.log('正在从sessionStorage恢复store') console.log(this.$store.st转载 2020-10-25 14:56:33 · 4811 阅读 · 0 评论 -
【Vue】脚手架文件main.js、App.vue、index.html、index.js详解
脚手架文件main.js、App.vue、index.html、index.js详解学习Vue必定离不开vue-cli脚手架的运用,这里给大家梳理一下vue-cli的相关文件以及其调用关系话不多说,直接上图使用到vue项目的文件包括一个.html,两个.js,两个.vue文件,关系如上图所示1、index.xml为vue项目默认首页,里面默认引用了App.vue根组件2、main.js为vue项目的入口文件,加载了各种公共组件(需要引用和初始化组件实例) 比如App.vuemain.js中转载 2020-10-25 14:40:43 · 3887 阅读 · 3 评论 -
【Vue】replaceState+sessionStorage解决页面刷新后原先在Vuex中的state丢失的问题
replaceState+sessionStorage解决页面刷新后原先在Vuex中的state丢失的问题(状态丢失)文件目录利用 pagehide 事件在用户刷新页面时将vuex的store存入sessionstorage中,然后在页面加载时,从sessionstorage中获取,replaceState store created() { // 在页面加载时读取sessionStorage里的状态信息 let store = window.sessionStorage.get原创 2020-10-24 23:54:45 · 1270 阅读 · 4 评论 -
【Vue】路由按需加载(路由懒加载) component: resolve => require([‘../pages/home.vue‘], resolve)
Vue 路由按需加载(路由懒加载) component: resolve => require([’…/pages/home.vue’], resolve)vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载但是,这种情况下一个组件生成一个js文件import Vue from 'vue'import VueRouter from 'vue-router'// "@"相当于".."import Detail from转载 2020-10-20 23:23:46 · 3596 阅读 · 0 评论 -
【Vue】解决vue多次点击同一个路由 Uncaught (in promise) 报错问题
解决vue多次点击同一个路由 Uncaught (in promise) 报错问题当我们连续多次点击个人中心时,会发生下图错误Uncaught (in promise)错误:vue项目路由跳转时控制台出现NavigationDuplicated错误,message: "Navigating to current location (XXX) is not allowed"原因在 Vue-Router3.1.0+,此时如果支持 Promise,router.push或 router.repla原创 2020-10-20 21:11:27 · 3308 阅读 · 0 评论 -
【Vue】如何使用 nprogress ?
Vue 如何使用 nprogress ?nprogress是页面跳转是出现在浏览器顶部的进度条官网:http://ricostacruz.com/nprogress/github:https://github.com/rstacruz/nprogress如下图所示,绿色的进度条就是nprogress实现的效果1、安装$ npm install --save nprogress 或者$ yarn add nprogress//用法NProgress.start();NProgres转载 2020-10-20 16:44:09 · 631 阅读 · 0 评论 -
【Vue】如何使用 less ?
Vue 如何使用 less ?依赖下载1、首先使用npm下载依赖npm install --save less less-loader2、安装完成后检查是否安装成功lessc -v3、如果安装成功后,会显示安装成功后的版本引用方法1、在main.jsimport less from 'less'Vue.use(less)2、然后创建一个.vue文件我们开始玩耍了;注意:独立的vue文件需要引入less<style lang="less"></style&g转载 2020-10-20 16:09:36 · 237 阅读 · 0 评论 -
【Vue实战】组件基础
组件基础1、组件局部注册的用法<body> <div id="app"> <!--3.my-component只能在#app下使用--> <my-component></my-component> </div> <script> //1.创建一个组件构造器 var myComponent=Vue.extend({ template:'原创 2020-10-12 23:00:56 · 307 阅读 · 0 评论 -
【前端面试】39道Vue高频面试题,亲测有效!!!快来看看呀!!
Vue高频面试题1.说下你常用的Vue指令?v-bind:动态绑定数据v-on:绑定事件监听器v-for:循环指令,可以循环数组或对象v-model:实现双向绑定v-if:根据表达式的真假值,判断是否渲染元素,会销毁并重建v-show:显示隐藏元素,修改元素的display属性2.v-if和v-show的区别是什么?切换元素时,v-if会销毁并重建元素,v-show是修改display属性,来做到显示和隐藏。v-show项目用处:回到顶部组件的显示隐藏,v-if项目用处:登陆方式切换原创 2020-08-24 23:26:33 · 7998 阅读 · 1 评论 -
【Vue基础】:class的几种绑定方式
最简单的绑定:class="{'active': isActive}"判断是否绑定一个active:class="{'active': isActive == -1}"//或者:class="{'active': isActive == index}"绑定并判断多个//第一种(用逗号隔开):class="{'active': isActive, 'sort': isSort}"//第二种(放在data里面)//也可以把后面绑定的对象写在一个变量放在data里面,可以变成下面这样:c原创 2020-07-28 18:07:54 · 1831 阅读 · 0 评论 -
【Vue基础】路由守卫+白名单
路由守卫+白名单目录:核心代码演示:import router from "./index";import store from "../store/index";import { getToKen, removeToKen, removeUserName } from "@/utils/app";//白名单const whiteRouter = ['/login']; //indexOf方法,判断数组中是否存在指定的某个对象,如果不存在,则返回-1//全局路由守卫 befo原创 2020-07-28 17:23:02 · 5094 阅读 · 0 评论 -
【Vue基础】Vuex实现购物车功能
Vuex实现购物车功能话不多说,先看效果:购物车初始效果:反选:单选:自定义购买数量,价格自动更改:删除选中商品功能:核心代码演示:import { Toast } from 'vant'import { Dialog } from 'vant'var state = { //购物车,涉及到刷新数据丢失,存在本地 car: localStorage["car"] ? JSON.parse(localStorage["car"]) : [], //总价原创 2020-07-25 09:08:53 · 1011 阅读 · 2 评论 -
【Vue基础】Vuex的组成介绍
Vuex的组成介绍State数据唯一来源(数据源),vuex所有的数据都会存在state中,就像一个很大的仓库,存储所有数据,可以实例化用来存储所有的数据,如何存储呢?实际上status就是一个庞大的对象,本身是一个json对象,用来存储所有的数据Getter获取数据。本来可以通过state实例化拿到所有数据,但是getter有其存在的道理,好比是vue的computed计算属性,相似性:从现有的state来派生出一个新的state,大大方便我们获取数据,或者state派生出新的状态的时候有原创 2020-07-25 08:41:53 · 1098 阅读 · 0 评论 -
【Vue面试题】Vue的生命周期
Vue的生命周期beforeCreate(创建前) 在数据观测和初始化事件还未开始created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。mo...原创 2020-07-16 20:24:42 · 1772 阅读 · 0 评论 -
Vue实例及数据绑定语法内部命令
Vue.js概述Vue.js是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。响应的数据绑定Vue.js 拥有数据驱动的视图概念。通俗地讲,它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定,DOM 将与数据保持同步。每当修改了数据,DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了,不必与 DOM 更新搅原创 2020-07-15 22:25:45 · 381 阅读 · 0 评论