资讯专栏INFORMATION COLUMN

Vue 指令总结

yankeys / 1516人阅读

摘要:注意三者必须紧跟在一起。标签类型或成员,类型为数组用于渲染列表数据重复标签。是数组索引,是数组项目的索引。表达式属性中标签类型指令表达式,变量均为或的成员标签类型内容中标签类型表达式,变量均为或的成员标签类型参考资料

指令(directive) v-bind
<[标签类型] v-bind:[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />
<[标签类型] :[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />
v-on
<[标签类型] v-on:[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />
<[标签类型] @[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />
v-if / v-else-if / v-else
<[标签类型] v-if:[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />
<[标签类型] v-else-if:[标签属性]="[JavaScript 表达式,变量均为 data 或 methods 的成员]" />
<[标签类型] v-else />

v-ifv-else-ifv-else 用于指示某个元素是否渲染。

注意:三者必须紧跟在一起。

v-for
<[标签类型] v-for="(item, index) in [data 或 methods 成员,类型为数组]" />

v-for 用于渲染列表数据(重复标签)。item 是数组索引,index 是数组项目的索引。

需要注意的是, v-for 定义在列表成员(item)上而非列表(list)上。

表达式 属性中
<[标签类型] [Vue 指令]="JavaScript 表达式,变量均为 data 或 methods 的成员">
内容中
<[标签类型]>
  {{[JavaScript 表达式,变量均为 data 或 methods 的成员]}}
参考资料

https://vuejs.org/v2/guide/

https://cn.vuejs.org/v2/guide/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105857.html

相关文章

  • vue知识点总结

    摘要:知识点的生命周期生命周期钩子描述在实例初始化前,数据观测和事件配置之前被调用实例被创建完成后调用。在这一步,实例已经完成以下配置数据观测,属性和方法的运算,事件的回调。 vue知识点 1.vue的生命周期 生命周期钩子 描述 beforeCreate 在实例初始化前,数据观测和event/watcher事件配置之前被调用 created 实例被创建完成后调用。在这一步,实...

    mdluo 评论0 收藏0
  • 前端面试题总结——VUE(持续更新中)

    摘要:前端面试题总结持续更新中是哪个组件的属性模块的组件。都提供合理的钩子函数,可以让开发者定制化地去处理需求。 前端面试题总结——VUE(持续更新中) 1.active-class是哪个组件的属性? vue-router模块的router-link组件。 2.嵌套路由怎么定义? 在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。 //引入两个组件 ...

    SimonMa 评论0 收藏0
  • 前端知识点总结——Angular

    摘要:前端知识点总结一概述基于命令行的开发方式编译工作集成了打包工具。。。。在浏览器中接管展现应用的内容,并根据我们提供的操作指令响应用户的交互。在开发时,八大组成部分模块组件模板自带的标签指令绑定相关的的语法元数据告诉如何处理一个类。 前端知识点总结——Angular 一、Angular概述 基于命令行的开发方式? ①hot reload ②编译工作 ③集成了webpack打包工具 。。。...

    BaronZhang 评论0 收藏0
  • vue 的一些不常用指令和方法的总结

    摘要:生命周期钩子文本通过使用指令,能够执行一次性地插值,当数据改变时,插值处的内容不会更新。只能对可信内容使用插值,绝不要对用户提供的内容使用插值。理想的值是每项都有的且唯一的。 生命周期钩子 beforeCreate / createdbeforeMount / mountedbeforeUpdate / updatedbeforeDestroy / destroyed 文本 通过使用 ...

    timger 评论0 收藏0
  • 解决移动端一像素问题的Vue指令

    摘要:所以是不能用正常的方法来让安卓设备渲染一个物理像素的线。其他的指令自动处理。 最近公司项目要解决一像素问题,自己琢磨了一阵子并且网上搜索了一堆博客,总结出最好的办法应该是通过css的transform scale缩放1px的内容来模拟设备上1px的效果了。但是这个方法有太多局限。然后秉着css解决不了的问题就用js来解决的原则,然后结合vue的自定义指令,手撸了一个一像素vue自定义指...

    wing324 评论0 收藏0
  • 前端知识点总结——VUE(持续更新中)

    摘要:前端知识点总结持续更新中框架和库的区别框架有着自己的语法特点都有对应的各个模块库专注于一点框架的好处提到代码的质量,开发速度提高代码的复用率降低模块之间的耦合度高内聚低耦合思维模式的转换从操作的思维模式切换到以数据为主概述是一个渐进式的构建 前端知识点总结——VUE(持续更新中) 1.框架和库的区别: 框架:framework 有着自己的语法特点、都有对应的各个模块库 library ...

    big_cat 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<