李公子的博客

指定组件显示的内容：new Vue({选项})el 选项，通过一个选择器找到容器，容器内容就是组件内容提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。项目中会有index.html 文件,里面会存在一个div<div id="ap

v-model的作用当你传递给子组件的数据既要使用也要修改，例如这里的name这种情况下我们可以使用v-model简写v-model只能使用一次<div id="app"> {{sum}} <!-- 默认传递了一个名字叫value的数据 --> <!-- 默认监听了一个input事件 @input="sum = $event" input事件触发后会让绑定的参数等于传递的参数 --> <btn v-model="s

Element 介绍Element 是饿了么前端团队开发的一个基于 Vue.js 的桌面端组件库，它提供的组件非常丰富，不仅功能强大，而且简单易用。Element 非常的流行，大多数基于 Vue.js 开发的管理系统都会使用到它。官网地址:https://element.eleme.cn/#/zh-CN安装推荐使用 npm 的方式安装，它能更好地和webpack打包工具配合使用。npm i element-ui不管是完...

对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。 hash模式： 地址中永远带着#号，不美观 。 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。 兼容性较好。 history模式： 地址干净，美观 。 兼容性和hash模式相比略差。 应用部署上线时需要后..

作用：对路由进行权限控制分类：全局守卫、独享守卫、组件内守卫全局守卫: 可以使用router.beforeEach注册一个全局前置守卫： 全局前置守卫：初始化时执行、每次路由切换前执行可以使用router.afterEach注册一个全局后置守卫： 全局后置守卫：初始化时执行、每次路由切换后执行 守卫中的参数： to: Route: 即将要进入的目标（路由对象） from: Route: 当前导航正要离开的路由 ...

使用事件总线： 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。 methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) } 提供数据：this.$bus.$emit('xxxx',数据) 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。 代码演示//..

nextTick语法：this.$nextTick(回调函数) 作用：在下一次 DOM 更新结束后执行其指定的回调。 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。代码演示下面我们通过一个小例子来演示用法<template> <div> <!-- 实现点击之后显示输入框 并获取焦点 --> <input type="text" ref="textInput" v-s

Vue封装的过度与动画 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。 图示 写法： 准备好样式： 元素进入的样式： v-enter：进入的起点 v-enter-active：进入过程中 v-enter-to：进入的终点 元素离开的样式： v-leave：离开的起点 v-leave-active：离开过程中 v-leave-to：离开的终点 使用<tra

插槽的作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。分类：默认插槽、具名插槽、作用域插槽 使用方式 默认插槽： 父组件中： <Category> <div>html结构1</div> </Category>子组件中： <template> ...

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。具体名字：1.activated 路由组件被激活时触发。2.deactivated 路由组件失活时触发。代码演示 在组件中我们添加了这两个生命周期钩子 在组件激活（显示该组件）和失活（离开该组件）时触发对应的生命周期函数<template> <div> 这是Home组件 </div></template...

缓存路由组件 作用：让不展示的路由组件保持挂载，不被销毁 <keep-alive include="News"> <router-view></router-view></keep-alive> 通过<keep-alive> ··· </keep-alive> 标签实现 标签内的组件会被缓存起来 切换之后不会被销毁 include属性可以指定需要缓存的组件 不会把所有组件都缓存 ...

浏览器历史记录作用：控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push 如何开启replace模式： <router-link replace .......>News</router-link> 编程式导航作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活 <template&gt.

作用：让路由组件更方便的收到参数 第一种写法：props值为对象 第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件 children: [ { name: 'xiangqing', path:'detail', component: Detail, // props对象中所有的key-value的组合最终都会通过props传给Detail组件

命名路由 作用：可以简化路由的跳转 如何使用：给路由命名 { path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Hello, } ] } ]} 简化跳转：

配置路由规则，使用children配置项：//引入VueRouterimport VueRouter from 'vue-router'// 引入组件import About from "../pages/About";import Home from "../pages/Home";import Message from '../pages/Message';import News from '../pages/News';//创建router实例对象，去管理一组一组的路由规则ex

介绍 1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。 2. 前端路由：key是路径，value是组件。基本使用 安装vue-router，命令：npm i vue-router 应用插件：Vue.use(VueRouter) 编写router配置项: //引入VueRouterimport VueRouter from 'vue-router'// 引入组件...

目的：让代码更好维护，让多种数据分类更加明确。 修改store.js const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } }}const personAbout = { namespac..

1.mapState方法：用于帮助我们映射state中的数据为计算属性 2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性<template> <div> <h1>当前值为: {{sum}}</h1> <h2>数值放大{{bigSum}}</h2> <List/> </div></t...

1.概念​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。2.何时使用？​ 多个组件需要共享数据时3.搭建vuex环境 创建文件：src/store/index.js //引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)ex

方法一​ 在vue.config.js中添加如下配置：devServer:{ proxy:"http://localhost:5000" } 说明：优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）方法二​ 编写vue.config.js配置具体代理规则：module.exports = { devSer

消息订阅与发布（pubsub） 一种组件间通信的方式，适用于任意组件间通信。 使用步骤： 安装pubsub：npm i pubsub-js 引入:import pubsub from 'pubsub-js' 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。 methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subsc.

组件的自定义事件 一种组件间通信的方式，适用于：子组件 ===> 父组件 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。 绑定自定义事件： 第一种方式，在父组件中：<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/> 第二种方式，在父组件中： <Demo ref="demo"/> ...... mo..

功能：用于增强Vue 通常用来为 Vue 添加全局功能2.本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。3.定义插件：```js对象.install=function(Vue,options){//1.添加全局过滤器Vue.filter(....) //2.添加全局指令Vue.direct...

mixin(混入)1.功能：可以把多个组件共用的配置提取成一个混入对象2.使用方式：第一步定义混合：```{data(){....},methods:{....}....}```第二步使用混入：​全局混入：```Vue.mixin(xxx)```​局部混入：```mixins:['xxx']```代码演示 ...

props配置项1.功能：让组件接收外部传过来的数据2.传递数据：```<Demoname="xxx"/>```3.接收数据：1.第一种方式（只接收）：```props:['name']```2.第二种方式（限制类型）：```props:{name:String}```3.第三种方式（限制类型、限制必要性、指定默认值）：```jsprops:{...

脚手架文件结构├──node_modules├──public│├──favicon.ico:页签图标│└──index.html:主页面├──src│├──assets:存放静态资源││└──logo.png││──component:存放组件││└──HelloWorld.vue││──App.vue:汇总所有组件...

Vue CLI介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject详细介绍请参考官网：https://cli.vuejs.org/zh/guide/Vue CLI安装可以使用下列任一命令安装这个新的包：npm install..

什么是单文件组件？ 单文件组件就是一个文件扩展名为.vue的single-file components (单文件组件)的文件。是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js并且还可以使用 webpack 或 Browserify 等构建工具。单文件组件的好处 在 Vue 项目中，我们使用Vue.component来定义全局组件，紧接着用new Vue({ e...

Vue 组件的嵌套组件的嵌套：子组件以标签的形式要在父组件的模板中使用template 模板内直接子元素有且仅有一个 (所以套个div)关于VueComponent：1.app组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。2.我们只需要写<app/>或<app></app>，Vue解析时会帮我们创建app组件的实例对象，...

Vue中使用组件的三大步骤：一、定义组件(创建组件)二、注册组件三、使用组件(写组件标签)一、如何定义一个组件？使用Vue.extend(options)创建，其中options和newVue(options)时传入的那个options几乎一样，但也有点区别；...

生命周期：1.又名：生命周期回调函数、生命周期函数、生命周期钩子。2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm或组件实例对象。**组件创建期间的4个钩子函数**一、第一个生命周期函数，表示实例...

一、定义语法：(1).局部指令：newVue({directives:{指令名:配置对象}})或者newVue(...

我们常用的指令：v-bind:单向绑定解析表达式,可简写为:xxxv-model:双向数据绑定v-for:遍历数组/对象/字符串v-on:绑定事件监听,可简写为@v-if:条件渲染（动态控制节点是否存...

过滤器：定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法：1.注册过滤器：Vue.filter(name,callback)或newVue{filters:{}}2.使用过滤器：{{xxx|过滤器名}}或v-bind:属性="xxx|过滤器名"备注：...

收集表单数据：若：<inputtype="text"/>，则v-model收集的是value值，用户输入的就是value值。若：<inputtype="radio"/>，则v-model收集的是value值，且要给标签配置value值。若：<inputtype="checkbox"/>1.没有配置input的valu...

v-for指令:1.用于展示列表数据2.语法：v-for="(item,index)inxxx":key="yyy"3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,...

条件渲染：1.v-if写法：(1).v-if="表达式"(2).v-else-if="表达式"(3).v-else="表达式"适用于：切换频率较低的场景。...

绑定样式：1.class样式写法:class="xxx"xxx可以是字符串、对象、数组。字符串写法适用于：类名不确定，要动态获取。对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。...

在最新的vue文档中 监视属性更名为侦听属性侦听属性watch：1.当被监视的属性变化时,回调函数自动调用,进行相关操作2.监视的属性必须存在，才能进行监视！3.监视的两种写法：(1).newVue时传入watch配置(2).通过vm.$watch...

计算属性：1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。3.get函数什么时候执行？(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势：与me...