Vue（四）绑定样式、自定义指令(1)

left -= 10;

vm.p5style.left = ${left}px

} else if (e.keyCode == 38) {

var bottom = parseInt(vm.p5style.bottom);

bottom += 10;

vm.p5style.bottom = ${bottom}px

} else if (e.keyCode == 39) {

var left = parseInt(vm.p5style.left);

left += 10;

vm.p5style.left = ${left}px

} else if (e.keyCode == 40) {

var bottom = parseInt(vm.p5style.bottom);

bottom -= 10;

vm.p5style.bottom = ${bottom}px

}

//实现第1架飞机移动,左65 上87 右68 下83

if (e.keyCode == 65) {

var left = parseInt(vm.p3style.left);

left -= 10;

vm.p3style.left = ${left}px

} else if (e.keyCode == 87) {

var bottom = parseInt(vm.p3style.bottom);

bottom += 10;

vm.p3style.bottom = ${bottom}px

} else if (e.keyCode == 68) {

var left = parseInt(vm.p3style.left);

left += 10;

vm.p3style.left = ${left}px

} else if (e.keyCode == 83) {

var bottom = parseInt(vm.p3style.bottom);

bottom -= 10;

vm.p3style.bottom = ${bottom}px

}

}

2.绑定class

（1）将class属性看做一个普通的字符串变量绑定

<元素 :class=“变量名”

data:{

变量名:" class名1 class名2 class名3 …"

}

//该方法极不便于只修改其中某一个class

（2） 将class属性看做一个对象来绑定

<元素 :class=“{ class名1: 变量1, class名2:变量2,… }”

data:{

变量1: true或false, //开关，true表示启用这个class

变量2: true或false

}

//该方法便于修改某一个class

//缺点是如果多个元素都绑定同一种class，但是启用或不启用的状态不同，class的变量名易冲突

举例：实现手机号带样式的验证；

手机号:

{{msg}}

效果如下：

（3）将对象放进data中定义

<元素1 :class=“变量1”>

<元素2 :class=“变量2”>

data:{

变量1:{

class名1:true或false,

class名2:true或false

},

变量2:{

class名1:true或false,

class名2:true或false

},

}

//该方法可避免不同元素之间绑定同一class时互相影响

如果有固定不变的class，应该放在不带:的class中，而变化的class则放在带:的class中，最终编译时，不带:的class会和带:的class合并为一个class共同起作用。

<元素 class=“固定不变的class” :class=“变化的class”

举例：实现手机号和密码的带样式的验证；

手机号:

{{phoneMsg}}

密码:

{{pwdMsg}}

效果如下：

二、自定义指令

如果希望在开始时就能对HTML元素执行一些初始化DOM操作(如自动获得焦点)，但是vue中没有提供对应功能的指令。这时就可以自定义指令。

自定义指令的创建：

（1）创建一个指令保存在Vue内存中备用

Vue.directive(“指令名”, {

//插入后: 当前带有指令的DOM元素被vue挂载到页面上之后，自动触发的回调函数

inserted(当前带有指令的DOM元素){

对当前带有指令的DOM元素执行原生的DOM操作

}

})

//注意：

//Vue中V必须大写

//定义指令时，指令名不加v-前缀

（2）在页面上使用自定义的vue指令

<元素 v-指令名>

//注意：

//使用指令时，必须加v-前缀

需要注意，自定义指令写在HTML中，而HTML只认识小写字母，所以不能使用驼峰命名法，如果包含多个单词，可以用”-“隔开。

_原理：_Vue.directive()是创建一个自定义指令对象，保存在Vue类型的内存中备用。new Vue()扫描时，发现v-开头的自定义指令，就去Vue内存中找同名的自定义指令，找到同名的自定义指令，就自动执行自定义指令对象中的inserted()函数，并将当前扫描到的带有自定义指令的元素对象传给inserted()的形参变量；在inserted()函数内，可对当前传入的带有自定义指令的DOM元素应用原生的DOM操作。

举例：自定义指令让元素自动获得焦点；

搜索

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-BEwsb3uv-1715705627932)]

[外链图片转存中…(img-VztAD3mV-1715705627933)]

[外链图片转存中…(img-Y6XLNuaP-1715705627933)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！