Vue入门基础知识(二)指令、Class与Style绑定、事件处理

您所在的位置:网站首页 vue捕获事件的指令 Vue入门基础知识(二)指令、Class与Style绑定、事件处理

Vue入门基础知识(二)指令、Class与Style绑定、事件处理

2024-06-04 03:37| 来源: 网络整理| 查看: 265

一、指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

常用指令

v-text

更新元素的 textContent。如果要更新部分的 textContent,需要使用 {{ Mustache }} 插值。 如果值为代码会直接显示代码而不是渲染对应的标签。

111

v-html

相当于在元素标签内嵌入绑定的代码块。

aaa{{html}} aaa{{html}} new Vue({ el:'#app', data:{ html:'baidu.com' } }) new Vue({ el:'#app1', data:{ html:'baidu.com' } }) aaaa {{html}}

v-clock

隐藏网页加载完成之前未编译的模板语法。

v-bind

动态地绑定一个或多个 attribute,或一个组件 prop 到表达式。 在绑定 class 或 style attribute 时,支持其它类型的值,如数组或对象。 在绑定 prop 时,prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。 没有参数时,可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

< img v-bind:src="imageSrc"> //绑定一个attribute //动态attribute名 //缩写 // 动态 attribute 名缩写 //内联字符串拼接 //class 绑定


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3