Vue
文章平均质量分 69
进阶的菜熊
坚持学习,总有回报
展开
-
vue自定义指令
自定义指令通过directives关键字进行定义directives:{dir(element,binding){ console.log(element,binding)}}自定义的指令会自动接收两个参数,第一个为指令所在的html标签(DOM元素),第二个为指令的相关信息自定义指定何时会被调用? 指令与元素成功绑定时 指令所在的模板被重新解析时 例子:定义一个v-cut指令,每点击一次按钮显示一个值<body> <.原创 2022-01-16 18:41:37 · 267 阅读 · 0 评论 -
vue中列表渲染相关知识(v-for)
v-for动态渲染列表,实现列表关键字搜索以及列表排序,key的作用原创 2022-01-13 22:17:12 · 1837 阅读 · 0 评论 -
v-if与v-show的区别
条件渲染vue中的条件渲染分别为:v-if、v-show,两者都是用来控制元素在页面中的显示,在面试题中经常出现:v-if与v-show有什么区别。v-if语法:v-if="表达式"[v-else-if="表达式"][v-else="表达式"]<div v-if="1===1">第一个div</div><div v-else-if="a===1">第二个div</div><div v-else>第三个div<原创 2022-01-08 18:06:06 · 284 阅读 · 0 评论 -
Vue动态绑定class
我们在学习js时有学到过如何去动态切换元素的样式,具体有以下步骤: 先获得元素 修改样式。通过className或者style修改 <head><style> .class1 { border: 1px solid black; height: 20px; width: 20px; }</style></head><body><div id...原创 2022-01-07 08:45:00 · 23891 阅读 · 0 评论 -
watch与computed的区别
今天说说watch与computed的区别。我们知道有些功能既可以用watch实现又可以用computed实现,谁比谁好呢,没个准信。我们先来用它俩实现同一功能再进行对比看看具体好处。例子:定义两个输入框以及一个span标签,span标签中的内容为两个输入框中的值,span标签中的内容随着输入框中的内容变化而变化watch实现<body> <div id="app"> 姓: <input type="text" v-model=firs...原创 2022-01-06 14:47:24 · 1464 阅读 · 0 评论 -
Vue中的watch(监听)
vue中用watch来监视data数据的变化,当被监视的数据发生变化watch中定义的相关方法便会被调用。watch语法//第一种方法:用于不需要配置项,只需一个handlerwatch:{key:function(newval,oldval){},"obj.key":function(newval,oldval){}}//key为所要监视的属性名(名称要与data中的一致对应)//newval与oldval为自动传过去参数,不需要手动传,newval为当前属性改变后的值,oldval原创 2022-01-05 22:36:17 · 9023 阅读 · 0 评论 -
Vue中的computed属性
今天来说说vue中的计算属性computed,为了更好的理解计算属性的好处,我们先通过一个案例来慢慢 了解计算属性,有如下案例:定义两个输入框以及一个span标签,span标签中的内容为两个输入框中的值,span标签中的内容随着输入框中的内容变化而变化插值表达式我们先用插值表达式的方法来实现这一效果<body> <div id="app"> 姓: <input type="text" v-model=firstName> </b...原创 2022-01-04 23:17:20 · 1683 阅读 · 0 评论 -
Vue键盘事件
在js中我们要获取一个按键的编码通常需要通过(keydown/keyup)去绑定一个事件,再通过默认参数event中的keyCode属性去取得编码。如果我们要实现按固定的键才能触发事件时就需要在事件中进行不断的判断,这样会显的很麻烦,如var input = document.querySelector('input') input.onkeyup = function (e) { if (e.keyCode == 13) console.log('我是...原创 2022-01-03 21:04:39 · 1796 阅读 · 0 评论 -
Vue事件修饰符
在vue中为我们提供了六种修饰符,分别是: prevent:阻止默认事件 stop:阻止事件冒泡 once:事件只触发一次 capture:使用事件的捕获模式 self:只有event.target是当前操作的元素时才触发事件 passive:事件的默认行为立即执行,无需等待事件回调执行完毕 下面就具体来说说六种修饰符的具体用法preventprevent方法是用来阻止默认事件。我们知道在html中有很多标签都有自己默认的事件。比如a标..原创 2022-01-02 22:51:52 · 553 阅读 · 0 评论 -
Object.defineproperty方法的使用
Object.defineproperty方法的使用defineproperty方法用来添加或修改对象的属性,共有三个参数obj(要添加或修改属性的对象名),prop(要添加或修改的属性名),descriptor(要添加或修改属性的配置项)descriptor可取以下键值:configurable:true|false 当值为true时属性的配置项才能够被改变,也能被删除,默认为falseenumerable:true|false 当值为true时才能被枚举,默认为falsevalue:属原创 2022-01-01 21:35:39 · 343 阅读 · 0 评论 -
Vue---el与data的两种方法
新手小白重返vue战场引入vue1.可通过官网下载vue.js再进行引入2.通过npm进行引入,需要安装node npm init -y此时会出现 package.json文件 npm install vue安装vue 再通过script将vue.js引入到所需页面即可 测试vue<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">..原创 2021-12-31 07:30:00 · 186 阅读 · 0 评论