前端专栏VUE学习第13页

vue学习(11)：父子组件

1.小球动画flag标识符的作用分析.ball{width:15px;height:15px;background-color:red;border-radius:50%;}varvm=newVue({el:'#app',data:{flag:false;},methods:{beforeEnter(el){el.style.transform='translate(0,0)'},enter(el

不会改变·2023-07-14 14:35

什么是Vue.js和怎么安装和使用Vue.js

Vue学习起来非常简单，本教程基于Vue2.X版本测试。Vue.js学前必备知识点HTMLCSSJavaScriptVue.js安装1、独立版本我们可以在Vue.js的官网上直接下载v

凯撒云·2023-07-14 01:14

vue学习1

文章目录VUE注意点绑定模板语法插值语法指令语法vue中的data数据代理事件处理点击修饰符键盘事件keyup计算属性监视深度监视监视与计算属性的区别样式绑定条件渲染列表渲染对key的理解列表过滤监视数据改变的底层原理SET()数据劫持接收表单数据过滤器局部过滤器全局过滤器内置指令v-textv-htmlcookiev-cloakv-oncev-pre自定义指令局部全局生命周期mounted:be

~insn~·2023-07-13 19:37

Vue学习(3)

文章目录Vuex工作原理配置环境各种函数mapState对象写法数组写法MapGetterMapMutations对象写法数组写法Mapaction总结模块化模块化1总结Vuex工作原理那三个要通过store管理配置环境使用import时，回先执行Import中的代码,在后面的也会提前。index.jsmain.js业务逻辑写在action中，mutation只写操作（加工）没有业务逻辑，直接调用

~insn~·2023-07-13 19:07

Vue学习笔记11

十一、computed的使用computed可以对属性进行计算，只有在属性发生变化时才会被触发，会大大提升效率。计算属性一定要有返回值return。method方法执行时，所有的方法都会执行，效率会下降。加A加BA--{{AddToA}}B--{{AddToB}}computed:{AddToA(){console.log("A++");returnthis.a+this.age;},AddToB

wing2464·2023-06-24 00:19

vue学习笔记(二)vue的生命周期和钩子函数

前言通过上一章的学习，我们已经初步的了解了vue到底是什么东西，可以干什么，而这一篇博客主要介绍vue的生命周期和它常用的钩子函数，如果有学过java的园友可能有接触到在学习servlet的时候学过servlet的生命周期servlet加载--->实例化--->服务--->销毁,对于vue的而言他也有自己的生命周期，那么一起来看看吧！本章目标学会并了解vue的生命周期和钩子函数学会使用手动挂载和调

一只流浪的小码农·2023-06-23 10:53

VUE学习笔记：插槽详解

刚开始看Vue官方文档的时候对插槽不是很理解，其实通俗点来讲，插槽就是在自定义组件中预留一个位置，这个位置的内容可以由使用组件的人来定义，具有高度的灵活性。1、使用场景先来看看插槽的使用场景，否则可能连学习的欲望都没有了。插槽还是很重要的，即使不去定义，也要学会使用。下面这个图中使用了Vant中的NavBar组件，该组件用于手机端标题展示，默认的组件展示的只有标题和返回按钮，但是在有些情况下，我们

子非余不知渔之乐·2023-06-23 05:26

Vue学习

Vue.js（读音/vjuː/,类似于view）是一套构建用户界面的渐进式框架。Vue只关注视图层，采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue模板语法1.文本site:{{name}}url:{{url}}{{details()}}varvm=newVue({//el代表需要构造的元素idel:'#vue_det',//data用于自

L丶Y1122·2023-06-22 22:15

VUE学习笔记

第一个DEMOVuedemo{{msg}}letvm=newVue({//必须挂载到一个根标签上el:"#app",data:{msg:"HelloVUE!"},});`文本使用“Mustache”语法(双大括号)输出vm的data数据到页面V-html指令innerHTML，vm视图绑定技术AttributeMustache语法不能作用在HTMLattribute上，遇到这种情况应该使用v-bi

浅瞳_e42e·2023-06-22 13:47

vue学习笔(10)：组件

1.什么是组件组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；2.组件化和模块化的不同模块化是从代码逻辑的角度进行访问的，方便代码分层开发，保证每个功能模块的职能单一，组件化是从ui界面的角度进行划分的，前端的组件化，方便UI组件的重用3.创建组件如果要使用组件，直接，把组件的名称，以HTML标签的形式

不会改变·2023-06-20 13:25

npm ERR! code ERESOLVE（While resolving: @vue/[email protected]）

vue学习错误描述安装了eslint后，再用npm安装其他包，就会报错；大致看了报错信息，应该是eslint-config-standard和eslint-plugin-vue版本不对应导致的解决方案为了解决这种依赖冲突

水不腐-枢不蠹·2023-06-17 15:32

Vue介绍与入门（一）

二、vue入门1.引入vue.js2.编写入门的简易代码（实践）三、vue学习总结（重点）前言前端开发三大框架1、Vue：尤雨溪主导开发2、React：脸书（Facebook）主导开发3、Angular

逸佳6·2023-06-16 19:03

Vue学习之第一个Vue应用

第一个Vue应用安装WebStorm在这之前，已下载安装好了WebStorm。打开WebStorm，点击”+“就可以创建一个新的应用。项目文件目录地址：/Users/morris/WebstormProjects或者在file->newpriject也可以新建一个项目新建一个html文件file->new->HTMLFile新建index.html文件后，自动生成如下代码在body里面添加hell

Morris_·2023-06-16 12:09

vue学习回顾第二天

自动获取焦点方式一：dom版//通过ref属性对dom的引用，随意命名，不能重复品牌名称://通过this.$refs.ref的值来获取domthis.$refs.inputRefId.focus()方式二：通过自定义指令获取焦点自定义指令通过Vue.directive()创建，它包含两个参数，一个是自定义指令的名字，可以随便取，但是全部小写；另一个是一个对象，表示自定义指令的配置项。Vue.di

xinhongwu·2023-06-15 21:05

vue学习笔记-day03

day031.(掌握)JS高级函数1.1ES6循环for(letiinthis.books);i表示books里面的索引newVue({el:'#app',data:{books:['java','C#','paython','springboot']},methods:{}})for(letbookofthis.books);book是books里面的元素(或者是对象)newVue({el:'#

TomCloud·2023-06-14 11:50

前端笔记目录

JavaScript——ES6新特性（2）JavaScript——ES8新特性JavaScript——ES9新特性JavaScript——ES10新特性JavaScript——ES11新特性Vue2-Vue3Vue

iFulling·2023-06-13 13:40

Vue学习之 MacOS 安装 webpack

Vue学习之MacOS安装webpackwebpack简介Webpack是一个非常流行的前端构建工具，它可以将多个模块（包括CSS、JavaScript、图片等）打包成一个或多个静态资源文件（bundle

Morris_·2023-06-13 08:21

Vue学习之 MacOS 安装 vue-cli

文章目录Vue学习之MacOS安装vue-clivue-cli简介vue-cli安装Vue学习之MacOS安装vue-clivue-cli简介vue-cli（VueCommandLineInterface

Morris_·2023-06-13 08:20

vue学习中v-if和v-show一起使用的问题

v-if和v-show一起使用在开发项目过程中v-if和v-show一起使用时，接下面跟着的v-else会在页面上面显示两次。代码如下：{{index1}}{{item.number}}暂无数据原因其实很简单，根据vue的文档描述：当它们都处于同一节点时，v-for的优先级高于v-if。这意味着，v-if将分别在循环中的每次迭代上运行。也就是v-if会判断两次。当然这样用也有它的好处，当你只想将某

会做饭的技术男·2023-06-13 04:19

vue学习笔记---(3)条件渲染(v-if && v-show)以及列表渲染(v-for)

1.条件渲染v-if用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。v-show用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候展示。带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销

Tomcat20·2023-06-13 04:47

Vue学习笔记07：ref 、动态组件、插槽、自定义指令

文章目录一、ref引用1.什么是ref引用2.引用DOM和组件实例3.this.$nextTick(cb)方法二、动态组件1.什么是动态组件2.动态组件渲染和keep-alive三、插槽1.什么是插槽2.插槽的基础用法3.具名插槽4.作用域插槽4.1表格使用作用域插槽四、自定义指令1.什么是自定义指令2.声明私有自定义指令的语法3.声明全局自定义指令的语法4.updated函数5.指令的参数值五、

双-鱼·2023-06-12 22:45

VUE学习（持续更新ing）

目录VUE模板语法事件修饰符计算属性computed监视属性watch条件渲染列表渲染：收集表单数据自定义指令：编辑Vue2生命周期：编辑ref属性：配置项propsmixin混入插件pluginscoped样式消息订阅与发布（pubsub）nextTick插槽slotVUE3reactive函数setup注意点computed函数Watch函数watchEffec函数VUE3生命周期自定义hoo

Guiyyyyy·2023-06-12 18:58

Vue学习笔记（篇一）——Vue.js基础知识

一、Vue.js基础知识（一）Vue是一个渐进式框架，什么是渐进式？1、渐进式意味着你可以将Vue作为你的应用的一部分嵌入其中，带来更丰富的交互体验。2、或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。3、比如Core+Vue+router+Vuex，也可以满足你各种各样的需求。（二）Vue有很多特点和Web开发中常见的高级功能1、解耦视图和数据2、可复用的组件3、

Etui۹(･༥･´)و ̑̑·2023-06-10 06:15

Vue学习笔记6——第一个vue-cli项目和webpack学习使用

什么是vue-clivue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板;预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;主要的功能:统一的目录结构本地调试热部署单元测试集成打包上线需要的环境Node.js:安装就无脑下一步就好,安装在自己的环境目录下.Git:https://git-scm.c

扎克风暴·2023-06-09 18:30

vue学习日记——生命周期

vue.js中的生命周期包含三块：组件生命周期、路由生命周期、指令生命周期。所谓生命周期就是由一系列钩子函数组成的执行链，钩子函数，即特定时间段会执行的函数。组件生命周期image.png如上图：beforeCreate=>created:datamethods开始初始化；created:data,methods初始化完成,el为undifine；created=>beforeMount:判断是否

夜鸟丶·2023-04-21 19:19

vue学习笔记

vue开发环境介绍npm(node包管理工具)安装node，自带npmnpm配置淘宝源镜像或者使用cnpmnpmconfigsetregistryhttps://registry.npm.taobao.orgnpminstall-gcnpmnpm配置文件package.json执行脚本script：npminstall->安装依赖模块npmstart->本地启动一个webpack-dev-serv

miccuci·2023-04-20 18:29

vue学习问题记录--vue和vue-template-compiler版本不匹配

问题：vue和vue-template-compiler版本不匹配的问题过程：创建项目：vueinitwebpack-simple名称执行npminstall安装element安装vue-resource：cnpmivue-resource--save安装vue-resource之后就报上图的错误。解决：执行npminstall之后，直接npminstallvue-template-compile

以对_·2023-04-20 12:47

Vue学习笔记~狂神

+Vue简介SoC：关注度分离原则Vue只关注视图层HTML+CSS+JS：视图：给用户看刷新后台数据尤雨溪发布于2014年2月；网络通信：axios页面跳转：vue-router状态管理：vuex前段三要素HTML结构+CSS（表现）+JavaScript（行为）CSS预处理器CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成

小小程序猿··2023-04-20 05:21

【DAY42】vue学习

constroutes=[{path:‘/foo’,component:Foo},{path:‘/bar’,component:Bar}]定义路由的作用是什么constroutes定义路由的作用是将每一个URL请求映射到一个组件，其中path表示请求的URL，component表示对应的组件。通过constroutes所定义的路由映射关系，可以让Vue应用能够响应浏览器地址栏中的URL变化，将对应

qq_42775808·2023-04-20 03:18

Vue学习之Vue的生命周期详细解释

Vue学习之Vue的生命周期详细解释概览详细解释每个生命周期的应用beforeCreate(创建前)created(创建后)beforeMount(挂载前)mounted(挂载后)beforeUpdate

five-five·2023-04-20 02:18

Vue学习之VueRouter的路由钩子使用

Vue学习之VueRouter的路由钩子使用前言概述路由钩子函数全局路由守卫详细说明beforeEach：全局前置守卫afterEach：全局后置钩子beforeEnter：路由独享的守卫beforeRouteUpdate

five-five·2023-04-20 02:47

vue学习

1、vue快速上手代码例子欢迎学习vue.js我叫{{name}}，微信{{wechat}}//创建vue对象varapp=newVue({el:'#app',data:{name:'xiaoming',wechat:'xiaoming123456'},methods:{clickMe:function(){this.name='alex';this.wechat='alex123456'}}})

水煮小猫钓鱼·2023-04-19 17:10

关于vue学习过程中遇到的大问题！！4/19

近期不参加面试了：针对问题就去解决问题。不要发现问题了，不去解决就空焦虑（1）针对vue相当于没有系统学过这件事：需要重新花时间补习【最全最新Vue、Vuejs教程，从入门到精通】https://www.bilibili.com/video/BV15741177Eh/?p=101&share_source=copy_web&vd_source=011d4ea3d9ec16c7445c65e3d81

不拿Offer不改名·2023-04-19 16:49

Vue学习笔记（一）

一、声明式渲染声明式的将数据渲染进入DOM，通过名称app将VUe实例和div绑定起来，div中的message值跟随Vue实例中的数据message动态变化：即Vue控制Domhtml:{{message}}javascript:varapp=newVue({el:'#app',data:{message:'HelloWorld!'}})测试：进入控制台，修改message的值，页面中显示的me

CoderAPang·2023-04-19 00:18

vue学习部分代码--笔记5 收集表单数据过滤器

收集表单数据：若：账号：密码：年龄：性别：男女爱好：学习打游戏吃饭所属校区请选择校区北京上海深圳武汉其他信息：阅读并接受《用户协议》提交newVue({el:'#root',data:{userInfo:{account:'',password:'',age:18,sex:'female',hobby:[],city:'beijing',other:'',agree:''}},methods:{d

tmmi·2023-04-18 03:31

Vue学习笔记（6. 组件之间传值）

1.组件基本语法(1)template(2)script(3)style2.父组件传值，子组件接值(1)父组件传值给子组件(2)子组件接收父组件的传值（随时接收）子组件的值会随着父组件值的变更而变更。但是子组件变更，不会影响父组件的数据。(3)子组件接收父组件的传值（只在初期接收一次）初期化接收参数。子组件的值不随着父组件值的变更而变更。子组件可以监听自己的数据。3.子组件传值，父组件接值(1)子

凯尔萨厮·2023-04-18 02:26

Vue学习笔记（4. 生命周期）

1.生命周期写法（vue2与vue3比对）创建前：vue3setup,vue2beforeCreate//组件创建前执行的函数创建后：vue3setup,vue2created//组件创建后执行的函数挂载前：vue3onBeforeMount,vue2beforeMount//挂载数据前执行的函数挂载后：vue3onMounted,vue2mounted//挂载数据后执行的函数更新前：vue3on

凯尔萨厮·2023-04-18 02:55

Vue学习笔记（5. 计算属性，监视器(侦听器)）

1.计算属性（computed）(1)get方式初期显示改变值后（hello->hello1）计算属性allStr跟随变更(2)getset方式页面初期显示改变值（hello->hello1）计算属性的get会监控到变更，使fullStr跟随变更改变计算属性（helloworld->helloworld3）set会监控到计算属性变更，做相应处理。2.监视器，侦听器（watch）(1).监听值组件初

凯尔萨厮·2023-04-18 02:55

Vue学习笔记（7. axios异步请求）

1.axios请求方式方式1：axios({method:"GET",url:"..."})方式2：axios({method:"POST",url:"...",data:"..."})方式3：axios.get("url...")方式4：axios.post("url...","data...")2.安装axios命令：npminstallaxios3.安装querystring命令：npmin

凯尔萨厮·2023-04-18 02:54

web学习---Vue---笔记（1）

该笔记是记录尚硅谷的Vue学习视频的笔记，视频地址为：学习视频地址初始VueVue组件化的特点组件化声明式编码虚拟DOM+Diff算法，尽量复用DOM节点H5的组件，是把某一个模块封装，里面写HTML\

AsiaSun.·2023-04-18 01:03

vue.js 学习笔记

vue学习官网初步学习1、vue基础1.1vue简介1.2第一个vue程序1.3el挂载点1.4data：数据对象2、Vue指令2.1v-text指令2.2v-html指令2.3v-on指令基础2.4v-show

sunshine~~~·2023-04-17 18:20

前后端分离开发Springboot+VUE学习笔记

学习内容视频来源：传送门vue的配置与安装：参考文档目录前后端分离实现技术创建vue项目在idea中打开新建页面创建SpringBoot应用创建实体对象与数据库表元素绑定创建实体类接口前端调用数据跨域传输在springboot中解决总结前后端分离前后端分离就是将一个应用的前端和后端代码分开写，为何如此？如果不使用前后端分离，会有什么问题？传统JavaWeb开发过程中，前端使用JSP开发，流程为前端

makerjack001·2023-04-17 16:40

Vue学习--黑马电商管理系统

关于phpStudy无法启动，从而导入mydb.sql数据库文件失败的解决方案：使用Navicat来导入mydb.sql数据库文件，具体步骤为：（1）新建数据库（2）在mydb上右键，选择运行SQL文件导入，选择要导入的mydb.sql文件，进行导入。2.在vue_api_server文件夹下按住shift鼠标单击右键，在此处打开powershell窗口，执行nodeapp.js命令，运行报错：原

TinyWu369·2023-04-16 14:08

Vue脚手架+Django+DRF+Docker+gitee+postgis开发笔记

1.参考资料的位置模块资料位置Vue基础文档：/Users/cocytus/Desktop/平台建设/开发/Vue/VUE基础.md案例：/Users/cocytus/vueProjects/vue学习

Cocytus233·2023-04-16 13:48

Vue学习笔记-身份证规则校验

//身份证验证Vue.prototype.$checkIdCard=function(idCard){let_this=this;letbbd='';//出生日期letsex='';//性别letcanPass=true;idCard=idCard.toUpperCase();//转大写letlen=idCard.length;letcity={11:"北京",12:"天津",13:"河北",14

赵客缦胡缨v吴钩霜雪明·2023-04-16 00:40

vue学习笔记-- component组件的使用和传值

定义为了拆分vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来需要功能，就可以去调用对应的组件；组件化和模块化的区别：1、模块化：是从代码逻辑的角度进行划分的；2、组件化：是从UI界面的角度进行划分的；方便ui组件的重用；方式1使用过程：使用vue.extend来创建全局的vue组件（通过template属性，指定了组件要展示的html结构）使用vue.component(‘组

watson_pillow·2023-04-15 20:10

Vue学习笔记之四Vue的Ajax请求

4.Vue的Ajax请求4.1Vue-resource插件介绍下载地址：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inte

聽見下雨的_聲音·2023-04-15 20:02

前端VSCode常用插件安装和使用

因为有些插件会到vue学习的时候引起冲突，所以这里介绍几个常用的插件。Chinese(Simplified)汉化AutoRenameTagOneDarkPro颜色主题格式化代

乐枫飘零·2023-04-15 20:06

Vue学习案例：数据通信-子传父（自定义事件）

Document{{itme.name}}//子组件constcpn={template:"#cpn",data(){return{categories:[{id:"aaa",name:"热门推荐"},{id:"bbb",name:"家用家电"},{id:"ccc",name:"手机数码"},],};},methods:{btnClick(itme){//发射事件：自定义事件(自定义事件名称，自定

Sakaiu2·2023-04-15 11:39

Vue学习-计算属性和侦听器

Vue学习-计算属性和侦听器一、计算属性（computed）1、计算属性的定义和原理1、定义：要用的属性不存在，要通过已有属性计算得来。

人道逍遥·2023-04-15 08:20

推荐频道

前端专栏VUE学习