Vue学习

【Vue】vue基础语法——自定义指令、过滤、组件和动画（内附详细案例代码）——day04

大家好，从今天开始，会每天分享vue学习的知识点，一起加油~Vue选项（会继续更新...）el模板data数据methods方法directives指令filters过滤watch监听computed计算
前端小媛·2023-07-28 00:13

VUE学习笔记（Day2）

第一节—style样式的多种操作方式1.绑定内联样式1.对象语法：v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript对象。CSSproperty名可以用驼峰式或短横线分隔（记得用引号括起来）来命名：data:{activeColor:'red',fontSize:30}2.条件渲染v-if1.v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表
你猜我是不是ysh·2023-07-28 00:11

Vue学习Day2——指令补充

一、指令修饰符1、什么是指令修饰符？所谓指令修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作—>简化代码2、按键修饰符@keyup.enter—>当点击enter键的时候才触发代码演示：记事本小凯的记事本添加任务{{index+1}}.{{item.name}}0">合计:{{list.length}}清空任务constapp=newVue({el:'#app',data:{to
wangkay88·2023-07-28 00:10

vue学习笔记---增删、小选影响全选、全选影响小选

1.添加任务//1.目标-新增任务exportdefault{data(){return{task:""}},methods:{downFn(){if(this.task.trim().length===0){alert("任务名不能为空");return;}//1.2(重要)-当前任务名字要加到list数组里//子传父技术this.$emit("create",this.task)this.ta
不想努力的迪迪·2023-07-27 10:40

Vue学习总结——前后端分离

1.引言可能有些小伙伴对前后端分离的理解不够深刻，只知道当今前后端分离项目当今的潮流，认为只要使用Vue+Springboot的架构就是前后端分离项目，我认为，开发一个前后端分离项目，我们首先需要对前后端分离这个概念有清晰的认识，我来谈谈自己对前后端分离的理解。2.什么是前后端分离（是什么）前后端分离，是开发模式上的前后端分离。当然还有项目架构方面的前后端分离，也就是在考虑请求并发，服务器性能，处
黑白程序员·2023-07-27 03:26

vue学习笔记 element-plus/icons-vue el-menu动态菜单(路由)

安装iconnpminstall@element-plus/icons-vue当前版本"dependencies":{"@element-plus/icons-vue":"^0.2.4","core-js":"^3.8.3","element-plus":"^1.3.0-beta.1","node-sass":"^7.0.1","sass-loader":"^12.4.0","vue":"^3.2
xjcwzp·2023-07-26 23:36

Vue学习笔记 store 找不到Module里的action

子模块user.tsconstmoduleUser={state:():{username:"",}),mutations:{},actions:{login({commit}:any){console.log("login");},},getters:{},};exportdefaultmoduleUser;store的index.tsimport{createStore}from"vuex";
xjcwzp·2023-07-26 23:36

vue学习笔记 el-dialog 固定宽度

1、按比例显示width=“30%”这是一段信息取消确定2固定宽度(部分Element版本):width="‘500px’"，注意引号这是一段信息取消确定3固定宽度(部分Element版本)width=“500px”这是一段信息取消确定
xjcwzp·2023-07-26 23:06

vue学习笔记 修改el-card样式

卡片名称操作按钮exportdefault{name:"DevSort",};.card-header{display:flex;justify-content:space-between;align-items:center;}.text{font-size:14px;}.item{margin-bottom:0px;margin-top:10px;}.box-card{width:480px;
xjcwzp·2023-07-26 23:06

vue学习笔记 element-plus export ‘createElementVNode‘ (imported as ‘_createElementVNode‘) was not found

VueCLI版本是5.0.0-beta.3创建新项目后，运行正常安装element-plus运行报错export‘createElementVNode’(importedas‘_createElementVNode’)wasnotfoundin‘vue’浏览器中报错误UncaughtTypeError:(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElemen
xjcwzp·2023-07-26 23:36

vue学习笔记 VUE3 v-for 中使用ref

参考：VUE3.0之v-for中的Ref数组{{tag.title}}moveToCurrentTag(){consttags=this.$refs.tag;this.$nextTick(()=>{for(consttagoftags){if(tag.to.path===this.$route.path){this.$refs.scrollPane.moveToTarget(tag);//when
xjcwzp·2023-07-26 23:35

vue学习笔记 el-scrollbar 隐藏横向滚动条

在学习vue过程中，学习侧边菜单，使用el-scrollbar，需要隐藏横向滚动条sidebar.scss#app{$sideBarWidth:220px;$menuBg:#304156;.sidebar-container{...//隐藏横向滚动条.el-scrollbar__wrap{overflow-x:hidden!important;}.el-scrollbar__bar.is-hori
xjcwzp·2023-07-26 23:35

vue学习笔记 No matching version found for @vue/cli-plugin-babel@~5.0.0.

在创建项目时，选择了babel，创建失败，提示Nomatchingversionfoundfor@vue/cli-plugin-babel@~5.0.0@vue/cli-plugin-babel中查找相关版本，安装本人未找到对应版本，没有解决此问题。最后将VueCLI升级才解决的，
xjcwzp·2023-07-26 23:35

vue学习笔记 vue-cli4.5.13 创建项目报错

vue-cli4.5.13vue3.0.0或vue3.1.3创建完项目后，运行报如下错误reactivity.esm-bundler.js解决方法1：https://download.csdn.net/download/m0_58006422/19987970替换文件reactivity.esm-bundler.js替换后错误消失，具体怎么解决的，本人相关知识有限，看不明白解决方法2：升级vue到
xjcwzp·2023-07-26 23:05

vue学习笔记 vue页面四周留有空白问题

参考：vue组件顶部留有空白问题vue3新建项目后，发现页面四周有留白解决办法：修改index.html样式添加样式body{margin:0;padding:0;}index.html如下body{margin:0;padding:0;}favicon.ico">We'resorrybutdoesn'tworkproperlywithoutJavaScriptenabled.Pleaseenab
xjcwzp·2023-07-26 23:05

vue学习笔记 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘

版本：vue3vue/cli5.0.0做写store时报错importVuefrom"vue";importVuexfrom"vuex";importgettersfrom"./getters";importuserfrom"./modules/user";Vue.use(Vuex);conststore=newVuex.Store({modules:{user,},getters,});expo
xjcwzp·2023-07-26 23:05

vue学习笔记 vue cli4.5 创建项目

vuecreatevuetest2Manuallyselectfeatures手动配置Useclass-stylecomponentsyntax?(Y/n)是否使用class风格的组件语法？UseBabelalongsideTypeScript(requiredformodernmode,auto-detectedpolyfills,transpilingJSX)?使用babel工具自动为转换后的
xjcwzp·2023-07-26 23:35

Vue学习

一、vue中使用async和await解决异步转载自知乎：（https://zhuanlan.zhihu.com/p/72817372）async的解释：async的用法，作为一个关键字放到函数之前，表示函数是异步的函数，因为async就是异步的意思，异步函数也就意味着该函数的执行不会阻塞后面代码的执行，async函数返回的是一个promise对象await的解释：await的含义为等待。意思就是
夜消雨霁·2023-07-25 17:09

vue基础学习笔记

VUE学习笔记Vue框架第一个Vue程序el挂载点data数据对象Vue指令内容绑定v-text，v-html事件绑定v-on显示切换v-show,v-if属性绑定v-bindv-for列表循环v-model
暄染落墨·2023-07-25 15:52

vue学习之elementUI组件el-input输入框只能输入数字或保留两位小数

只能输入数字的两种方法：方法一：使用type=“number”缺点：maxlength不生效可以输入e可以输入小数点方法二：使用正则表达式其中v-model.number确保获得的count值为数字，即使0开头也会被后续数字代替。输入数字或保留两位小数的表单校验//不使用表单校验//缺点：不能输入0.01-1?value.slice(0,value.indexOf('.')+3):value"ty
King_960725·2023-07-25 13:35

vue学习笔记——Vue3+element ui 如何在table组件内实现下拉列表的功能

在使用elementuiplus时，想要在table组件内加入一个下拉列表的功能，发现在文档内没有展现，通过查阅其他文档发现可以使用如下的方法进行实现。下方是组件的完成代码，复制在项目内可直接看到效果。代码如下：exportdefault{data(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No.189,GroveSt,L
chen_sir_sh·2023-07-25 10:27

前端技术Vue学习笔记--001

前端技术Vue学习笔记文章目录前端技术Vue学习笔记1、Vue2和Vue3比较2、Vue简介3、Vue快速上手4、插值表达式{{}}5、Vue响应式特性6、Vue指令6.1、v-html指令6.2、v-show
Radan小哥·2023-07-25 00:36

Vue学习笔记-Day1 认识Vue

day1--认识Vue起源：2013年6月—google工作的尤雨溪收到Angular的启发，从中提取除了自己喜欢的部分，而开发出的一款轻量级框架，最初命名Seed，本意是做一个视图层库。2013年12月—更名为vue，版本为0.6.02014年1月—第一次进行正式发布V0.8.02015年4月—发布0.12.0版本，vue进入Laravel社区，打响了知名度2015年10月—V1.0Evange
小菜鸡的日常问题·2023-07-20 13:08

VUE学习四事件处理

事件处理事件的基本使用事件修饰符键盘事件事件的基本使用事件的基本使用欢迎来到{{name}}学习点我提示信息-->点我提示信息1（不传参）点我提示信息2（传参）Vue.config.productionTip=false//阻止vue在启动时生成生产提示。constvm=newVue({el:'#root',data:{name:'尚硅谷',},methods:{showInfo1(event){
lamwolf·2023-07-20 03:07

VUE学习五计算属性

计算属性插值语法实现methods实现计算属性实现计算属性简写插值语法实现姓名案例_插值语法实现姓：名：全名：{{firstName}}-{{lastName}}Vue.config.productionTip=false//阻止vue在启动时生成生产提示。newVue({el:'#root',data:{firstName:'张',lastName:'三'}})methods实现姓名案例_met
lamwolf·2023-07-20 03:07

VUE学习六监视属性

监视属性天气案例天气案例_监视属性天气案例_深度监视添加案例_监视属性_简写天气案例天气案例今天天气很{{info}}切换天气-->切换天气Vue.config.productionTip=false//阻止vue在启动时生成生产提示。constvm=newVue({el:'#root',data:{isHot:true,},computed:{info(){returnthis.isHot?'炎
lamwolf·2023-07-20 03:07

VUE学习六之绑定样式及条件属性

绑定样式及条件属性绑定样式条件属性绑定样式绑定样式.basic{width:400px;height:100px;border:1pxsolidblack;}.happy{border:4pxsolidred;;background-color:rgba(255,255,0,0.644);background:linear-gradient(30deg,yellow,pink,orange,yel
lamwolf·2023-07-20 03:05

vue学习笔记（一）

1.编辑器选择是用vscode和webstrom个人感觉vscode的插件比较多，对vue3的支持比较好webstorm的自动保存比较好各有优劣吧我学习的这个项目目前采用vscode2.vue2还是vue3框架学通了都是通用的，这个时间点来学肯定是学vue3只是顾虑到团队小伙伴采用的都是vue2历史项目都还是根据vue2来后续新项目采用vue33.element-ui习惯于vue2开发的都是采用的
石硕页·2023-07-20 00:48

vue学习笔记--数据代理

目录1.什么是数据代理？2.vue数据代理:1.什么是数据代理？数据代理：通过一个对象代理对另一个对象中属性的操作(读/写)。下面我们通过一个简单的例子来了解什么是数据代理：1.我们定义了两个对象obj和obj22.然后通过Object.defineProperty()方法给obj2的对象上面添加了一个属性x在配置对象中我们定义了get()方法和set()方法3.当我们访问obj2的x属性时触发g
清浅九天·2023-07-19 20:30

Vue学习笔记

目录浏览器插件安装（重点关注）为什么学Vue？Vue是什么？2.@vue/cli脚手架2.1_@vue/cli安装2.2_@vue/cli创建项目启动服务2.3@vue/cli目录和代码分析2.5_@vue/cli自定义配置2.6_eslint检查代码2.7_@vue/cli单vue文件讲解2.8_@vue/cli欢迎界面清理写出第一个vue的helloworld学习Vue中的指令：1.插值表达式
hanjuyuan·2023-07-19 12:06

Vue学习随堂记录

计算属性和监听器Document西游记;价格：{{xyjPrice}},数量：西游记;价格：{{shzPrice}},数量：总价：{{totalPrice}}newVue({el:"#app",data:{xyjPrice:99.98,shzPrice:98.00,xyjNum:1,shzNum:1},computed:{totalPrice(){returnthis.xyjPrice*this.
雾喔·2023-07-18 10:01

Vue学习笔记---ajax

1.axios执行ajax异步请求请求形式：get请求：axios.get().then().catch()post请求：axios.post().then().catch()并发请求：axios.all([axios请求,axios请求]).then(axios.spread(function(acct,perms)))配置请求：axios(config)、axios(url[,config])
洛千陨·2023-07-18 03:37

Vue路线？选择？禹神直播课笔记

文章内容如下：直播回放：禹神亲绘VUE3知识图谱，vue学习路线免费领取！_哔哩哔哩_bilibili禹神亲绘Vue2.x+Vue3.x
星辰大海1412·2023-07-17 06:46

FE_Vue学习笔记 框架的执行流程详解

1分析脚手架结构（1）CLI就是commandlineinterface的缩写。VueCLI官网：VueCLI（2）安装过程：（PS：提前安装过node.js了，没有安装的可以打开这个：Download|Node.js已经安装的可以检查node.js和npm版本及安装情况：检查nodejs：node-v检查npm：npm-v（这两个指令均出现版本号为安装成功））①配置npm淘宝镜像：npmconf
@Autowire·2023-07-17 02:30

Vue学习笔记 —— 生命周期

什么是生命周期？每个Vue实例在被创建之前都会经过一系列的初始化过程,这个过程就是vue的生命周期。同时Vue在一整个生命周期中，提供了很多钩子函数。利用这些钩子函数，我们可以在生命周期的不同时刻进行操作。钩子函数如下：beforeCreate------------创建前状态created------------创建完毕状态beforeMount------------挂载前状态mounted-
莫非C·2023-07-17 02:29

vue 声明周期函数_Vue学习笔记-生命周期与钩子函数

vue生命周期简介生命周期探究{{message}}varapp=newVue({el:'#app',data:{message:"xuxiaoisboy"},beforeCreate:function(){console.group('beforeCreate创建前状态===============》');console.log("%c%s","color:red","el:"+this.$el
osakadorisss·2023-07-17 02:58

vue学习

Vue2学习1.了解前端1.前端三要素HTML（结构）：超文本标记语言（HyperTextMarkupLanguage），决定网页的结构和内容CSS（表现）：层叠样式表（CascadingStyleSheets），设定网页的表现样式。JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为2.什么是CSS预处理器？用一种专门的编程语言，进行W
没有什么是应该·2023-07-16 18:58

前端技术学习第九讲：VUE基础语法---VUE常用指令

VUE常用指令在VUE学习中，通常使用相关指令使VUE对象中的内容与网页进行挂载绑定，是我们的数据与视图之间产生关联，完成渐进式动态效果。VUE指令都会以“v-”开头。
铁达尼灬胖·2023-07-16 09:59

vue学习笔记-点击li给当前li添加背景色（3）

vue点击li给当前li添加背景色思路1：循环li列表并且获取到当前li的索引值看代码：{{msg}}获取表单数据设置表单数据{{item}}exportdefault{name:'app',data(){return{msg:'你好vue',list:['1111','2222','3333']}},methods:{getMsg(){alert(this.msg)},setMsg(){aler
键指江湖·2023-07-16 08:40

Vue学习笔记-从0到1搭建实战项目

新建项目vuecreatehello1注：项目名称不能有大写字母（Warning:namecannolongercontaincapitalletters）新建项目vuecreatehello1http://localhost:8080/vscode导入文件用vscode导入文件新增页面1.新增文件views/introduce.vueThisisanintroducepage2.App.vue新
wyx100·2023-07-15 16:06

VUE学习笔记009 路由router

使用a标签home1helloworld1使用router-link有点，点击跳转时不刷新页面home1helloworld1
梦想_15eb·2023-07-15 09:00

vue学习（7）vuex的辅助函数封装(基于vue3)

简介：封装了mapState，mapGetters，mapActions，mapMutations，用更灵活的方式来使用vuex，主要使用的是vuex的createNamespacedHelpers方法，此方法是帮助重写以特定模块为主的辅助函数createNamespacedHelpers在vuex@^3.1.1及以上都有文件截图：源码：以下举个例子，模块名为index，模块里有自己的state等
林大大哟·2023-07-15 08:18

VUE学习笔记--组件

文章目录组件化开发vue组件的三个组成部分启用less组件之间的父子关系使用组件路径提示插件注册私有组件注册全局组件快速生成vue代码框架插件自动闭合标签插件组件化开发vue组件的三个组成部分template中只能有一个根元素启用less组件之间的父子关系使用组件路径提示插件@为src所在的路径位置，即@为src该插件的配置在vscode的设置中配置//导入文件时是否携带文件拓展名"path-au
萤火虫的小尾巴·2023-07-15 03:26

VUE学习笔记--vue-cli

1.介绍vue-cli是vue的脚手架工具，帮我们快速的生产了vue的起步项目，内置了一些必备的比如打包工具，比如配置文件等等2.安装vue-clinpminstall-g@vue/clivue--version3.创建一个项目vuecreatemy-project4.cli目录结构node_modeles项目的依赖中心public静态资源文件夹，和assets不同的是，public不会被webp
CelineT·2023-07-15 03:23

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
上一页 8 9 10 11 12 13 14 15 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他