涛涛的博客

1、为什么要用 vuex ？组件通信的类型父子通信跨级通信兄弟通信路由视图级别通信2、通信解决方案props/$emit（父子通信）$refs/ref（父子通信）children/children/children/parent（父子通信）attrs/attrs/attrs/listeners（父子通信、跨级通信）provide/inject（父子通信、跨级通信）eventBus（父子通信、跨级通信、兄弟通信）vuex（父子通信、跨级通信、兄弟通信、路由视图级别通信）lo

vue-router路由懒加载当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了import Vue from 'vue'import Router from 'vue-router'import NProgress from 'nprogress'import 'nprogress/nprogress.css'// import Home from './views/

vue-router路由元信息定义路由的时候可以配置 meta 字段通过 meta 定义要验证的路由const router = new Router({ routes: [ { path: '/user', component: User, children: [ { path: '', name: 'user', component: Profile,

vue-router重定向有的时候，我们会根据某种需求对用户请求的页面进行重新定位案例现有一小说网站，提供了 男生频道 和 女生频道 的两个入口，用户首次进入页面的时候，会出现选择，并记住用户的选择，以后该用户进入网站直接根据记录的选择进入对应的频道组件// BookChoose.vue<template> <div> <router-link :to="{name: 'book-boy'}">男生</router-link&g

vue-router嵌套路由一些比较复杂的应用会有多层嵌套的路由和组件组成添加路由与子路由...import User from './views/User.vue'import Profile from './views/User/Profile'import Cart from './views/User/Cart.vue'......{ path: '/user', component: User, children: [ { path: '', na

vue-router路由守卫当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫组件内守卫路由独享守卫全局守卫组件内守卫定义在组件内的与路由有关的生命周期函数（守卫）beforeRouteEnterbeforeRouteUpdatebeforeRouteLeavebeforeRouteEnter当路由解析完成，并中指定的组件渲染之前（组件 beforeCreate 之前），不能这里通过 this 访问

vue-router动态路由有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url/item/1/item/2/item/3...我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理...{ path: '/item/:itemId', name: 'item', component: Item}...其中 :itemId 表示匹配的 ur

脚手架重新安装步骤删除 node控制面板—》程序（卸载）-----》nodejs（右键单击，卸载）重新安装 node（具体看网址）https://www.cnblogs.com/liuqiyun/p/8133904.html重启电脑执行命令（具体看图片）node -v2.npm cache clean --forcenpm installnpm install -g @vue/cli5.vue --version项目创建https://

使用动画钩子函数（半场动画）https://blog.csdn.net/weixin_30423977/article/details/95577829v-on:before-enter=“beforeEnter”入场动画之前执行beforeEnter方法v-on:enter=“enter”入场过程中执行的方法 v-on:after-enter=“afterEnter”入场后执行的方法v-on:enter-cancelled=“enterCancelled”入场动画取消的时候执行方法（进入取消

vue脚手架中运用animate.css(4.* 版本)yarn add animate.css（添加）/ yarn remove animate.css(删除）https://blog.csdn.net/yunchong_zhao/article/details/107207600Vue-cli安装 npm i animate.css@3.7.2 yarn add animate.css@3.7.2npm install animate.css导入//引入an

使用第三方css动画库https://cn.vuejs.org/v2/guide/transitions.html注意：vue 和 animate.css 版本兼容性问题导致动画不起作用Vue 官网引用的是 animate.css 3.5 版本不能引用 animate.css 最新版本 例如：(4.0)https://www.cnblogs.com/cntian/p/13292041.html自定义过渡类名：duration ：过渡持续时间（以毫秒计）导入动画类库：<lin

动画https://cn.vuejs.org/v2/guide/transitions.htmlhttps://cloud.tencent.com/developer/article/1468992https://segmentfault.com/q/1010000007738500使用的过渡类名v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之

.组件的切换效果<div id="box"> <input type="button" @click="a='aaa'" value="aaa"/> <input type="button" @click="a='bbb'" value="bbb"/> <component :is="a"></component> </div>new Vue({ el:'#box', data:{ a:"aaa"

插槽v-sort （3种）https://segmentfault.com/a/1190000012996217?utm_source=tag-newest slot以前2.6.0以后v-slot,vue3以前的slot被废弃1.普通插槽 <aaa> <h1>1111111</h1> </aaa> <template id="one"> <div> <

.native 子组件上添加事件（父组件），触发事件，没有.native无法触发无法在组件直接使用事件，需要加修饰符来实现 根元素上监听原生事件（把vue组件转化成一个普通的HTML标签，并且对普通的HTML标签是没有任何作用的）为什么组件里的data是函数？在组件中，因为可能在多处调用同一组件，为了不让多处的组件共享同一data对象，只能返回函数。data为对象的话会报错，为了理解这种机制，我们假设data为一个对象，那么这同一个对象有可能被很多实例共享，一个实例改变其它也会跟着变，这明显是

组件传参路由组件传参我们通常把路由直接映射（绑定）的组件称为 路由组件，也只有路由组件才能直接调用路由有关对象：$router、$route当我们一个组件即希望作为路由组件使用，又可能作为功能组件（某个页面中的一部分）去使用，这个时候路由组件传参的方式来做到这点*1.父组件向子组件传递参数（还可以传递函数） ====》props*父组件通过自定义属性的方式传给子组件(:parentmsg=”msg”)，子组件用props接受(props:[“parentmsg”]) <ahead

组件（创建的时候可以用驼峰，使用的时候用- myCom ）组件除了没有el 和 data 变成函数之外,其他的跟new vue一样，还多了一个template,template就相当于new vue的视图全局组件 Vue.component("myCom",{ data(){ return{ msghead:"首页" } }, methods:{ }, template:`<h1>{{this

自定义指令http://www.cnblogs.com/ilovexiaoming/p/6840383.htmlhttps://www.jianshu.com/p/c2bef47439abhttps://www.imooc.com/article/42891https://blog.csdn.net/Myinlg/article/details/810929748.1、自定义指令：使用Vue.directive(id,definition)注册全局自定义指令，使用组件的directives选项

自定义过滤器/自定义指令/自定义键盘信息/解除事件绑定1.0版 vue过滤器https://www.cnblogs.com/crazycode2/p/6736189.htmlcapitalize 首字母大写uppercase 全部大写lowercase 全部小写currency 输出金钱以及小数点pluralize 输出复数的形式debounce 延期执行函数limitBy 在 v-for 中使用，限制数量filterBy 在 v-for 中使用，选择数据orderBy 在 v-f

vue实例的简单属性和方法https://www.cnblogs.com/wspblog/p/9876723.html属性1.this.$data/vm.$data====>data vm.a=100; vm`.$`data.a=100; 直接使用数据 实例的数据对象this.$el/= =vm.$el= =>el 指定要绑定的元素vm.$options.aa/this.$options.aa 访问自定义属性获取所有ref属性的标签（获取D

computed和watch，methodshttps://segmentfault.com/a/1190000012948175https://www.cnblogs.com/fengxiongZz/p/8074731.htmlhttps://blog.csdn.net/lhban108/article/details/82465547watch、computed和methods之间的对比computed(多个值变化，影响到一个结果) 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计

生命周期函数（钩子函数）https://segmentfault.com/a/1190000008010666https://segmentfault.com/a/1190000011381906https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA（图） beforeCreate:组件实例刚被创建，无属性 created

表单 text,password,textarea----->v-model---》value radio,checkbox,select----->v-model checked/v-bind:value表单修饰符： .lazy:失去焦点（change事件同步）或者回车的时候才会同步数据 .number:变成数值 .trim:去掉前后空格，不会去掉中间空https://www.cnblogs.com/xiaobaiv/p/9153020.

生命周期函数（钩子函数）https://segmentfault.com/a/1190000008010666https://segmentfault.com/a/1190000011381906https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA（图） beforeCreate:组件实例刚被创建，无属性 created

指令（二）指令2.4.v-html 将含有标签的字符串转化成为标签为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的，通过 v-html 可以让内容作为 html 进行解析2.5.v-text 等同于{{}} {{}}闪烁一下，再出数据 ,无法用于属性，前后可以添加内容，会被覆盖<p v-text="title"></p>弊端：v-text 会填充整个 innerHTMLv-html与v-text的区别：相同点：1. 都覆盖掉所在元素的

指令（一）指令2.1. v-model 双向数据绑定 ref(https://www.cnblogs.com/goloving/p/9404099.html) <input type="text" ref="name" @keyup="show"/> console.log(this.$refs.name.value);//作用2：获取DOM元素 this.msg=this.$refs.name.value;&l

vue的特色（ https://cn.vuejs.org/v2/guide/）mvvm（前端） m:model（数据） v:view（视图）vm:viewmodel 数据和视图的桥梁m---->mv----->vm<----mv<-----v双向数据绑定angular mvc（后端） m:model（数据） v:view（视图） c:controller(控制器)v--->c--->mm—>v优点：轻量级高效率上手快