前端学习
崽崽张不是奶t
崽崽张
展开
-
【绑定样式】
字符串写法:样式的类名不确定,需要动态指定 <div id="root"> <div class="basic" :class="color" @click="changeColor"></div> </div> <style> .basic{ width:200px; height:200px; border:1px solid black; } .red{background:red;} .green{background:green原创 2022-04-15 15:15:33 · 196 阅读 · 0 评论 -
【数据代理】
let person={ name:"chenduoduo", sex:"girl" } Object.defineProperty(person,'age',{ value:23,//设置属性值 writtable:true,//设置属性是否可被修改,默认false enumerable:true,//设置属性是否可被枚举 configurable:true,//设置属性是否可被删除 get(){ //当age被读取时,调用getter 将 return value; } }) .原创 2022-04-12 15:05:39 · 781 阅读 · 0 评论 -
【事件处理】
绑定事件 @ 点击事件@click 键盘弹起@keyup.按键名 键盘按下@keydown.按键名 tab键必须使用keydown 系统修饰键crt、alt、shift、meta 配合keyup使用:按下修饰键的同时再按下其他键,随后释放其他键,事件才被触发 配合keydown使用:正常触发事件 <button @keyup.showInfo>点击显示按键信息</button> showInfo(e){ console.log(e.key);//取键名 console.log(原创 2022-04-12 17:01:21 · 88 阅读 · 0 评论 -
【计算属性与监视】
计算属性computed let vm=new VUE({ el:"#root", data:{ name:"Chenduoduo", age:23 }, computed:{//计算属性 通过已有的属性得到属性值,有缓存机制,效率更高 info:{//info是属性不是对象 //为计算属性配置getter,getter返回值作为计算属性info的值,与其他属性一样出现在vm上,可以通过插值语法展示在页面 //初次读取info时或所依赖的数据发生变化时,get会被调用 get(){ /原创 2022-04-13 17:46:16 · 142 阅读 · 0 评论