网站门户是什么意思,python django 做 网站,wordpress 到顶插件,网页设计与网站建设课程设计vue作为前端框架#xff0c;为了简化或实现一些特定功能#xff0c;提供了很多指令#xff0c;那什么是指令呢#xff1f;
所谓的指令就是能够完成特定功能的一些vue语法#xff0c;比如属性绑定指令v-bind#xff0c;事件绑定指令v-on#xff0c;循环指令v-for等。在v…vue作为前端框架为了简化或实现一些特定功能提供了很多指令那什么是指令呢
所谓的指令就是能够完成特定功能的一些vue语法比如属性绑定指令v-bind事件绑定指令v-on循环指令v-for等。在vue中所有的指令都是v-开头的。
vue中最常用的指令有以下几种
v-bind 属性动态绑定指令通过v-bind可以实现html属性值的动态修改。如下图所示a标签有href属性就可以通过v-bind绑定动态数据只需要修改data对象中的href的值就可以实现修改超链接的跳转链接。并且v-bind指令由于使用频率比较高所以可以使用其简写形式也就是 冒号 v-on 事件绑定指令
我们知识前端开发会有很多事件比如点击事件键盘事件等之前使用js开发时事件绑定是通过先获取dom节点然后再给获取的节点绑定事件也就是方法而使用了v-on指令后就可以直接在节点dom上绑定事件。
如下图所示通过v-on绑定点击事件当点击按钮时就会触发绑定的事件函数而且由于v-on使用频率较高所以也提供了简写形式 艾特符 v-for 循环指令
因为实际开发过程中会碰到很多循环遍历的需求所以vue提供了v-for指令来遍历数据遍历对象可以是数组对象字符串等。最常见的遍历就是数组其次是对象。
v-for指令中提供了一个key属性可能很多人认为key指令没什么用或者说大部分时间都用不到key属性。但vue为什么提供了一个key属性呢
那是因为vue是一款前端框架它隔离了程序员之间操作dom的过程按照vue的语法vue框架自动实现操作dom的过程但为了提升效率vue使用了一个叫做虚拟dom的设计思想既在vue的操作过程中会先在内存中解析出一个虚拟dom然后使用diff算法匹配虚拟dom和真实dom的区别如果没有改变就不会修改真实dom 如果不一样才会根据新的数据重新渲染dom节点。
说白了就是vue为了实现dom的复用减少真实的dom操作而用来进行diff算法时所使用的一个key属性。
如果循环遍历的数据只是用来进行页面展示那么使用key属性确实没什么用但如果循环列表中的数据可能会被修改这时使用key的作用就体现出来了。
key最好是使用唯一的数据标识比如用户id手机号身份证号等因为默认情况下key是使用索引作为唯一标识但在数据修改和插入的过程中数据的索引可能会被改变比如在一个数组中的头部插入一条数据这时之前索引为0的数据变成了索引为1的数据。 v-model 数据双向绑定
在一些表单项中因为需要用户输入所以可以v-model进行双向数据绑定。当给输入项设置v-model属性时v-model设置的默认值就是输入项的值如果用户输入新的值那么v-model也能获取到最新的数据。
如下图所示使用v-model 绑定给input输入框进行双向数据绑定并设置默认值 默认值效果如下图 当在输入框中重新输入新的值时发现val的默认值已经被改变了这就是数据的双向绑定。
如果不使用vue使用原生js开发那么输入框就要使用placeholder给输入框设置默认值并且重新输入之后需要重新根据数据框的id获取当前的值。 在textcheckboxselect这几种类型时由于其属性不一样所以vue引擎会根据不同的类型解析出不同的属性正如官网所示 所以v-model在不同的html标签中有不同的效果所以具体的使用需要多加注意多学习总结或者查看官方文档。
剩下其它的vue指令相对来说用的就比较少而且也比较简单等使用的时候可以查看文档临时学习。
v-htmlv-textv-showv-ifv-else-if
