狂神说Vue笔记Vue的核心库只关注视图层，方便与第三方库或既有项目整合。HTML+CSS+JS:视图：给用户看，刷新后台给的数据网络通信：axios页面跳转：vue-router状态管理：vuexVue-UI:ICE,ElementUI一、前端核心分析1.VUE概述Vue(读音/vju/,类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设

一.vue.js渐进式的javascript的框架二.vue的优点1）体积小，更高的运行效果，双向数据绑定，生态丰富，学习成本低三.引入vue进行对vue的简单了解vueDemo{{age}}{{name}}鼠标悬停几秒钟查看此处动态绑定的提示信息！现在你看到我了{{todo.text}}{{info}}字母大写{{mess}}{{addr}}{{msg}}usingv-htmldirective

Vue.js是一个渐进式JavaScript框架，其数据驱动的视图层组件化设计使得其生命周期变得非常重要。生命周期是指组件从创建到销毁的整个过程，它分为多个阶段，每个阶段都有相应的钩子函数可以被调用，以便在这些时刻进行相应的操作和处理。Vue生命周期的三个阶段：创建阶段：在这个阶段，Vue实例正在初始化，它会在内存中创建一个实例，并对实例进行初始化设置。在这个阶段，Vue会调用一些特定的函数来创建

【Vue学习笔记】三、vue组件与生命周期三、vue组件与生命周期1）vue组件2）组件之间的父子关系3）使用组件的三个步骤4）注册全局组件5）组件的props1.创建props自定义属性2.结合v-bind

1.vue是什么概念：vue是一个用于构建用户界面的渐进式框架声明式渲染=>组件系统=>客户端路由(VueRouter)=>大规模状态管理(Vuex)=>构建工具(Webpack/vite)vue的两种使用方式：1:Vue核心包开发场景：局部模块改造2::Vue核心包&Vue插件工程化开发场景：整站开发2.插值表达式{{}}1:作用：利用表达式进行插值，渲染到页面中2:语法：{{表达式}}3.响应

深入剖析v-on指令一、v-on指令1.使用2.为什么在HTML中监听事件?二、v-on修饰符1.事件修饰符1.stop2.prevent3.capture4.self5.once6.passive2.按键修饰符1.按键码3.系统修饰键4.exact修饰符5.鼠标按钮修饰符一、v-on指令1.使用v-on指令可以监听DOM事件，并在触发时运行一些JavaScript代码事件类型由参数指定点击+1被

1.v-if,v-show渲染指令v-if是动态的创建或动态的删除,v-show是通过样式隐藏或显示.这是被v-if控制的元素这是被v-show控制的元素切换flagconstvm=newVue({el:'#app',data:{flag:true},methods:{switchflag(){this.flag=!this.flagconsole.log("flag的值是:"+this.flag

Vue指令vue会根据不同的指令，针对标签实现不同的功能指令:带有v-前缀的特殊标签属性1：v-html：指令2：v-show作用：控制元素显示隐藏语法：v-show="表达式"表达式值true显示，false隐藏原理：切换display:none控制显示隐藏场景：频繁切换显示隐藏的场景3:v-if作用：控制元素显示隐藏(条件渲染)语法：v-if="表达式"表达式值true显示，false隐藏原理

文章目录1.Vue的理解：1.1.mvvm模型：1.2.vue2的数据代理：1.3.vue2的生命周期：1.4.vue中的render函数：1.5.mixin混入：2.Vue组件间通信：2.0.props：2.1.全局事件总线：2.2.消息订阅与发布：2.3.Vuex插件通信：2.4.$nextTick：1.Vue的理解：1.1.mvvm模型：vue的思想参考了mvvm模型，model通过vm操作

提示：个人Vue学习工作总结（持续更新中如果有不对的地方还请前辈多多指点）文章目录vue计算属性computedvue数据监听wacth提示：以下是本篇文章正文内容，下面案例可供参考一、什么是计算属性(

此学习笔记是看网易云课程的学习笔记。Vue全套精品课-网易云课堂#下载node，配置环境变量#初始化一个vue项目npminstall-gvue-cli#安装vue-clivueinitwebpacktest1#初始化一个vue项目cdtest1#进入项目npminstall#安装依赖npmrundev#运行项目#项目目录结构index.html项目根目录视图.postcssrc.js:postc

公司之前一直使用的是百度地图组件，最近运营人员一直反映一个问题：有一些地区在百度地图上搜不到，地址搜索没有响应。我以为是地图API版本不对，更新了版本，这个问题还是存在。于是我就考虑换一个地图组件也解决这个问题，于是高德就成了我的第一选择。准备工作：在高德开放平台，注册成为开发者。高德开发者平台-应用.png申请Key，我申请的是Web端（JSAPI），不同的API效果可能不一样。实现方式：一：引

VUE学习文档文章目录VUE学习文档回顾：总结0目标1.前言2.认识Vue3.快速入门3.1.创建工程3.2.安装vue3.2.1.下载安装3.2.2.使用CDN3.3.vue入门案例3.3.1.HTML

如果你是Vue开发新手，可能已经听过很多行话术语，比如单页面应用程序、异步组件、服务器端渲染，等等。你可能还听说过与Vue.js生态系统有关的，包括Vue核心库、VueRouter和Vuex。一口气吃不成胖子，试图一下子学习所有东西可能是徒劳的，所以我将在这篇文章中展示一个高级“知识地图”，它包含了与Vue开发相关的关键领域。0.JavaScript和基本的Web开发如果我要你学习中文书籍中所写的

1。搭框架依赖等创建vue项目vuecreate项目名称vuecreate[options]使用vitenpminitvite@latest----templatevue目录调整1apiutilsvenderimages、styles配置文件jsconfig.json配置之后路径可以直接使用@/{"compilerOptions":{"baseUrl":"./","paths":{"@/*":["

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、props二、项目中的使用提示：以下是本篇文章正文内容，下面案例可供参考一、props功能：让组件接收外部传过来的数据传递数据：接收数据：第一种方式（只接收）：props:['name']第二种方式（限制类型）：props:{name:String}第三种方式（限制类型、限制必要性、指定默认值）：props:{name:{

组件实例（正常到数据层）场景：1、e-charts2、input结点手动处于focus状态this.$refs.xxx获取DOMp获取父组件parent.ref获取子组件child.ref跨级获取组件：递归（麻烦），而且存在的问题是：子组件实例更新了，实例并不能缓存，父组件不能及时的知道更新ref是一个回调，可以在回调中处理v-ant-refbind：实例调用回调，传递过去更新的时候，把新的实例告

Document{{msg}}-->//创建Vue实例，得到ViewModelvarvm=newVue({el:'#app',data:{msg:'大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'},methods:{}});

数据绑定将model和view绑定起来。例如value="name"，data中的name值发生变化，输入框中的值也会发生变化。单向数据绑定与双向数据绑定vue中有2种数据绑定的方式：单向数据绑定（v-bind）：数据只能从data流向页面；双向数据绑定（v-model)：数据不仅能从data流向页面，还可以从页面流向data；备注：双向数据绑定一般都应用在表单类（输入类）元素上（如：input、

数据绑定和事件处理v-bindv-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。v-modelv-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。v-on事件处理绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略用在普通元素上时，只能监听原生DOM事件。用在

文章目录一、样式绑定1.class绑定2.数组绑定class3.style绑定属性二、事件绑定指令三、事件修饰符1.stop2.prevent3.capture4.once一、样式绑定1.class绑定v-bind:class设置一个对象，从而动态的切换class,实例中将isActive设置为true显示了一个粉红色的div块，如果设置为false则不显示Document.active{widt

一、组件化image.png二、根组件image.png三、普通组件注册3.1.局部注册image.png3.2.全局注册image.png

一、脚手架目录文件介绍image.png二、项目运行流程image.pngimage.png

一、基于vue-cli创建一个vue项目1.1.打开cmd窗口，输入如下指令vuecreatedemo1.2.选择自定义安装image.png1.3.一般选择如下配置（Vuex和Router看自己选择）image.png上下方向键选择功能，空格键选中功能（打上*号）或取消选中这里安装Babel（解决兼容性）CSS-Pre-processors安装CSS预处理器。默认选中了Linter/Format

npminstall@vue/cli-g1.3.查看版本vue--version#或者vue-V二、使用VueCli创建一个开发Vue项目的标准化基础架子image.png基于vue-cli创建一个vue项目【Vue

Rico的TodoList在线版TodoList地址：Ricocc-https://ricocc.com/todo/最近开始重新把学习Vue的计划提上日程，首先入手的便是经典的TodoList小案例。在网上确实也有很多TodoList的学习案例教学，基本都是使用的原生样式，或者是“简洁”的视觉设计。作为一个不标准小设计来说，会有一丢丢强迫症，视觉上不舒服，就不大喜欢用。由于也一直有使用TodoLi

目标：显示或隐藏一段文本原理：v-ifv-show分析：共同点：都可以通过该指令去控制文本的显示或者隐藏不同点：v-if直接从DOM上移除或者添加，v-show会在DOM上设置display:none属性适用场景：如果经常显示或者隐藏文本v-show提升性能，如果不常操作显示或者隐藏v-if节省内存例子：{{mes}}{{mes}}varvm=newVue({el:"#app",data:{mes

vue事件修饰符阻止控件提交的一些事件，如：表单的自动提交。事件修饰符v-on:click=""@clickvue计算属性vs方法vue计算属性vs方法watch实时监听某个变量修饰符lazy应用场景，表单元素绑定一个值，无需实时获取，当文本框失去焦点时，才会响应数据。v-mode.lazy="msg"numberv-model.number="age"输入的是数字时才会处理。trimv-mode

Vue学习之样式汇总一二者左右排版案例说明：头部一左一右排版，内容一左一右两个排版，公告栏文字超过点点点显示代码实现说明：（1）头部实现一左一右排版需要使用一下两个样式display:flex;justify-content

上个周末写了2篇文章都是关于vue的学习，然后在写第三篇的时候，看了一个视频——里面提到学习方法。作为一个程序员，对新技术的学习需要有一个自己的套路，即学习方法。掌握一套好的学习方法，后面不管学习什么新技术、新知识都能快速的上手吸收。所以，我停止了写第三篇文章的步伐，开始停下来思考如何构建自己的学习体系？本人虽说科班出身，但是在大学期间，除了计算机的理论知识，像实践类的东西都没怎么认认真真搞过。而

Vue的安装方式下载使用（两种方式）1.直接下载并用script标签引入，Vue会被注册为一个全局变量，平时对于Dom操作比较频繁的小项目可以直接这样使用。2.Vue.js提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：针对单页应用的构建推荐使用这种方式，可

Vue学习的难点：理解和掌握Vue的核心概念，如数据绑定、计算属性、自定义事件、组件等；熟悉Vue的生命周期，了解每个生命周期的执行顺序及作用；掌握Vue的路由和状态管理，了解Vue-Router和Vuex

Vue学习笔记一、基础特性1.1、实例及选项1.1.1模板1.1.2数据1.1.3方法1.2生命周期1.3数据绑定1.3.1文本插值插值操作内置指令v-oncev-htmlv-textv-prev-cloak

1.prop的大小写(camelCasevskebab-case)HTML中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用DOM中的模板时，camelCase(驼峰命名法)的prop名需要使用其等价的kebab-case(短横线分隔命名)命名：//Prop的大小写(camelCasevskebab-case)Vue.component('blog-post',

过滤器（Vue3中已砍）一、定义过滤器image.pngcapitalize是自定义的首字母大写的函数，message作为参数传给这个函数，花括号得到的是函数的返回值过滤器函数必须被定义到filters节点下（与methods平级）过滤器一定要有return返回值过滤器的形参中，val代表管道符前面的那个值（不一定要叫val，形参名合法就行，只是可以通过形参获取管道符前面那个待处理的值）示例代码：

一、计算属性注意：计算属性在页面初始化进来，也会计算一次image.pngimage.pngimage.png二、watch侦听器(监视器)2.1.watch的简单写法image.png实时翻译功能实现防抖实现，此地的timer并不需要响应式，可以直接定义在实例this身上，不需要在data函数中定义也可image.png2.2.watch的完整写法简单写法的缺点缺点1：无法在刚进入页面的时候自动

1路由的简介-router1、路由【route】就是一组key-value的对应关系。2、多个路由，需要经过路由器【router】的管理。SPA(singlepagewebapplication）应用-单页面web应用【一个index.html】真实例子：美团服务：https://bj.meituan.com/shenghuo/c20454/{"key":"/class","value":"班级组

vue-cli是vue官方提供的一个脚手架工具，用于初始化一个Vue项目；vue-cli的优势:1、成熟的vue项目架构设计，而且会跟随vue版本的更迭而更新；2、提供了一套本地测试服务器，而且是一个热加载的服务器；3、提供了自己的一套集成打包上线的方案，webpack或者gulpify在创建项目的时候可以进行选择；有了以上优势，可以非常快速的搭建项目；vue-cli对系统的要求:vue-cli是

一、路由的基本使用说明：一般情况下路由组件存放在‘views/pages’目录，非路由组件存放在‘components’目录1.使用步骤：定义路由组件注册路由在index.js文件中引入路由组件，并创建路由器。在main.js文件中注册路由器。使用路由GotoFoo2.相关APIVueRouter():用于创建路由器的构建函数newVueRouter({//多个配置项})exportdefault

认识路由发展阶段(p100各种方式原理)：URL的hashURL的hash也就是锚点(#)，本质上是改变window.location的href属性。我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新。原地址：http://localhost:8080在控制台输入：location.hash='aaa'//http://localhost:8080/aaalocati

什么是路由路由是一个网络工程中的一个术语路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动路由器提供了两种机制:路由和传送路由是绝对数据包从来源到目的地的路径传送将输入端的数据转移到合适的输出段路由中有一个非常重要的概念叫路由表路由表本质就是一个映射表,决定了数据包的指向相关概念内网IP,每一个链接上网络的设备都有一个内网IP,这个内网IP是为了区分链接同一个局域网的不同设

Vue中的动画需求：屏幕上有HelloWorld文字，还有一个切换按钮，点击切换按钮，文字渐渐消失，再次点击按钮，文字渐渐出现。transition标签，当一个元素被该标签包裹后，vue会分析CSS样式，自动构建动画流程。.fade-enter,.fade-leave-to{opacity:0;}.fade-enter-active,.fade-leave-to{transition:opacit

双向绑定：数据的更新，影响视图的更新；视图的更新影响数据的更新单向数据流多个属性双向绑定（sync这个API）1、Vue是单向数据流，不是双向绑定2、Vue的双向绑定不过是语法糖v-model3、Object.defineProperty是用来做响应式更新的，和双向绑定没关系课后：扩展PersonalInfoDemo对手机号做非空校验。如不合法，则给出错误提示。

Vue学习笔记--第六、七章（尚硅谷学习视频总结）第六章VueRouter路由管理器6.1相关理解6.1.1vue-router的理解6.1.2对SPA应用的理解6.1.3路由的理解6.2基本路由6.3

Vue学习笔记数据绑定脚手架VueCLI组件组件化开发需要安装的插件自定义组件定义自己的组件使用自定义的组件普通组件--局部注册普通组件--全局注册普通组件的局部注册和全局注册的区别第三方组件Element-uicomputed

1全局事件总线的理解与案例功能：任意组件间通信【父子子父爷孙。。。兄弟。。。】1、这个X需要所有的vc的可见-我们在Vue的原型对象上放即可，这里给出一个概念的问题：关于VueComponent:1.School组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，Vue.extend生成的。2、我们只需要写``或``，Vue解析时公帮我们创建school组件的实例对象，即Vu

消息订阅与发布(pubsub)一种组件间的通信方式，适用于任意组件间通信使用步骤：1.安装pubsub第三方库npmipubsub-js2.在组件中引入importpubsubfrom'pubsub-js'3.数据接收方（A组件）：A组件订阅消息，并且订阅消息的回调函数留在A组件自身methods:{/*自定义回调函数，第一个参数为订阅的消息名称，第二个参数为消息发布方发布的数据*/callFun

nextTick语法：this.$nextTick(回调函数)作用：在下一次DOM更新时，执行指定的回调函数用法场景：当改变数据后，要基于更新后的新DOM进行操作时，需要在nextTick所指定的回调函数执行

全局事件总线(GlobalEventBus)一种支持所有组件间的通信方式（原理：相当于提供一个全局对象，这个对象能够被任意组件访问到，并且这个对象能够调用Vue内置函数）安装全局事件总线newVue({el:'#app',render:h=>h(App),beforeCreate(){//将Vue实例对象放在Vue原型对象上的X属性中,即，安装全局事件总线Vue.prototype.$bus=th

对于一个vue项目，换一台主机后，还需要按照像原先主机那样，依次添加依赖吗？当你将一个Vue项目从一台主机迁移到另一台主机时，并不需要按照原先主机的方式依次添加依赖。在Vue项目中，项目的依赖项通常记录在package.json文件中。这个文件包含了项目所需的所有依赖项和版本信息。当你迁移项目到新的主机时，只需将项目的源代码和package.json文件复制到新的主机上即可。在新的主机上，你需要确