![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue学习笔记
ctrl-cv
今天又不想学习……
展开
-
vue学习之侦听器(十三)
1、侦听器的应用场景 数据变化时执行异步或开销较大的操作这个属性也可以用计算属性来实现案例:验证用户名是否可用需求:输入框中输入姓名,失去焦点时验证的是否存在,如果已经存在,提示从新输入,如果不存在,提示可以使用需求分析:①通过v-model实现数据绑定 ②需要提供提示信息 ③需要侦听器输入信息的变化 ④需要修改触发的事件...原创 2020-09-08 00:53:05 · 112 阅读 · 0 评论 -
vue学习之计算属性(十二)
1、何为需要计算属性? - -表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁在vue实例参数当中添加一个新的属性computed,通过函数的形式来定义,使用的时候直接写函数名即可(不用加括号)然后写处理语句的时候必须要写return才能最终得到计算属性的结果。计算属性是基于data中是数据来处理的。2、计算属性与方法的区别 a、计算属性是基于它们的依赖进行缓存的b、方法不存在缓存...原创 2020-09-07 23:04:24 · 134 阅读 · 0 评论 -
vue学习之自定义指令(十一)
1、全局指令a、获取元素焦点inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)2、改变元素的背景颜色(带参数的自定义指令)2、局部指令(推荐使用)...原创 2020-09-07 21:10:32 · 148 阅读 · 0 评论 -
vue学习之循环结构(十)
2、分支循环结构<li v-for='item in list'>{{item}}</li><li v-for='(item,index) in list'>{{item}} + '---' +{{index}}原创 2020-08-27 13:14:13 · 197 阅读 · 0 评论 -
vue学习之样式绑定(九)
class样式处理对象语法:<div v-bind:class="{ active: isActive}"></div>数组语法:<div v-bind:class="{activeClass, errorClass}"></div>或另外一种直接操作值的处理逻辑is开头属性名一般是一个标志位,要么是true要么是false...原创 2020-08-24 14:11:26 · 128 阅读 · 0 评论 -
vue学习之属性绑定(八)
Vue如何动态处理属性?v-bind指令用法<a v-bind:href='url'>跳转</a> 缩写形式:<a :href='url'>跳转</a>点击切换之后再点击百度v-model的底层实现原理分析<input v-bind:value="msg" v-on:input="msg=$event.target.value">...原创 2020-08-23 15:11:22 · 126 阅读 · 0 评论 -
vue学习之事件基本使用(七)
事件函数参数传递 普通参数和事件对象:<button v-on:click='say("hi",$event)'>Say hi</button>单个参数传递多个参数传递事件绑定-参数传递1、如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数2、如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event...原创 2020-08-21 00:34:09 · 112 阅读 · 0 评论 -
vue学习之事件绑定(六)
1、Vue如何处理事件?v-on指令用法:<input type='button' v-on:click='num++' />v-on简写形式:<input type='button' @click='num++' />2、事件函数的调用方式(函数必须要定义在methods中) 直接绑定函数名称:<button v-on:click='say'>Hello</button> 调用函数:<button v-on:...原创 2020-08-21 00:12:57 · 130 阅读 · 0 评论 -
vue学习之双向数据绑定(五)
双向数据绑定:页面数据之间的影响是双向的v-mode指令用法:<input type='text' v-model='uname' />其中涉及的MVVM设计思想: ①M(model) ②V(view) ③VM(View-Model)它的核心理念就是分而治之,把不同的代码放到不同的业务模块当中,然后再通过逻辑把它们组织到一块。最核心的就是双向绑定的方式,从视图到模型用的是事件监听,从模型到视图用的是数据绑定。...原创 2020-08-20 23:48:04 · 107 阅读 · 0 评论 -
vue学习之数据响应式(四)
如何理解响应式?数据的变化导致页面内容的变化的这种效果称为数据响应式v-once是只编译一次,显示内容之后不再具有响应式功能v-once的应用场景:如果显示的信息后续不需要再修改,可以使用v-once,这样可以提高性能...原创 2020-08-20 23:21:05 · 132 阅读 · 0 评论 -
vue学习之数据绑定指令(三)
1、v-text 填充纯文本 相比插值表达式更加简洁,而且不存在“闪动”问题。2、v-html 填充html片段 解析出来的内容是带有样式的。但是,在网站上动态任意渲染html是非常危险的,因为容易导致XSS(跨站脚本攻击) 攻击,只在可信内容上使用v-html,永不用在用户提交的内容上。3、v-pre 填充原始信息 显示原始信息,跳过编译过程。...原创 2020-08-19 02:44:37 · 131 阅读 · 0 评论 -
vue学习之v-cloak指令(二)
首先我们需要了解什么是指令?指令的本质就是自定义属性。在vue中,指令的格式:以v-开始(比如:v-cloak)在插值表达式中存在“闪动”的问题,在浏览器比较卡的情况下频繁刷新时会看到花括号的内容,要解决这个问题就要使用v-cloak指令,例:v-cloak指令用法: 1、提供样式 [v-cloak]{ display:none; } 2、在插值表达式所在的标签中添加v-cloak指令此指令的原理:先通过样...原创 2020-08-19 02:17:49 · 186 阅读 · 0 评论 -
vue学习之基本使用(一)
使用vue简单地输出 "hello vue"进入vue官网下载vue.js库文件引入vue.js库代码细节分析el:元素的挂载位置(值可以是css选择器或者dom元素)把数据关联到页面的某个标签里data:数据模型(值是一个对象)开发页面功能所用到的业务处理,当中可以放很多的键值{{}} 插值表达式用法:(1)将数据填充到html标签中 (如上)(2)插值表达式支持基本的计算操作,例如:...原创 2020-08-19 01:26:13 · 82 阅读 · 0 评论