聚沙成塔·每天进步一点点本文内容⭐专栏简介1.路由重定向实例场景：路由重定向的应用场景：2.路由别名实例场景：路由别名的应用场景：⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏

声明：本文来源于黑马程序员PDF讲义双向绑定：修改表单项标签，发现vue对象data中的数据也发生了变化双向绑定的作用：可以获取表单的数据的值，然后提交给服务器事件绑定v-on:用来给html标签绑定事件的。需要注意的是如下2点：v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数v-on语法绑定事件时，事件名相比较js中的事件名，没有on同样，v-on也存在简写方式，即v-on:可以

声明：本文来源于黑马程序员PDF讲义Ajax我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。Ajax:全称AsynchronousJavaScriptAndXML，异步的JavaScript和XML。其作用有

7、计算属性与监视1.computed函数与Vue2.x中computed配置功能一致写法import{computed}from'vue'setup(){...//计算属性——简写letfullName=computed(()=>{returnperson.firstName+'-'+person.lastName})//计算属性——完整letfullName=computed({get(){r

动态路由的使用2.动态路由的原理解析路由匹配路由参数的传递组件渲染动态路由的变化3.更多动态路由的实例3.1.动态路径匹配多层级3.2.动态路径的正则匹配3.3.编程式导航与动态路由总结⭐写在最后⭐专栏简介Vue

每天进步一点点本文内容⭐专栏简介1.路由的动态片段1.1基本使用1.2多个动态片段2.查询参数2.1传递查询参数2.2在路由导航中传递查询参数3.路由元信息4.Vuex状态管理总结⭐写在最后⭐专栏简介Vue

聚沙成塔·每天进步一点点本文内容⭐专栏简介VueRouter核心原理1.使用`router.push`2.使用`router.replace`3.使用`router.go`⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到

聚沙成塔·每天进步一点点本文内容⭐专栏简介VueRouter简介主要特性：安装和基本用法：⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！

【Vue学习笔记_14】VueCLI2&3脚手架VueCLI初识VueCLI2初始化项目ESLint规范Runtime-only和Runtime+Compiler的区别目录结构解析VueCLI3VueCLI3

一、了解vue-clivue-cli又称脚手架，说白了就是一个便捷开发项目的家伙，因为vue-cli可以自动构建出一个项目的骨架，以及配置一些复杂的webpack文件配置，在这里，如果深入了解过webpack这个玩意的话，会深刻体会这个玩意是多么复杂（至少我是这么觉得的，webpack安转这个配置那个，晕...）,所以啊，感谢大佬发明vue-cli，确实省去了一些构建项目的困难二、安装vue-cl

1、基本侦听器当简单响应式属性发生变化时，可通过添加属性的侦听器，自动监测属性变化事件，如下代码，定义了3个响应式属性，分别为question、answer、loading，侦听器定义在关键字watch区域，使用语法格式question(newQuestion,oldQuestion)定义侦听器函数，当输入包含?时，将自动调用异步函数getAnswer，从api中获取问题答案，并同步更新响应式属性

生命周期示意图如下所示：beforeCreate：组件初始化之前触发该事件created：组件初始化完毕触发该事件beforeMount：Vue应用对象挂载DOM结点之前触发该事件mounted：DOM结点挂载成功之后触发该事件beforeUpdate：数据更新之前触发该事件updated：数据更新之后触发该事件beforeUnmount：DOM结点卸载之前触发该事件unmountd：结点卸载之后

Vue学习之使用开发工具创建项目、gitcode管理项目翻阅与学习了vue的开发工具，通过对比最终采用HBuilderX作为开发工具，以下章节对HBuilder安装与基础使用介绍1.HBuilder下载从

Vue学习之nodejs环境搭建中的坑1.nodejs安装后环境变量配置（1）在nodejs安装目录下已有node_cache、node_global，如下：（2）在系统属性->环境变量中新建一个名为NODE_PATH

一、列表渲染使用v-for指令渲染列表，包含以下几种渲染方式：1、直接迭代元素方式语法：v-for="iteminitems"，直接迭代数组元素，逐项渲染数据，代码如下：直接迭代元素方式{{item.message}}const{createApp}=Vue;createApp({data(){return{items:[{message:'Foo'},{message:'Bar'}]}}}).m

1.09到达这个园区1.10正式进入学习状态，定了一个小计划，13天完成vue。结果还可以，比计划的还早了一天。阶段崩溃瞬间：一：这视频讲的是啥玩意？总结一下我看视频的经历：1.在学校的时候就已经开始了vue的学习，视频总时长将近70！小时，emmm..时间不允许，我就找了一套短的看，20小时。2.20小时的视频。基础知识看完后，后面讲到webpack，emm,报错，报错，报错。蒙了。最后发现那竟

视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通文件仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。本节目录：为什么需要模块化前端模块化为什么需要模块化JavaScript原始功能js文件太多，可能造成变量冲突。加载的顺序不同，可能造成覆盖匿名函数的解决方案使用闭包，把函数括起来(function(){varna

最近在项目里需要用到地区选择器，就找到V-Distpicker是一个简单易用的地区选择器。使用非常简单，功能强大，推荐大家使用。官网:https://distpicker.pigjian.comgithub:https://github.com/jcc/v-distpickerInstallationnpminstallv-distpicker--saveOryarnaddv-distpicker

一套用于构建用户界面的渐进式JavaScript框架。Vue可以自底向上逐层的应用，简单应用：只需一个轻量小巧的核心库。Vue官网英文官网：API—Vue.js(vuejs.org)vue的md文档:在线版https://wekenw.gitee.io/vuedoc/Vue开发者工具：https://pan.baidu.com/s/1UvK1QtFjfrFKqqzYBgQPow?pwd=ziy4提

1、安装方式CDN方式安装：2、创建应用使用Vue内置对象创建一个应用，基本代码结构如下：const{createApp}=Vue;createApp({data(){return{}},methods:{},mounted(){},computed:{}}).mount('#app');id为app的div元素，代表vue应用绑定的dom元素，vue对内部数据的操作都会直接影响dom的数据更新；

vue学习记录。

其它API【shallowRef与shallowReactive】shallowRef作用：创建一个响应式数据，但只对顶层属性进行响应式处理。用法：letmyVar=shallowRef(initValue)特点：只跟踪引用值的变化，不关心值内部的变化shallowReactive作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的用法：letmy

收集表单数据账号：密码：性别：男女爱好：学习睡觉吃饭所属校区请选择校区北京上海深圳其他信息阅读并接受《用户协议》提交Vue.config.productionTip=false;newVue({el:'#root',data:{account:'',password:'',sex:'',hobby:[],city:'',other:'',agree:''},methods:{submit(){co

一、拉开序幕的setup理解：Vue3中一个新的配置项，值为一个函数。setup是所有CompositionAPI(组合API）表演的舞台。组件中所用到的：数据、方法等，均要配置在setup中。setup函数的两种返回值：若返回一个对象，则对象中的属性、方法在模板中均可以直接使用。若返回一个渲染函数，则可以自定义渲染内容注意点：尽量不要与Vue2.x配置混用Vue2.x配置（data/methos

今天在element-ui的学习中要在表格中写入一个链接{{link}}结果什么都没有（后面的链接）官方文档是有介绍通过Scopedslot可以获取到row,column,$index和store（table内部的状态管理）的数据，用法参考demo。要写成这样{{test.row.link}}效果就是前图的前面那个链接。为此详细地学了一下Vue的slotslot就是一个插槽，将原本不属于这个模板的

当有一些数据需要随着其它数据变动而变动时，很容易滥用watch，对于任何复杂逻辑，应当使用计算属性（computed），计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。Vue提供了一种通用的方式来观察和响应Vue实例上的数据变动：侦听属性（watch）。当需要在数据变化时执行异步或开销较大的操作时，使用侦听属性，比如在搜索框，输入文本后向后台请求搜索结果的场

聚沙成塔·每天进步一点点本文内容⭐专栏简介1.默认插槽的实现原理用法示例：2.具名插槽的实现原理用法示例：3.作用域插槽的实现原理用法示例：⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue

聚沙成塔·每天进步一点点本文内容⭐专栏简介1.动态组件实现原理：用法示例：2.异步组件实现原理：用法示例：3.异步组件的高级应用a.异步组件的命名：b.异步组件的加载状态管理：⭐写在最后⭐专栏简介Vue

一、路由的query传参路由的query参数传递参数{{m.title}}-->{{m.title}}接收参数$route.query.id$route.query.title二、命名路由作用:可以简化路由的跳转使用方法给路由命名：{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'

一、vuex是什么？概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。Github地址：https://github.com/vuejs/vuex二、什么时候使用vuex?多个组件依赖于同一状态来自不同组件的行为需要变更同一状态多个组件需要共享数据时三、Vuex工作原理图Ac

一、作用让父组件可以向子组件指定的位置插入html结构，，也是一种组件间通信的方式，适用于父组件===》子组件。二、分类：默认插槽具名插槽作用域插槽三、使用方法1.默认插槽父组件中：html结构1子组件中：插槽默认内容...2.具名插槽父组件中html结构1html结构2子组件中插槽默认内容...插槽默认内容...3.作用域插槽理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（

一、路由的概念路由就是一组key-value的对应关系key为路径，value可能是function或component多个路由，需要经过路由器的管理路由分类后端路由理解：value是function,用于处理客户端提交的请求工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据前端路由理解：value是component,用于展示页面内容工作过程：当浏览器的路径改变

1.Vuex是什么？怎么使用？哪种功能场景使用它？Vuex是一个专为Vue.js应用程序开发的状态管理模式。每一个Vuex应用的核心就是store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态(state)。在main.js引入store，注入。新建了一个目录store，……export。场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车state：Vu

提示：组件的provide，可以被其内所有层级的组件，通过inject引用文章目录前言一、通信组件二、效果三、参考文档总结前言需求：使用provide/inject通信一、通信组件1、AA.vue1级providimportBBfrom'./BB'exportdefault{name:'AA',components:{BB},data(){return{title:'---测试provid和inj

目录一、什么是配置代理1、vue官方文档解释2、理解3、语法二、案例练习1、创建包含学生数据的服务器server12、开启server1服务器3、开启代理服务器4、通过ajax发送网络请求获取数据5、在以上代码的基础上改进配置代理①、通过ajax发送请求时更改一下路径②、在vue.config.js中添加配置代理规则四、总结①方法一：在vue.config.js中添加以下配置②方法二：在vue.c

1、权限组件：render函数，全局注册组件。优点：使用起来很方面，但缺点就是需要自己建立一个vue文件。S1.Authorized.vue是设计的权限组件（由于权限判断，如果在每个vue文件都先引入再使用会很麻烦，所以把他注册为全局，要用的话，直接使用会方面很多）补充知识点：a.h作为createElement的别名是Vue生态系统中的一个通用惯例，实际也是JSX所要求的【consth=this

概要：主要内容：vue安装时常用命令，文件目录介绍，better-scroll库的使用，项目部分优化措施*node安装node-v检查node版本*vue-cli全局安装npminstall-gvue-cli//加-g是安装到全局安装完成后使用vue回车可以看到针对vue的命令行*使用淘宝镜像网址:http://npm.taobao.org安装：npminstallcnpm-g--registry

回顾```监听器：{data:{msg:"",obj:{a:10,b:20}},watch:{msg(newVal,oldVal){//只要data中msg变化了，此函数自动触发},'obj.a'(newVal,oldVal){//obja属性值变化触发},obj:{handler(newVal,oldVal){//只要obj任意一个属性的值变化，都会触发},deep:true}}}计算属性使用一

VUE学习笔记布局横向布局H(){display:flex;//创建布局管理器flex-direction:row;//方向row垂直flex-wrap:wrap;//显示不下是否换行}//居中.center

知识点消息订阅与发布是一种理念，实现它需要具体的第三方库，比如在angular中我们常用的rxjs,在这里讲的是使用pubsub-js这个库。一种组件间通信的方式，适用于任何组件间通信。使用步骤安装pubsub:npmipubsub-js引入：importpubsubfrom'pubsub-js'订阅：A组件想接收消息，则在A中订阅消息，订阅的回调写在A组件中。...mounted(){//订阅消

习惯了写传统js的我，看了箭头函数的第一眼，就是....这啥东西？经过大神指点后，总结出的一条道理就是：1.当在vue中使用箭头函数，可以在函数中使用this来引用全局的vue对象，若在传统函数中，有时会引不到。2.并不是所有的函数都适合改为箭头函数。当函数中使用本身的this时，我们再用箭头函数将会造成冲突，此时应在函数外面定义一个变量let$this=this。在函数内部通过$this来操作全

一、Vue尚硅谷Vue学习视频：尚硅谷学习视频尚硅谷:http://www.atguigu.com/Vue学习视频(尚硅谷)：https://www.bilibili.com/video/BV1Zy4y1K7SH

视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通文章仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。==箭头函数==：一种定义函数的方式//1.定义函数的方式：functionconstaaa=function(){}//2.对象字面量中定义函数constobj={bbb:function(){},bbb(){}

$attrs和$listeners5.第三方状态管理库⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对V

virtualDOM都可以放进一个HTML文件中或成为更复杂的Webpack设置模块都有独立但通用的路由器和状态管理库React把组件定义为类Vue把组件定义为对象2.vue特点轻量级，相对于其他框架，vue

数组监测案例imageimage点击修改，页面未变化，查看控制台打印信息（items是最新数据）：image加上this.$forceUpdate()，页面更新。也可以直接用vm.$set()或给items重新赋值或用数组方法，如下：image再来看个神奇的操作【这里应该涉及到diff算法、VNODE，另行学习】image将修改按钮的函数改成如上图，这时候点击修改按钮imagethis.items

如何高效的学习vue，来看看以下学习计划吧。阶段一：Vue基础阅读Vue官方文档，了解Vue的基本概念和用法。学习Vue的模板语法，掌握Vue指令和表达式的使用方法。学习Vue组件的使用方法，包括组件的定义、注册和使用。学习Vue的生命周期，理解组件在不同阶段的状态和行为。学习Vue的事件处理，包括事件绑定、自定义事件和事件修饰符。学习Vue的计算属性和监听属性，掌握数据的响应式更新和依赖收集。阶

vue初始化项目npminit初始化一个项目npminstallvue然后安装vue初始化会产生一个pacakge.json的文件，这个文件用来描述项目的依赖执行完npminstallvue之后，会产生一个node_modules文件夹，其中存放着项目的依赖。此时项目的结构如下：image.pngpacakge.json文件中的内容如下：描述了项目的一些信息{"name":"vue-stydy",

聚沙成塔·每天进步一点点本文内容⭐专栏简介基本用法文本输入框复选框下拉框原理解析文本输入框的原理复选框和下拉框的原理⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！

聚沙成塔·每天进步一点点本文内容⭐专栏简介1.全局组件的原理2.局部组件的原理3.组件注册的影响与考虑因素全局组件的使用场景：局部组件的使用场景：4.组合使用全局组件与局部组件⭐写在最后⭐专栏简介Vue