前端专栏VUE学习

VUE学习笔记：7.v-model指令讲解

1.v-model介绍v-model主要用来操作input标签，实现标签与数据的双向绑定双向绑定：即改变vue中数据的值会导致input标签中的值改变，同理改变input标签中的值来也会导致vue中数据的值改变。能双向绑定的input标签包括：text格式，select格式和textarea格式，radio格式，checkbox格式等2.v-model的基本使用格式如下：#将input标签与数据m
new nm个对象·2023-08-08 08:25

2019-11-26 Vue学习常用网站

Vue中文官网基础教程[https://cn.vuejs.org/v2/guide/computed.html](https://cn.vuejs.org/v2/guide/computed.html)Vue中文官网API即Vue实例包含的默认属性和方法[https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7](https
胡生生·2023-08-06 10:48

Vue学习笔记（一）

一.了不起的vue1.官方介绍Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。2.渐进式框架做分层设计，每层都可选，不同层可以灵活接入其他
千锋HTML5学院·2023-08-06 00:05

【vue学习】watch监听问题

watch监听执行的时候，watch方法未执行。并没有报错遇见的问题子组件，定义了props，属性里有一个selectedData，但是在执行的时候，这个对象在父组件里也修改了，可是就是死活没有触发。。。观察报错比较不好调查的就是，这个并没有报错，只是不执行，也看不到真正传入到组件内部的对象值。最后在各种调查之后，发现了一个问题，就是如下两种写法是有区别的，传递到子组件的部分没有变化，但是在父组件
时光不等仁·2023-08-03 19:44

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

前端技术Vue学习笔记文章目录前端技术Vue学习笔记1、指令修饰符2、v-bind对于样式控制的增强2.1、v-bind对于样式控制的增强--class2.2、v-bind对于样式控制的增强--操作style3
Radan小哥·2023-08-02 22:47

vue学习之插值表达式{{}}与显示数据(v-text和v-html)

1.记得导入1.插值表达式{{}}vue插值表达式我最喜欢的人是：{{name}}//创建vue对象varapp=newVue({//让vue接管div标签el:"#app",//定义name值为"刘雨昕"，用于在div中引用data:{name:"刘雨昕"}});2.v-text和v-htmlv-text：{{msg}}-->v-html：{{msg}}-->v-text：把数据当作纯文本显示.
素心如月桠·2023-08-01 22:35

vue 目录

vue学习资源vue.js中文官网：http://cn.vuejs.org/vue.js源码：https://github.com/vuejs/vuevue.js官方工具：https://github.com
程序员达芬奇·2023-07-29 13:36

Vue学习第二课

1：创建Demo工程1：通过brew安装node.js；(不要使用sudo命令，后期会存在各种权限问题)2：安装过程，请根据警告或者报错提供的命令。进行修改，或者添加vi.bash_profile3：通过npminstallvue，安装vue环境；4：通过npminstall--globalvue-cli安装cli环境；5：通过vuecreate创建Demo工程；(注意：vue版本不同，命令稍微不
伙伴崩溃·2023-07-29 10:13

一个Java后端的Vue自学笔记

本人最近自学了一些Vue的皮毛，写下这篇博客不是为了哗众取宠，权当是为自己做一个Vue学习笔记。这篇博客主要记录了我学习Vue基础知识，完成一个TodoList小功能的开发过程。
Haozz_1994·2023-07-29 05:33

Vue学习记录第二天

复习letvm=newVue()vm=viewModel数据最终都会被vm代理{{msg}}表达式，赋值，计算，三元，尽量少写逻辑试图控制数据input，checkbox，textarea，radio，select但是selected，value，checked都无效了指令必须v-开头v-text相当于{{}}v-once只绑定第一次的数据v-html渲染htmlv-if根据表达式，决定是否插入页
大白熊_8133·2023-07-29 00:10

Vue学习Day3——生命周期\组件化

一、Vue生命周期Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。生命周期四个阶段：①创建②挂载③更新④销毁1.创建阶段：创建响应式数据2.挂载阶段：渲染模板3.更新阶段：修改数据，更新视图4.销毁阶段：销毁Vue实例二、Vue生命周期钩子Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→让开发者可以在【特定阶段】运行自己的代码Title{{title}}-{{count
wangkay88·2023-07-28 06:15

【Vue学习】Vue高级特性

1.自定义v-modelVue中的自定义v-model指的是在自定义组件中使用v-model语法糖来实现双向绑定。在Vue中，通过v-model指令可以将表单元素的值与组件实例的数据进行双向绑定。但是对于自定义组件，如果要实现v-model的双向绑定，就需要自定义v-model的实现方式。自定义v-model需要在自定义组件中提供一个value属性和一个input事件，并在组件模板中使用v-bin
周兴·2023-07-28 02:45

DAY1Vue学习—Vue引入、指令、模板插值语法

一、Vue引入和创建1、引入vue.js文件或者用npmivue下载2、vue类对象（1)创建vue实例const{creatApp}=VuecreatApp({//data选项定义数据//为什么data定义为函数形式：保证一个vue实例对应一个数据对象data{return{mes:'HelloWorld',}}methods:{click(){}//定义的方法}}).mount('#app')
jr2319·2023-07-28 00:15

Vue学习Day2——本地应用

核心:通过Vue实现常见的网页效果学习Vue指令，以案例巩固知识点Vue指令指的是，以v-开头的一组特殊语法一、巩固基础语法学习，学习三个案例根据案例中所涉及的知识点，可以将其分为三个部分1、内容绑定，事件绑定2、显示切换，属性绑定3、列表循环，表单元素绑定二、内容绑定，事件绑定（一）v-text设置标签的文本值（textContent）方法一：语法：varapp=newVue({el:"#app
阿波茨地额佛鸽·2023-07-28 00:14

Day42——Vue学习笔记

Vue入门文章目录Vue入门NodeJS学习VueV-bind条件与循环V-ifV-for双向绑定事件：v-on(@)路由axios实战Vue.js学习地址补充webpack的学习它为前端框架前端化工程开发工具：VScode（推荐）前端环境：NodeJS下载地址：https://code.visualstudio.com/docs/?dv=winhttps://nodejs.org/en/如何验证
fenglgC·2023-07-28 00:44

【Vue】vue基础语法——computed计算、watch监听、class和style，最后回顾JavaScript里面的常用方法（vue学习day03）

大家好，从今天开始，会每天分享vue学习的知识点，一起加油~首先，学习几个单词computed计算，watch监听，handler处理器，deep深度，config配置，global全局，Properties
前端小媛·2023-07-28 00:13

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